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

export const GridGenerator: React.FC = () => {
  const { generateNewGrid, isLoading } = useGridStore();
  const [config, setConfig] = useState<GridConfig>({
    width: 8,
    height: 8,
    numStores: 2,
    numDestinations: 3,
    numTunnels: 2,
    obstacleDensity: 0.1,
  });

  const handleGenerate = () => {
    generateNewGrid(config);
  };

  return (
    <Card>
      <CardHeader className="pb-3">
        <CardTitle className="flex items-center gap-2 text-zinc-400 font-medium">
          <Settings className="w-4 h-4" />
          Configuration
        </CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        <div className="grid grid-cols-2 gap-3">
          <div className="space-y-1">
            <label className="text-xs text-zinc-500">Width</label>
            <input
              type="number"
              min={5}
              max={20}
              value={config.width}
              onChange={(e) => setConfig({ ...config, width: parseInt(e.target.value) })}
              className="w-full px-2.5 py-1.5 bg-zinc-800 border border-zinc-700 rounded text-zinc-200 text-sm font-mono focus:outline-none focus:border-zinc-600"
            />
          </div>

          <div className="space-y-1">
            <label className="text-xs text-zinc-500">Height</label>
            <input
              type="number"
              min={5}
              max={20}
              value={config.height}
              onChange={(e) => setConfig({ ...config, height: parseInt(e.target.value) })}
              className="w-full px-2.5 py-1.5 bg-zinc-800 border border-zinc-700 rounded text-zinc-200 text-sm font-mono focus:outline-none focus:border-zinc-600"
            />
          </div>

          <div className="space-y-1">
            <label className="text-xs text-zinc-500">Stores</label>
            <input
              type="number"
              min={1}
              max={3}
              value={config.numStores}
              onChange={(e) => setConfig({ ...config, numStores: parseInt(e.target.value) })}
              className="w-full px-2.5 py-1.5 bg-zinc-800 border border-zinc-700 rounded text-zinc-200 text-sm font-mono focus:outline-none focus:border-zinc-600"
            />
          </div>

          <div className="space-y-1">
            <label className="text-xs text-zinc-500">Destinations</label>
            <input
              type="number"
              min={1}
              max={10}
              value={config.numDestinations}
              onChange={(e) => setConfig({ ...config, numDestinations: parseInt(e.target.value) })}
              className="w-full px-2.5 py-1.5 bg-zinc-800 border border-zinc-700 rounded text-zinc-200 text-sm font-mono focus:outline-none focus:border-zinc-600"
            />
          </div>

          <div className="space-y-1">
            <label className="text-xs text-zinc-500">Tunnels</label>
            <input
              type="number"
              min={0}
              max={5}
              value={config.numTunnels}
              onChange={(e) => setConfig({ ...config, numTunnels: parseInt(e.target.value) })}
              className="w-full px-2.5 py-1.5 bg-zinc-800 border border-zinc-700 rounded text-zinc-200 text-sm font-mono focus:outline-none focus:border-zinc-600"
            />
          </div>

          <div className="space-y-1">
            <label className="text-xs text-zinc-500">Obstacles</label>
            <input
              type="number"
              min={0}
              max={0.5}
              step={0.05}
              value={config.obstacleDensity}
              onChange={(e) => setConfig({ ...config, obstacleDensity: parseFloat(e.target.value) })}
              className="w-full px-2.5 py-1.5 bg-zinc-800 border border-zinc-700 rounded text-zinc-200 text-sm font-mono focus:outline-none focus:border-zinc-600"
            />
          </div>
        </div>

        <Button
          onClick={handleGenerate}
          disabled={isLoading}
          variant="primary"
          className="w-full"
          size="sm"
        >
          <Shuffle className="w-4 h-4" />
          {isLoading ? 'Generating...' : 'Generate Grid'}
        </Button>
      </CardContent>
    </Card>
  );
};

export default GridGenerator;