import { useState, useEffect } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import {
    ArrowLeft, Calendar, Droplets, Thermometer, Wind, Zap,
    Bug, Camera, Activity, TrendingUp, Clock, CheckCircle,
    AlertTriangle, Leaf, Sun, Moon
} from 'lucide-react';
import { batchesApi, Batch } from '../lib/batchesApi';

// Mock sensor data generator
function generateMockData(days: number, min: number, max: number, variance: number = 5) {
    return Array.from({ length: days }, (_, i) => ({
        day: i + 1,
        value: min + Math.random() * (max - min) + (Math.random() - 0.5) * variance,
        timestamp: new Date(Date.now() - (days - i) * 24 * 60 * 60 * 1000).toISOString()
    }));
}

// SVG Sparkline Component
function Sparkline({ data, color = '#3B82F6', height = 40 }: {
    data: { value: number }[];
    color?: string;
    height?: number;
}) {
    if (data.length === 0) return null;

    const values = data.map(d => d.value);
    const min = Math.min(...values);
    const max = Math.max(...values);
    const range = max - min || 1;

    const width = 120;
    const padding = 2;

    const points = data.map((d, i) => {
        const x = padding + (i / (data.length - 1)) * (width - padding * 2);
        const y = height - padding - ((d.value - min) / range) * (height - padding * 2);
        return `${x},${y}`;
    }).join(' ');

    return (
        <svg width={width} height={height} className="overflow-visible">
            <polyline
                points={points}
                fill="none"
                stroke={color}
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
            />
            {/* Current value dot */}
            {data.length > 0 && (
                <circle
                    cx={width - padding}
                    cy={height - padding - ((values[values.length - 1] - min) / range) * (height - padding * 2)}
                    r="3"
                    fill={color}
                />
            )}
        </svg>
    );
}

// Stage Progress Component
function StageProgress({ currentStage }: { currentStage: string }) {
    const stages = [
        { id: 'CLONE_IN', label: 'Clone', icon: '🌱', days: 7 },
        { id: 'VEGETATIVE', label: 'Veg', icon: '🌿', days: 28 },
        { id: 'FLOWERING', label: 'Flower', icon: '🌸', days: 63 },
        { id: 'HARVEST', label: 'Harvest', icon: '✂️', days: 1 },
        { id: 'DRYING', label: 'Dry', icon: '🍂', days: 14 },
        { id: 'CURING', label: 'Cure', icon: '🫙', days: 30 },
    ];

    const currentIndex = stages.findIndex(s => s.id === currentStage);

    return (
        <div className="flex items-center gap-1">
            {stages.map((stage, i) => {
                const isPast = i < currentIndex;
                const isCurrent = i === currentIndex;
                const isFuture = i > currentIndex;

                return (
                    <div key={stage.id} className="flex items-center">
                        <div className={`
                            flex flex-col items-center px-2 py-1.5 rounded-md transition-colors
                            ${isCurrent ? 'bg-accent text-white' : ''}
                            ${isPast ? 'text-success' : ''}
                            ${isFuture ? 'text-tertiary' : ''}
                        `}>
                            <span className="text-sm">{stage.icon}</span>
                            <span className="text-[9px] font-medium mt-0.5">{stage.label}</span>
                        </div>
                        {i < stages.length - 1 && (
                            <div className={`w-3 h-0.5 ${isPast ? 'bg-success' : 'bg-subtle'}`} />
                        )}
                    </div>
                );
            })}
        </div>
    );
}

// Metric Card with Sparkline
function MetricCard({ icon: Icon, label, value, unit, trend, data, color }: {
    icon: typeof Thermometer;
    label: string;
    value: string;
    unit: string;
    trend?: 'up' | 'down' | 'stable';
    data: { value: number }[];
    color: string;
}) {
    return (
        <div className="card p-4">
            <div className="flex items-start justify-between mb-3">
                <div className="flex items-center gap-2">
                    <div className="w-7 h-7 rounded-md bg-tertiary flex items-center justify-center">
                        <Icon size={14} style={{ color }} />
                    </div>
                    <span className="text-xs text-tertiary">{label}</span>
                </div>
                {trend && (
                    <span className={`text-xs ${trend === 'up' ? 'text-success' : trend === 'down' ? 'text-destructive' : 'text-tertiary'
                        }`}>
                        {trend === 'up' ? '↑' : trend === 'down' ? '↓' : '→'}
                    </span>
                )}
            </div>
            <div className="flex items-end justify-between">
                <div>
                    <span className="text-2xl font-semibold text-primary">{value}</span>
                    <span className="text-sm text-tertiary ml-1">{unit}</span>
                </div>
                <Sparkline data={data} color={color} />
            </div>
        </div>
    );
}

// Touch Point Item
function TouchPoint({ type, date, user, notes }: {
    type: string;
    date: string;
    user: string;
    notes?: string;
}) {
    const typeConfig: Record<string, { icon: typeof Camera; color: string }> = {
        WATER: { icon: Droplets, color: 'text-blue-500' },
        FEED: { icon: Leaf, color: 'text-green-500' },
        INSPECT: { icon: Bug, color: 'text-amber-500' },
        PHOTO: { icon: Camera, color: 'text-purple-500' },
        DEFOLIATE: { icon: Leaf, color: 'text-orange-500' },
        TRANSPLANT: { icon: Activity, color: 'text-teal-500' },
    };

    const config = typeConfig[type] || { icon: Activity, color: 'text-secondary' };
    const Icon = config.icon;

    return (
        <div className="flex items-start gap-3 py-2">
            <div className={`w-6 h-6 rounded-full bg-tertiary flex items-center justify-center flex-shrink-0 ${config.color}`}>
                <Icon size={12} />
            </div>
            <div className="flex-1 min-w-0">
                <div className="flex items-center justify-between">
                    <span className="text-sm font-medium text-primary">{type}</span>
                    <span className="text-xs text-tertiary">{new Date(date).toLocaleDateString()}</span>
                </div>
                {notes && <p className="text-xs text-secondary mt-0.5 truncate">{notes}</p>}
                <span className="text-[10px] text-tertiary">{user}</span>
            </div>
        </div>
    );
}

export default function BatchDetailPage() {
    const { id } = useParams<{ id: string }>();
    const navigate = useNavigate();
    const [batch, setBatch] = useState<Batch | null>(null);
    const [loading, setLoading] = useState(true);

    // Mock sensor data (will be replaced with real sensor API)
    const [sensorData] = useState(() => ({
        temperature: generateMockData(14, 72, 78),
        humidity: generateMockData(14, 50, 65),
        vpd: generateMockData(14, 0.8, 1.2),
        co2: generateMockData(14, 800, 1200),
        lightPPFD: generateMockData(14, 600, 900),
    }));

    useEffect(() => {
        if (id) {
            batchesApi.getById(id)
                .then(setBatch)
                .catch((err) => {
                    console.error('Failed to load batch:', err);
                    navigate('/batches');
                })
                .finally(() => setLoading(false));
        }
    }, [id, navigate]);

    if (loading) {
        return (
            <div className="flex items-center justify-center min-h-[50vh]">
                <div className="animate-spin w-6 h-6 border-2 border-accent border-t-transparent rounded-full" />
            </div>
        );
    }

    if (!batch) {
        return (
            <div className="text-center py-12">
                <p className="text-secondary">Batch not found</p>
                <Link to="/batches" className="text-accent text-sm mt-2 inline-block">← Back to batches</Link>
            </div>
        );
    }

    // Calculate days in stage
    const startDate = new Date(batch.startDate);
    const daysInCycle = Math.floor((Date.now() - startDate.getTime()) / (1000 * 60 * 60 * 24));

    return (
        <div className="max-w-6xl mx-auto space-y-6 pb-20 animate-in">
            {/* Header */}
            <div className="flex items-start gap-4">
                <button
                    onClick={() => navigate('/batches')}
                    className="p-2 -ml-2 hover:bg-tertiary rounded-md transition-colors"
                >
                    <ArrowLeft size={18} className="text-secondary" />
                </button>
                <div className="flex-1">
                    <div className="flex items-center gap-2 mb-1">
                        <h1 className="text-xl font-semibold text-primary">{batch.name}</h1>
                        <span className={`badge ${batch.stage === 'FLOWERING' ? 'badge-warning' :
                            batch.stage === 'VEGETATIVE' ? 'badge-success' :
                                'badge'
                            }`}>{batch.stage}</span>
                    </div>
                    <div className="flex items-center gap-4 text-sm text-secondary">
                        <span>{batch.strain}</span>
                        <span>•</span>
                        <span>{batch.plantCount} plants</span>
                        <span>•</span>
                        <span className="flex items-center gap-1">
                            <Calendar size={12} />
                            Day {daysInCycle}
                        </span>
                    </div>
                </div>
            </div>

            {/* Stage Journey */}
            <div className="card p-4 overflow-x-auto">
                <h3 className="text-xs text-tertiary uppercase tracking-wider mb-3">Lifecycle</h3>
                <StageProgress currentStage={batch.stage} />
            </div>

            {/* Sensor Grid */}
            <div>
                <h3 className="text-xs text-tertiary uppercase tracking-wider mb-3">Environment (14 days)</h3>
                <div className="grid grid-cols-2 lg:grid-cols-5 gap-3">
                    <MetricCard
                        icon={Thermometer}
                        label="Temperature"
                        value={sensorData.temperature[sensorData.temperature.length - 1].value.toFixed(1)}
                        unit="°F"
                        trend="stable"
                        data={sensorData.temperature}
                        color="#EF4444"
                    />
                    <MetricCard
                        icon={Droplets}
                        label="Humidity"
                        value={sensorData.humidity[sensorData.humidity.length - 1].value.toFixed(0)}
                        unit="%"
                        trend="up"
                        data={sensorData.humidity}
                        color="#3B82F6"
                    />
                    <MetricCard
                        icon={Wind}
                        label="VPD"
                        value={sensorData.vpd[sensorData.vpd.length - 1].value.toFixed(2)}
                        unit="kPa"
                        trend="stable"
                        data={sensorData.vpd}
                        color="#8B5CF6"
                    />
                    <MetricCard
                        icon={Zap}
                        label="CO₂"
                        value={sensorData.co2[sensorData.co2.length - 1].value.toFixed(0)}
                        unit="ppm"
                        trend="up"
                        data={sensorData.co2}
                        color="#10B981"
                    />
                    <MetricCard
                        icon={Sun}
                        label="Light PPFD"
                        value={sensorData.lightPPFD[sensorData.lightPPFD.length - 1].value.toFixed(0)}
                        unit="μmol"
                        trend="stable"
                        data={sensorData.lightPPFD}
                        color="#F59E0B"
                    />
                </div>
            </div>

            {/* Two Column Layout */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
                {/* Touch Points */}
                <div className="card">
                    <div className="p-4 border-b border-subtle flex items-center justify-between">
                        <h3 className="text-sm font-medium text-primary">Recent Activity</h3>
                        <span className="text-xs text-tertiary">{batch.touchPoints?.length || 0} entries</span>
                    </div>
                    <div className="p-4 divide-y divide-subtle">
                        {batch.touchPoints && batch.touchPoints.length > 0 ? (
                            batch.touchPoints.map((tp) => (
                                <TouchPoint
                                    key={tp.id}
                                    type={tp.type}
                                    date={tp.createdAt}
                                    user={tp.user?.name || 'Unknown'}
                                    notes={tp.notes}
                                />
                            ))
                        ) : (
                            <p className="text-sm text-tertiary text-center py-4">No activity yet</p>
                        )}
                    </div>
                </div>

                {/* Stats & IPM */}
                <div className="space-y-4">
                    {/* Quick Stats */}
                    <div className="card p-4">
                        <h3 className="text-xs text-tertiary uppercase tracking-wider mb-4">Statistics</h3>
                        <div className="grid grid-cols-3 gap-4 text-center">
                            <div>
                                <div className="text-2xl font-semibold text-primary">{daysInCycle}</div>
                                <div className="text-xs text-tertiary">Days</div>
                            </div>
                            <div>
                                <div className="text-2xl font-semibold text-primary">{batch.touchPoints?.length || 0}</div>
                                <div className="text-xs text-tertiary">Touch Points</div>
                            </div>
                            <div>
                                <div className="text-2xl font-semibold text-success">0</div>
                                <div className="text-xs text-tertiary">Issues</div>
                            </div>
                        </div>
                    </div>

                    {/* IPM Schedule */}
                    {batch.ipmSchedule ? (
                        <div className="card p-4">
                            <h3 className="text-xs text-tertiary uppercase tracking-wider mb-3">IPM Schedule</h3>
                            <div className="flex items-center gap-3">
                                <div className="w-10 h-10 rounded-md bg-warning-muted flex items-center justify-center">
                                    <Bug size={18} className="text-warning" />
                                </div>
                                <div>
                                    <p className="text-sm font-medium text-primary">{batch.ipmSchedule.product || 'Preventative'}</p>
                                    <p className="text-xs text-secondary">
                                        Next: {new Date(batch.ipmSchedule.nextTreatment).toLocaleDateString()}
                                    </p>
                                </div>
                            </div>
                        </div>
                    ) : (
                        <div className="card p-4">
                            <h3 className="text-xs text-tertiary uppercase tracking-wider mb-3">IPM Schedule</h3>
                            <p className="text-sm text-secondary">No IPM schedule configured</p>
                        </div>
                    )}

                    {/* Health Score */}
                    <div className="card p-4">
                        <h3 className="text-xs text-tertiary uppercase tracking-wider mb-3">Health Score</h3>
                        <div className="flex items-center gap-4">
                            <div className="relative w-16 h-16">
                                <svg className="w-16 h-16 -rotate-90">
                                    <circle
                                        cx="32"
                                        cy="32"
                                        r="28"
                                        fill="none"
                                        stroke="var(--color-bg-tertiary)"
                                        strokeWidth="6"
                                    />
                                    <circle
                                        cx="32"
                                        cy="32"
                                        r="28"
                                        fill="none"
                                        stroke="var(--color-success)"
                                        strokeWidth="6"
                                        strokeDasharray={`${0.92 * 176} 176`}
                                        strokeLinecap="round"
                                    />
                                </svg>
                                <div className="absolute inset-0 flex items-center justify-center">
                                    <span className="text-lg font-semibold text-primary">92</span>
                                </div>
                            </div>
                            <div>
                                <p className="text-sm font-medium text-success">Excellent</p>
                                <p className="text-xs text-tertiary">Based on 14 day average</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}