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

interface PropertySetupProps {
    isOpen: boolean;
    onClose: () => void;
    onCreated: () => void;
}

export function PropertySetup({ isOpen, onClose, onCreated }: PropertySetupProps) {
    const [step, setStep] = useState(1);
    const [loading, setLoading] = useState(false);
    const [formData, setFormData] = useState({
        name: '',
        address: '',
        licenseNum: ''
    });

    if (!isOpen) return null;

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

        setLoading(true);
        try {
            await layoutApi.createProperty({
                name: formData.name.trim(),
                address: formData.address.trim() || undefined,
                licenseNum: formData.licenseNum.trim() || undefined
            });
            onCreated();
            onClose();
        } catch (error) {
            console.error('Failed to create property:', 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-lg 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-gradient-to-br from-emerald-600 to-teal-600 flex items-center justify-center">
                            <Building2 className="text-white" size={20} />
                        </div>
                        <div>
                            <h2 className="text-lg font-bold text-white">Setup Your Facility</h2>
                            <p className="text-xs text-[var(--color-text-tertiary)]">Step {step} of 1</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-6">
                    {/* Info Banner */}
                    <div className="bg-[var(--color-primary)]/10 border border-emerald-600/20 rounded-xl p-4">
                        <p className="text-sm text-emerald-300">
                            Create your facility layout to track plant locations with precision.
                            We'll create a default building and floor to get you started.
                        </p>
                    </div>

                    {/* Form Fields */}
                    <div className="space-y-4">
                        <div>
                            <label className="block text-sm text-[var(--color-text-tertiary)] mb-2 flex items-center gap-2">
                                <Building2 size={14} />
                                Property Name *
                            </label>
                            <input
                                type="text"
                                value={formData.name}
                                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                                placeholder="777 Wolfpack Cultivation"
                                className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-3 text-white placeholder-slate-500 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none"
                            />
                        </div>

                        <div>
                            <label className="block text-sm text-[var(--color-text-tertiary)] mb-2 flex items-center gap-2">
                                <MapPin size={14} />
                                Address
                            </label>
                            <input
                                type="text"
                                value={formData.address}
                                onChange={(e) => setFormData({ ...formData, address: e.target.value })}
                                placeholder="123 Cannabis Blvd, City, CA"
                                className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-3 text-white placeholder-slate-500 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none"
                            />
                        </div>

                        <div>
                            <label className="block text-sm text-[var(--color-text-tertiary)] mb-2 flex items-center gap-2">
                                <FileText size={14} />
                                DCC License Number
                            </label>
                            <input
                                type="text"
                                value={formData.licenseNum}
                                onChange={(e) => setFormData({ ...formData, licenseNum: e.target.value })}
                                placeholder="C10-0000000-LIC"
                                className="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-3 text-white placeholder-slate-500 focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500 outline-none font-mono"
                            />
                        </div>
                    </div>
                </div>

                {/* Footer */}
                <div className="px-6 py-4 border-t border-white/10 flex justify-between">
                    <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" />
                                Creating...
                            </>
                        ) : (
                            <>
                                Create Facility
                                <ArrowRight size={16} />
                            </>
                        )}
                    </button>
                </div>
            </div>
        </div>
    );
}
