import { useState } from 'react';
import { X, Building2, ArrowRight, Loader2 } from 'lucide-react';
import { layoutApi } from '../../../lib/layoutApi';

interface AddBuildingModalProps {
    isOpen: boolean;
    onClose: () => void;
    propertyId: string | null;
    onCreated: (buildingId: string) => void;
}

export function AddBuildingModal({ isOpen, onClose, propertyId, onCreated }: AddBuildingModalProps) {
    const [loading, setLoading] = useState(false);
    const [formData, setFormData] = useState({
        name: '',
        code: '',
        type: 'INDOOR' // INDOOR, GREENHOUSE, OUTDOOR
    });

    if (!isOpen || !propertyId) return null;

    const handleCreate = async () => {
        if (!formData.name.trim()) return;

        setLoading(true);
        try {
            const building = await layoutApi.createBuilding({
                propertyId,
                name: formData.name.trim(),
                code: formData.code.trim() || formData.name.substring(0, 3).toUpperCase(),
                type: formData.type
            });
            onCreated(building.id);
            onClose();
            // Reset form
            setFormData({ name: '', code: '', type: 'INDOOR' });
        } catch (error) {
            console.error('Failed to create building:', error);
        } finally {
            setLoading(false);
        }
    };

    return (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
            <div className="bg-slate-900 border border-white/10 rounded-2xl w-full max-w-md mx-4 overflow-hidden shadow-2xl">
                {/* Header */}
                <div className="px-6 py-4 border-b border-white/10 flex items-center justify-between">
                    <div className="flex items-center gap-3">
                        <div className="w-10 h-10 rounded-xl bg-[var(--color-primary)]/20 flex items-center justify-center">
                            <Building2 className="text-emerald-400" size={20} />
                        </div>
                        <div>
                            <h2 className="text-lg font-bold text-white">Add New Building</h2>
                            <p className="text-xs text-[var(--color-text-tertiary)]">Expand your facility</p>
                        </div>
                    </div>
                    <button onClick={onClose} className="p-2 hover:bg-white/5 rounded-lg transition-colors">
                        <X size={20} className="text-[var(--color-text-tertiary)]" />
                    </button>
                </div>

                {/* Content */}
                <div className="p-6 space-y-4">
                    <div>
                        <label className="block text-sm text-[var(--color-text-tertiary)] mb-2">Building Name</label>
                        <input
                            type="text"
                            value={formData.name}
                            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                            placeholder="Greenhouse B"
                            className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-3 text-white focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none"
                        />
                    </div>

                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="block text-sm text-[var(--color-text-tertiary)] mb-2">Code</label>
                            <input
                                type="text"
                                value={formData.code}
                                onChange={(e) => setFormData({ ...formData, code: e.target.value })}
                                placeholder="GH-B"
                                className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-3 text-white focus:border-emerald-500 outline-none uppercase"
                            />
                        </div>
                        <div>
                            <label className="block text-sm text-[var(--color-text-tertiary)] mb-2">Type</label>
                            <select
                                value={formData.type}
                                onChange={(e) => setFormData({ ...formData, type: e.target.value })}
                                className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-3 text-white focus:border-emerald-500 outline-none"
                            >
                                <option value="INDOOR">Indoor</option>
                                <option value="GREENHOUSE">Greenhouse</option>
                                <option value="OUTDOOR">Outdoor</option>
                            </select>
                        </div>
                    </div>
                </div>

                {/* Footer */}
                <div className="px-6 py-4 border-t border-white/10 flex justify-end gap-3">
                    <button onClick={onClose} className="px-4 py-2 text-sm text-[var(--color-text-tertiary)] hover:text-white transition-colors">
                        Cancel
                    </button>
                    <button
                        onClick={handleCreate}
                        disabled={!formData.name.trim() || loading}
                        className="flex items-center gap-2 px-5 py-2 bg-[var(--color-primary)] hover:bg-[var(--color-primary)] disabled:bg-slate-700 disabled:text-[var(--color-text-tertiary)] rounded-lg text-sm font-medium transition-colors"
                    >
                        {loading ? <Loader2 size={16} className="animate-spin" /> : <ArrowRight size={16} />}
                        Create Building
                    </button>
                </div>
            </div>
        </div>
    );
}
