'use client';

import { useState } from 'react';
import { FirmwareUpdate, Vehicle, VehicleGroup, uploadUpdate, createDeployment } from '@/lib/api';
import { Upload, Rocket, HardDrive, CheckCircle2, AlertCircle, Users } from 'lucide-react';

interface UpdateManagerProps {
    updates: FirmwareUpdate[];
    vehicles: Vehicle[];
    groups: VehicleGroup[];
    onUpdateDeployed: () => void;
}

export function UpdateManager({ updates, vehicles, groups, onUpdateDeployed }: UpdateManagerProps) {
    const [file, setFile] = useState<File | null>(null);
    const [version, setVersion] = useState('');
    const [description, setDescription] = useState('');
    const [uploading, setUploading] = useState(false);

    const [selectedUpdate, setSelectedUpdate] = useState<number | null>(null);
    const [targetType, setTargetType] = useState<'vehicle' | 'group'>('vehicle');
    const [selectedTarget, setSelectedTarget] = useState<string>(''); // VIN or Group ID
    const [deploying, setDeploying] = useState(false);

    const handleUpload = async (e: React.FormEvent) => {
        e.preventDefault();
        if (!file || !version) return;

        setUploading(true);
        try {
            const formData = new FormData();
            formData.append('file', file);
            formData.append('version', version);
            formData.append('description', description);
            await uploadUpdate(formData);
            onUpdateDeployed();
            setFile(null);
            setVersion('');
            setDescription('');
        } catch (err) {
            console.error(err);
            alert('Upload failed');
        } finally {
            setUploading(false);
        }
    };

    const handleDeploy = async () => {
        if (!selectedUpdate || !selectedTarget) return;

        setDeploying(true);
        try {
            if (targetType === 'vehicle') {
                await createDeployment(selectedUpdate, selectedTarget, undefined);
            } else {
                await createDeployment(selectedUpdate, undefined, parseInt(selectedTarget));
            }
            onUpdateDeployed();
            alert('Deployment started!');
        } catch (err) {
            console.error(err);
            alert('Deployment failed');
        } finally {
            setDeploying(false);
        }
    };

    return (
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {/* Upload Section */}
            <div className="bg-zinc-900/50 backdrop-blur-md border border-zinc-800 rounded-xl p-6 shadow-xl">
                <h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
                    <Upload className="w-5 h-5 text-blue-400" />
                    Upload Firmware
                </h2>
                <form onSubmit={handleUpload} className="space-y-4">
                    <div>
                        <label className="block text-sm font-medium text-zinc-400 mb-1">Version</label>
                        <input
                            type="text"
                            value={version}
                            onChange={e => setVersion(e.target.value)}
                            placeholder="e.g. 1.2.0"
                            className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 outline-none"
                            required
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-zinc-400 mb-1">Description</label>
                        <input
                            type="text"
                            value={description}
                            onChange={e => setDescription(e.target.value)}
                            placeholder="Critical security patch..."
                            className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-white focus:ring-2 focus:ring-blue-500 outline-none"
                        />
                    </div>
                    <div>
                        <label className="block text-sm font-medium text-zinc-400 mb-1">Binary File</label>
                        <div className="relative border-2 border-dashed border-zinc-800 rounded-lg p-4 hover:border-zinc-700 transition-colors text-center cursor-pointer group">
                            <input
                                type="file"
                                onChange={e => setFile(e.target.files?.[0] || null)}
                                className="absolute inset-0 opacity-0 cursor-pointer"
                                required
                            />
                            <HardDrive className="w-6 h-6 text-zinc-600 mx-auto mb-2 group-hover:text-zinc-400 transition-colors" />
                            <p className="text-sm text-zinc-500">
                                {file ? file.name : "Click to select binary"}
                            </p>
                        </div>
                    </div>
                    <button
                        type="submit"
                        disabled={uploading}
                        className="w-full bg-blue-600 hover:bg-blue-500 text-white font-medium py-2 rounded-lg transition-colors flex items-center justify-center gap-2 disabled:opacity-50"
                    >
                        {uploading ? 'Uploading...' : 'Upload Firmware'}
                    </button>
                </form>
            </div>

            {/* Deploy Section */}
            <div className="bg-zinc-900/50 backdrop-blur-md border border-zinc-800 rounded-xl p-6 shadow-xl">
                <h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
                    <Rocket className="w-5 h-5 text-purple-400" />
                    Deploy Update
                </h2>
                <div className="space-y-4">
                    <div>
                        <label className="block text-sm font-medium text-zinc-400 mb-1">Select Firmware</label>
                        <select
                            className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-white outline-none"
                            onChange={e => setSelectedUpdate(Number(e.target.value))}
                            value={selectedUpdate || ''}
                        >
                            <option value="">-- Select Version --</option>
                            {updates.map(u => (
                                <option key={u.id} value={u.id}>{u.version} - {u.description || 'No desc'}</option>
                            ))}
                        </select>
                    </div>

                    <div className="grid grid-cols-2 gap-2 mb-2">
                        <button
                            onClick={() => setTargetType('vehicle')}
                            className={`py-2 text-sm rounded-lg border transition-all ${targetType === 'vehicle' ? 'bg-zinc-800 border-zinc-700 text-white' : 'border-transparent text-zinc-500 hover:text-zinc-300'}`}
                        >
                            Single Vehicle
                        </button>
                        <button
                            onClick={() => setTargetType('group')}
                            className={`py-2 text-sm rounded-lg border transition-all ${targetType === 'group' ? 'bg-zinc-800 border-zinc-700 text-white' : 'border-transparent text-zinc-500 hover:text-zinc-300'}`}
                        >
                            Entire Group
                        </button>
                    </div>

                    <div>
                        <label className="block text-sm font-medium text-zinc-400 mb-1">Target {targetType === 'vehicle' ? 'Vehicle' : 'Group'}</label>
                        {targetType === 'vehicle' ? (
                            <select
                                className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-white outline-none"
                                onChange={e => setSelectedTarget(e.target.value)}
                                value={selectedTarget}
                            >
                                <option value="">-- Select Vehicle --</option>
                                {vehicles.map(v => (
                                    <option key={v.vin} value={v.vin}>{v.vin} (v{v.currentVersion})</option>
                                ))}
                            </select>
                        ) : (
                            <select
                                className="w-full bg-zinc-950 border border-zinc-800 rounded-lg px-3 py-2 text-white outline-none"
                                onChange={e => setSelectedTarget(e.target.value)}
                                value={selectedTarget}
                            >
                                <option value="">-- Select Group --</option>
                                {groups.map(g => (
                                    <option key={g.id} value={g.id}>{g.name} ({g.vehicles?.length || 0} vehicles)</option>
                                ))}
                            </select>
                        )}
                    </div>

                    <button
                        onClick={handleDeploy}
                        disabled={deploying || !selectedUpdate || !selectedTarget}
                        className="w-full bg-purple-600 hover:bg-purple-500 text-white font-medium py-2 rounded-lg transition-colors flex items-center justify-center gap-2 disabled:opacity-50"
                    >
                        {deploying ? 'Deploying...' : 'Deploy Update'}
                    </button>
                </div>

                {/* Recent Deployments Snippet could go here */}
            </div>
        </div>
    );
}