import { useMemo } from 'react';

// Growth stages in order
export const LIFECYCLE_STAGES = [
    { key: 'CLONE_IN', label: 'Clone', color: '#3b82f6', icon: '🌱' },
    { key: 'VEGETATIVE', label: 'Veg', color: '#22c55e', icon: '🌿' },
    { key: 'FLOWERING', label: 'Flower', color: '#a855f7', icon: '🌸' },
    { key: 'DRYING', label: 'Dry', color: '#f97316', icon: '🍂' },
    { key: 'CURING', label: 'Cure', color: '#92400e', icon: '🫙' },
    { key: 'FINISHED', label: 'Done', color: '#6b7280', icon: '✓' },
] as const;

interface LifecycleTimelineProps {
    currentStage?: string;
    startDate?: Date;
    stageHistory?: Array<{
        stage: string;
        enteredAt: Date;
        exitedAt?: Date;
    }>;
    compact?: boolean;
}

export function LifecycleTimeline({
    currentStage = 'VEGETATIVE',
    startDate,
    stageHistory,
    compact = false
}: LifecycleTimelineProps) {

    // Find current stage index
    const currentIndex = useMemo(() => {
        const normalized = currentStage?.toUpperCase().replace(/ /g, '_');
        const idx = LIFECYCLE_STAGES.findIndex(s => s.key === normalized);
        return idx >= 0 ? idx : 1; // Default to VEG if not found
    }, [currentStage]);

    // Calculate days in current stage
    const daysInStage = useMemo(() => {
        if (!startDate) return Math.floor(Math.random() * 21) + 7; // Mock 7-28 days
        return Math.floor((Date.now() - startDate.getTime()) / (1000 * 60 * 60 * 24));
    }, [startDate]);

    // Estimate total grow days and remaining
    const totalDays = useMemo(() => {
        // Typical grow times per stage
        const typicalDays: Record<string, number> = {
            CLONE_IN: 14,
            VEGETATIVE: 28,
            FLOWERING: 56,
            DRYING: 10,
            CURING: 21,
            FINISHED: 0,
        };

        let total = 0;
        for (let i = 0; i <= currentIndex; i++) {
            total += typicalDays[LIFECYCLE_STAGES[i].key] || 14;
        }
        return total - typicalDays[LIFECYCLE_STAGES[currentIndex].key] + daysInStage;
    }, [currentIndex, daysInStage]);

    const estimatedHarvest = useMemo(() => {
        // Estimate remaining days
        const typicalDays: Record<string, number> = {
            CLONE_IN: 14,
            VEGETATIVE: 28,
            FLOWERING: 56,
            DRYING: 10,
            CURING: 21,
            FINISHED: 0,
        };

        let remaining = 0;
        for (let i = currentIndex; i < LIFECYCLE_STAGES.length - 1; i++) {
            const stageDays = typicalDays[LIFECYCLE_STAGES[i].key] || 14;
            if (i === currentIndex) {
                remaining += Math.max(0, stageDays - daysInStage);
            } else {
                remaining += stageDays;
            }
        }

        const date = new Date(Date.now() + remaining * 24 * 60 * 60 * 1000);
        return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
    }, [currentIndex, daysInStage]);

    // SVG dimensions
    const width = compact ? 200 : 260;
    const height = compact ? 40 : 50;
    const nodeRadius = compact ? 6 : 8;
    const padding = 20;
    const nodeSpacing = (width - padding * 2) / (LIFECYCLE_STAGES.length - 1);

    return (
        <div className="w-full">
            {/* SVG Timeline */}
            <svg
                viewBox={`0 0 ${width} ${height}`}
                className="w-full"
                style={{ maxHeight: height }}
            >
                {/* Connecting lines */}
                {LIFECYCLE_STAGES.map((stage, i) => {
                    if (i === LIFECYCLE_STAGES.length - 1) return null;

                    const x1 = padding + i * nodeSpacing;
                    const x2 = padding + (i + 1) * nodeSpacing;
                    const y = height / 2;

                    const isCompleted = i < currentIndex;
                    const isCurrent = i === currentIndex;

                    return (
                        <line
                            key={`line-${i}`}
                            x1={x1 + nodeRadius}
                            y1={y}
                            x2={x2 - nodeRadius}
                            y2={y}
                            stroke={isCompleted ? '#22c55e' : '#334155'}
                            strokeWidth={2}
                            strokeDasharray={isCompleted ? 'none' : '3,3'}
                            className={isCurrent ? 'animate-pulse' : ''}
                        />
                    );
                })}

                {/* Stage nodes */}
                {LIFECYCLE_STAGES.map((stage, i) => {
                    const x = padding + i * nodeSpacing;
                    const y = height / 2;

                    const isCompleted = i < currentIndex;
                    const isCurrent = i === currentIndex;
                    const isFuture = i > currentIndex;

                    return (
                        <g key={stage.key}>
                            {/* Outer ring for current stage */}
                            {isCurrent && (
                                <circle
                                    cx={x}
                                    cy={y}
                                    r={nodeRadius + 4}
                                    fill="none"
                                    stroke="#22d3ee"
                                    strokeWidth={2}
                                    className="animate-ping"
                                    style={{
                                        animationDuration: '1.5s',
                                        transformOrigin: `${x}px ${y}px`
                                    }}
                                />
                            )}

                            {/* Main node */}
                            <circle
                                cx={x}
                                cy={y}
                                r={nodeRadius}
                                fill={isCompleted || isCurrent ? stage.color : 'transparent'}
                                stroke={isFuture ? '#475569' : stage.color}
                                strokeWidth={2}
                                className={`transition-all duration-300 ${isCurrent ? 'drop-shadow-lg' : ''}`}
                                style={isCurrent ? { filter: 'drop-shadow(0 0 6px rgba(34, 211, 238, 0.5))' } : {}}
                            />

                            {/* Check mark for completed */}
                            {isCompleted && (
                                <text
                                    x={x}
                                    y={y + 1}
                                    textAnchor="middle"
                                    dominantBaseline="middle"
                                    fill="white"
                                    fontSize={compact ? 8 : 10}
                                    fontWeight="bold"
                                >
                                    ✓
                                </text>
                            )}

                            {/* Stage label (below) */}
                            {!compact && (
                                <text
                                    x={x}
                                    y={y + nodeRadius + 12}
                                    textAnchor="middle"
                                    fill={isCurrent ? '#22d3ee' : isFuture ? '#64748b' : '#94a3b8'}
                                    fontSize={8}
                                    fontWeight={isCurrent ? 'bold' : 'normal'}
                                >
                                    {stage.label}
                                </text>
                            )}
                        </g>
                    );
                })}
            </svg>

            {/* Day info */}
            <div className={`flex justify-between items-center ${compact ? 'text-[9px]' : 'text-[10px]'} text-[var(--color-text-tertiary)] mt-1`}>
                <span>
                    Day <span className="text-cyan-400 font-bold">{totalDays}</span>
                    {' • '}
                    <span className="text-[var(--color-text-tertiary)]">{daysInStage}d in {LIFECYCLE_STAGES[currentIndex]?.label}</span>
                </span>
                <span className="text-[var(--color-text-tertiary)]">
                    Est. harvest: <span className="text-green-400">{estimatedHarvest}</span>
                </span>
            </div>
        </div>
    );
}

// Mini version for list views
export function LifecycleTimelineMini({ currentStage }: { currentStage?: string }) {
    const currentIndex = useMemo(() => {
        const normalized = currentStage?.toUpperCase().replace(/ /g, '_');
        const idx = LIFECYCLE_STAGES.findIndex(s => s.key === normalized);
        return idx >= 0 ? idx : 1;
    }, [currentStage]);

    return (
        <div className="flex items-center gap-0.5">
            {LIFECYCLE_STAGES.map((stage, i) => (
                <div
                    key={stage.key}
                    className={`w-2 h-2 rounded-full transition-all ${i < currentIndex ? 'bg-green-500' :
                            i === currentIndex ? 'bg-cyan-400 ring-2 ring-cyan-400/30' :
                                'bg-slate-700'
                        }`}
                    title={stage.label}
                />
            ))}
        </div>
    );
}
