import React, { useState, useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';

const NonogramApp = () => {
  const [size, setSize] = useState(5);
  const [grid, setGrid] = useState([]);
  const [solution, setSolution] = useState([]);
  const [rowClues, setRowClues] = useState([]);
  const [colClues, setColClues] = useState([]);
  const [correctRows, setCorrectRows] = useState([]);
  const [correctColumns, setCorrectColumns] = useState([]);
  const [isComplete, setIsComplete] = useState(false);

  useEffect(() => {
    startNewGame();
  }, [size]);

  const generateSolution = () => {
    return Array(size).fill().map(() => 
      Array(size).fill().map(() => Math.random() > 0.5 ? 1 : 0)
    );
  };

  const generateClues = (solution) => {
    const rowClues = solution.map(row => {
      const clues = [];
      let count = 0;
      for (let i = 0; i <= row.length; i++) {
        if (i < row.length && row[i] === 1) {
          count++;
        } else if (count > 0) {
          clues.push(count);
          count = 0;
        }
      }
      return clues.length ? clues : [0];
    });

    const colClues = Array(size).fill().map((_, colIndex) => {
      const clues = [];
      let count = 0;
      for (let i = 0; i <= size; i++) {
        if (i < size && solution[i][colIndex] === 1) {
          count++;
        } else if (count > 0) {
          clues.push(count);
          count = 0;
        }
      }
      return clues.length ? clues : [0];
    });

    return { rowClues, colClues };
  };

  const startNewGame = () => {
    const newSolution = generateSolution();
    const { rowClues, colClues } = generateClues(newSolution);
    setSolution(newSolution);
    setRowClues(rowClues);
    setColClues(colClues);
    setGrid(Array(size).fill().map(() => Array(size).fill(0)));
    setCorrectRows([]);
    setCorrectColumns([]);
    setIsComplete(false);
  };

  const handleCellClick = (row, col, isRightClick) => {
    const newGrid = [...grid];
    if (isRightClick) {
      newGrid[row][col] = newGrid[row][col] === 2 ? 0 : 2; // 2 represents a cross
    } else {
      newGrid[row][col] = newGrid[row][col] === 1 ? 0 : 1;
    }
    setGrid(newGrid);
    checkRowCompletion(row, newGrid);
    checkColumnCompletion(col, newGrid);
    checkPuzzleCompletion(newGrid);
  };

  const checkRowCompletion = (row, currentGrid) => {
    const isCorrect = currentGrid[row].every((value, index) => 
      (value === 1) === (solution[row][index] === 1)
    );

    setCorrectRows(prev => 
      isCorrect ? [...prev, row] : prev.filter(r => r !== row)
    );
  };

  const checkColumnCompletion = (col, currentGrid) => {
    const isCorrect = currentGrid.every((row, index) => 
      (row[col] === 1) === (solution[index][col] === 1)
    );

    setCorrectColumns(prev => 
      isCorrect ? [...prev, col] : prev.filter(c => c !== col)
    );
  };

  const checkPuzzleCompletion = (currentGrid) => {
    const isComplete = currentGrid.every((row, rowIndex) => 
      row.every((cell, colIndex) => 
        (cell === 1) === (solution[rowIndex][colIndex] === 1)
      )
    );
    setIsComplete(isComplete);
  };

  return (
    <div className="p-4">
      <h1 className="text-2xl font-bold mb-4">Nonogram Puzzel</h1>
      <div className="flex mb-4 items-center">
        <Select value={size.toString()} onValueChange={(value) => setSize(Number(value))}>
          <SelectTrigger className="w-32 mr-4">
            <SelectValue placeholder="Grootte" />
          </SelectTrigger>
          <SelectContent>
            {[5, 10, 15].map(s => (
              <SelectItem key={s} value={s.toString()}>{s}x{s}</SelectItem>
            ))}
          </SelectContent>
        </Select>
        <Button onClick={startNewGame}>Nieuw spel</Button>
      </div>
      <div className="flex flex-col">
        <div className="flex">
          <div className="w-20"></div>
          <div className="flex">
            {colClues.map((clue, i) => (
              <div key={i} className={`w-8 flex flex-col items-center justify-end ${correctColumns.includes(i) ? 'text-green-500' : ''}`}>
                {clue.map((num, j) => (
                  <div key={j} className="text-sm">{num}</div>
                ))}
              </div>
            ))}
          </div>
        </div>
        <div className="flex">
          <div className="flex flex-col justify-end mr-2 w-20">
            {rowClues.map((clue, i) => (
              <div key={i} className={`h-8 px-2 flex items-center justify-end ${correctRows.includes(i) ? 'text-green-500' : ''}`}>
                {clue.join(' ')}
              </div>
            ))}
          </div>
          <div>
            {grid.map((row, rowIndex) => (
              <div key={rowIndex} className="flex">
                {row.map((cell, colIndex) => (
                  <div
                    key={colIndex}
                    className={`w-8 h-8 cursor-pointer flex items-center justify-center
                      ${cell === 1 ? 'bg-black' : 'bg-white'}
                      ${colIndex % 5 === 4 && colIndex !== size - 1 ? 'border-r-2 border-r-gray-500' : 'border-r border-r-gray-300'}
                      ${rowIndex % 5 === 4 && rowIndex !== size - 1 ? 'border-b-2 border-b-gray-500' : 'border-b border-b-gray-300'}
                      ${colIndex === 0 ? 'border-l border-l-gray-300' : ''}
                      ${rowIndex === 0 ? 'border-t border-t-gray-300' : ''}
                    `}
                    onClick={() => handleCellClick(rowIndex, colIndex, false)}
                    onContextMenu={(e) => {
                      e.preventDefault();
                      handleCellClick(rowIndex, colIndex, true);
                    }}
                  >
                    {cell === 2 && <span className="text-red-500 font-bold">X</span>}
                  </div>
                ))}
              </div>
            ))}
          </div>
        </div>
      </div>
      <AlertDialog open={isComplete}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Gefeliciteerd!</AlertDialogTitle>
            <AlertDialogDescription>
              Je hebt de puzzel opgelost!
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogAction onClick={startNewGame}>Nieuw spel</AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  );
};

export default NonogramApp;