import { useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '../ui/dialog';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { Label } from '../ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
import { Slider } from '../ui/slider';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
import { api } from '../../lib/api';
import { layoutApi } from '../../lib/layoutApi';
import { Loader2, Wand2, Box, Layers, Grid } from 'lucide-react';

interface RoomLayoutWizardProps {
    isOpen: boolean;
    onClose: () => void;
    onSuccess: () => void;
    floorId: string;
}

export function RoomLayoutWizard({ isOpen, onClose, onSuccess, floorId }: RoomLayoutWizardProps) {
    const [step, setStep] = useState(1); // 1: Basics, 2: Layout, 3: Capacity
    const [loading, setLoading] = useState(false);

    const [formData, setFormData] = useState({
        name: '',
        type: 'FLOWER',
        setupType: 'RACK', // RACK, TABLE
        racksCount: 4,
        tiers: 2,
        rowsPerRack: 4,
        colsPerRack: 2
    });

    // Estimates
    const totalPlants = formData.racksCount * formData.rowsPerRack * formData.colsPerRack * formData.tiers;

    const handleGenerate = async () => {
        setLoading(true);
        try {
            await layoutApi.generateRoom({
                floorId,
                code: formData.name.toUpperCase().substring(0, 4), // Auto-code
                ...formData
            });
            onSuccess();
            onClose();
        } catch (error) {
            console.error('Failed to generate room:', error);
            // In a real app, show toast
        } finally {
            setLoading(false);
        }
    };

    return (
        <Dialog open={isOpen} onOpenChange={onClose}>
            <DialogContent className="max-w-2xl bg-zinc-950 border-zinc-800 text-zinc-100">
                <DialogHeader>
                    <DialogTitle className="text-xl flex items-center gap-2">
                        <Wand2 className="w-5 h-5 text-emerald-400" />
                        Parametric Room Generator
                    </DialogTitle>
                </DialogHeader>

                <div className="py-6">
                    <Tabs value={String(step)} className="w-full">
                        <TabsList className="grid w-full grid-cols-3 bg-zinc-900">
                            <TabsTrigger value="1" disabled={step < 1} onClick={() => setStep(1)}>1. Basics</TabsTrigger>
                            <TabsTrigger value="2" disabled={step < 2} onClick={() => setStep(2)}>2. Layout</TabsTrigger>
                            <TabsTrigger value="3" disabled={step < 3} onClick={() => setStep(3)}>3. Review</TabsTrigger>
                        </TabsList>

                        {/* STEP 1: BASICS */}
                        <TabsContent value="1" className="space-y-4 pt-4">
                            <div className="grid grid-cols-2 gap-4">
                                <div className="space-y-2">
                                    <Label>Room Name</Label>
                                    <Input
                                        placeholder="e.g. Flower Room 1"
                                        value={formData.name}
                                        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                                        className="bg-zinc-900 border-zinc-700"
                                    />
                                </div>
                                <div className="space-y-2">
                                    <Label>Room Type</Label>
                                    <Select
                                        value={formData.type}
                                        onValueChange={(val) => setFormData({ ...formData, type: val })}
                                    >
                                        <SelectTrigger className="bg-zinc-900 border-zinc-700">
                                            <SelectValue />
                                        </SelectTrigger>
                                        <SelectContent className="bg-zinc-900 border-zinc-700">
                                            <SelectItem value="VEGETATIVE">Vegetative</SelectItem>
                                            <SelectItem value="FLOWER">Flower</SelectItem>
                                            <SelectItem value="DRYING">Drying</SelectItem>
                                            <SelectItem value="CURING">Curing</SelectItem>
                                        </SelectContent>
                                    </Select>
                                </div>
                            </div>

                            <div className="space-y-2">
                                <Label>Setup Type</Label>
                                <div className="grid grid-cols-2 gap-4">
                                    <button
                                        className={`p-4 rounded-xl border flex flex-col items-center gap-2 transition-all ${formData.setupType === 'RACK' ? 'bg-emerald-900/20 border-emerald-500 text-emerald-400' : 'bg-zinc-900 border-zinc-700 text-zinc-400 hover:bg-zinc-800'}`}
                                        onClick={() => setFormData({ ...formData, setupType: 'RACK' })}
                                    >
                                        <Layers className="w-8 h-8" />
                                        <span className="font-medium">Vertical Racks</span>
                                    </button>
                                    <button
                                        className={`p-4 rounded-xl border flex flex-col items-center gap-2 transition-all ${formData.setupType === 'TABLE' ? 'bg-emerald-900/20 border-emerald-500 text-emerald-400' : 'bg-zinc-900 border-zinc-700 text-zinc-400 hover:bg-zinc-800'}`}
                                        onClick={() => setFormData({ ...formData, setupType: 'TABLE' })}
                                    >
                                        <Grid className="w-8 h-8" />
                                        <span className="font-medium">Rolling Tables</span>
                                    </button>
                                </div>
                            </div>
                        </TabsContent>

                        {/* STEP 2: LAYOUT */}
                        <TabsContent value="2" className="space-y-6 pt-4">
                            <div className="space-y-4">
                                <div className="flex justify-between items-center">
                                    <Label>Number of {formData.setupType === 'RACK' ? 'Racks' : 'Tables'}</Label>
                                    <span className="text-xl font-mono text-emerald-400">{formData.racksCount}</span>
                                </div>
                                <Slider
                                    value={[formData.racksCount]}
                                    onValueChange={([val]) => setFormData({ ...formData, racksCount: val })}
                                    min={1} max={20} step={1}
                                    className="py-4"
                                />
                            </div>

                            <div className="space-y-4">
                                <div className="flex justify-between items-center">
                                    <Label>Tiers per Rack</Label>
                                    <span className="text-2xl font-mono text-emerald-400">{formData.tiers}</span>
                                </div>
                                <div className="flex gap-2">
                                    {[1, 2, 3, 4, 5].map(t => (
                                        <button
                                            key={t}
                                            onClick={() => setFormData({ ...formData, tiers: t })}
                                            className={`flex-1 h-12 rounded-lg border font-bold transition-all ${formData.tiers === t ? 'bg-emerald-500 text-black border-emerald-500' : 'bg-zinc-900 border-zinc-700 text-zinc-400'}`}
                                        >
                                            {t}
                                        </button>
                                    ))}
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-4 pt-4 border-t border-zinc-800">
                                <div className="space-y-2">
                                    <Label>Rows (Length)</Label>
                                    <Input
                                        type="number"
                                        value={formData.rowsPerRack}
                                        onChange={(e) => setFormData({ ...formData, rowsPerRack: parseInt(e.target.value) || 4 })}
                                        className="bg-zinc-900 border-zinc-700"
                                    />
                                </div>
                                <div className="space-y-2">
                                    <Label>Columns (Example: 2 trays wide)</Label>
                                    <Input
                                        type="number"
                                        value={formData.colsPerRack}
                                        onChange={(e) => setFormData({ ...formData, colsPerRack: parseInt(e.target.value) || 2 })}
                                        className="bg-zinc-900 border-zinc-700"
                                    />
                                </div>
                            </div>
                        </TabsContent>

                        {/* STEP 3: REVIEW */}
                        <TabsContent value="3" className="space-y-6 pt-4">
                            <div className="bg-zinc-900/50 rounded-xl p-6 border border-zinc-800 space-y-4">
                                <h3 className="text-lg font-medium text-emerald-400">Total Capacity Estimate</h3>

                                <div className="grid grid-cols-2 gap-8">
                                    <div>
                                        <p className="text-sm text-zinc-400">Total Plant Sites</p>
                                        <p className="text-4xl font-bold text-white">{totalPlants}</p>
                                    </div>
                                    <div>
                                        <p className="text-sm text-zinc-400">Canopy Sq. Ft (Est)</p>
                                        <p className="text-4xl font-bold text-white">
                                            {totalPlants * 1.5} <span className="text-sm font-normal text-zinc-500">sq ft</span>
                                        </p>
                                    </div>
                                </div>

                                <div className="border-t border-zinc-800 pt-4 mt-4 grid grid-cols-2 gap-4 text-sm">
                                    <div className="flex justify-between">
                                        <span className="text-zinc-500">Units:</span>
                                        <span className="text-zinc-200">{formData.racksCount} {formData.setupType}s</span>
                                    </div>
                                    <div className="flex justify-between">
                                        <span className="text-zinc-500">Tiers:</span>
                                        <span className="text-zinc-200">{formData.tiers}</span>
                                    </div>
                                    <div className="flex justify-between">
                                        <span className="text-zinc-500">Grid:</span>
                                        <span className="text-zinc-200">{formData.rowsPerRack} x {formData.colsPerRack}</span>
                                    </div>
                                </div>
                            </div>
                        </TabsContent>
                    </Tabs>
                </div>

                <DialogFooter className="flex justify-between sm:justify-between w-full">
                    {step > 1 ? (
                        <Button variant="outline" onClick={() => setStep(step - 1)} className="border-zinc-700 text-zinc-300">
                            Back
                        </Button>
                    ) : (
                        <div /> // Spacer
                    )}

                    {step < 3 ? (
                        <Button onClick={() => setStep(step + 1)} className="bg-emerald-500 hover:bg-emerald-600 text-black">
                            Next
                        </Button>
                    ) : (
                        <Button onClick={handleGenerate} disabled={loading} className="bg-emerald-500 hover:bg-emerald-600 text-black w-full sm:w-auto">
                            {loading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : <Wand2 className="w-4 h-4 mr-2" />}
                            Generate Room
                        </Button>
                    )}
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}