import React from 'react';
import { useGridStore } from '../../store/gridStore';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Button } from '../ui/button';
import { Brain } from 'lucide-react';
import type { Algorithm } from '../../types';

const ALGORITHMS: { code: Algorithm; name: string; category: 'uninformed' | 'informed' }[] = [
  { code: 'BF', name: 'Breadth-First', category: 'uninformed' },
  { code: 'DF', name: 'Depth-First', category: 'uninformed' },
  { code: 'ID', name: 'Iterative Deepening', category: 'uninformed' },
  { code: 'UC', name: 'Uniform Cost', category: 'uninformed' },
  { code: 'GR1', name: 'Greedy (Manhattan)', category: 'informed' },
  { code: 'GR2', name: 'Greedy (Euclidean)', category: 'informed' },
  { code: 'AS1', name: 'A* (Manhattan)', category: 'informed' },
  { code: 'AS2', name: 'A* (Tunnel)', category: 'informed' },
];

export const AlgorithmSelector: React.FC = () => {
  const { selectedAlgorithm, setAlgorithm } = useGridStore();

  const uninformed = ALGORITHMS.filter(a => a.category === 'uninformed');
  const informed = ALGORITHMS.filter(a => a.category === 'informed');

  return (
    <Card>
      <CardHeader className="pb-3">
        <CardTitle className="flex items-center gap-2 text-zinc-400 font-medium">
          <Brain className="w-4 h-4" />
          Algorithm
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        <div>
          <p className="text-xs text-zinc-600 mb-2">Uninformed</p>
          <div className="grid grid-cols-2 gap-1.5">
            {uninformed.map((algo) => (
              <Button
                key={algo.code}
                onClick={() => setAlgorithm(algo.code)}
                variant={selectedAlgorithm === algo.code ? 'secondary' : 'ghost'}
                size="xs"
                className="justify-start text-xs"
              >
                {algo.name}
              </Button>
            ))}
          </div>
        </div>

        <div>
          <p className="text-xs text-zinc-600 mb-2">Informed</p>
          <div className="grid grid-cols-2 gap-1.5">
            {informed.map((algo) => (
              <Button
                key={algo.code}
                onClick={() => setAlgorithm(algo.code)}
                variant={selectedAlgorithm === algo.code ? 'secondary' : 'ghost'}
                size="xs"
                className="justify-start text-xs"
              >
                {algo.name}
              </Button>
            ))}
          </div>
        </div>
      </CardContent>
    </Card>
  );
};

export default AlgorithmSelector;