"use client";

import { useState, useCallback } from 'react';
import { cn } from '@/lib/utils';
import { ChessIcon } from './ChessIcon';
import { Button } from '@/components/ui/button';
import { RotateCcw } from 'lucide-react';
import { pieceMap } from '../shared/Helpers';

type Piece = string | null;
type Board = Piece[][];
type Position = { row: number, col: number } | null;

const initialBoard: Board = [
  ['br', 'bn', 'bb', 'bq', 'bk', 'bb', 'bn', 'br'],
  ['bp', 'bp', 'bp', 'bp', 'bp', 'bp', 'bp', 'bp'],
  [null, null, null, null, null, null, null, null],
  [null, null, null, null, null, null, null, null],
  [null, null, null, null, null, null, null, null],
  [null, null, null, null, null, null, null, null],
  ['wp', 'wp', 'wp', 'wp', 'wp', 'wp', 'wp', 'wp'],
  ['wr', 'wn', 'wb', 'wq', 'wk', 'wb', 'wn', 'wr'],
];

export function ChessBoard() {
  const [board, setBoard] = useState<Board>(initialBoard);
  const [selectedPiece, setSelectedPiece] = useState<Position>(null);

  const handleSquareClick = useCallback((row: number, col: number) => {
    if (selectedPiece) {
      // Move piece
      const newBoard = board.map(r => [...r]);
      newBoard[row][col] = newBoard[selectedPiece.row][selectedPiece.col];
      newBoard[selectedPiece.row][selectedPiece.col] = null;
      setBoard(newBoard);
      setSelectedPiece(null);
    } else if (board[row][col]) {
      // Select piece
      setSelectedPiece({ row, col });
    }
  }, [selectedPiece, board]);

  const resetBoard = () => {
    setBoard(initialBoard);
    setSelectedPiece(null);
  };

  return (
    <div className="flex flex-col items-center gap-4">
      <div className="grid grid-cols-8 w-full max-w-md md:max-w-xl aspect-square shadow-2xl rounded-lg overflow-hidden border-4 border-primary/50">
        {board.map((row, rowIndex) =>
          row.map((piece, colIndex) => {
            const isLightSquare = (rowIndex + colIndex) % 2 !== 0;
            const isSelected = selectedPiece && selectedPiece.row === rowIndex && selectedPiece.col === colIndex;
            
            return (
              <div
                key={`${rowIndex}-${colIndex}`}
                onClick={() => handleSquareClick(rowIndex, colIndex)}
                className={cn(
                  'flex items-center justify-center aspect-square cursor-pointer transition-colors',
                  isLightSquare ? 'bg-[#64676E]' : 'bg-white',
                  isSelected && 'bg-accent/50',
                )}
              >
                {piece && 
                  <div className={cn('transition-transform duration-100 ease-in-out', isSelected && 'scale-125')}>
                    <ChessIcon
                      piece={piece}
                      alt="White King"
                      src={pieceMap(piece)}
                      width={45}
                      height={45}
                      className="w-10 h-10 md:w-12 md:h-12 drop-shadow-md"
                    />
                  </div>
                }
              </div>
            );
          })
        )}
      </div>
      <Button onClick={resetBoard} variant="outline" className='text-primary border-primary hover:bg-primary/10 hover:text-primary'>
        <RotateCcw className="mr-2 h-4 w-4" />
          Reset Board
      </Button>
    </div>
  );
}