import { X, MapPin, Leaf, Activity, Calendar, Box, Clock } from 'lucide-react';
import { useMemo } from 'react';
import type { PlantPosition } from './types';
import { LifecycleTimeline } from './LifecycleTimeline';
import { VitalsGrid } from './VitalGauge';

interface PlantDataCardProps {
    plant: PlantPosition | null;
    onClose: () => void;
}

/**
 * Mock vitals for demo - now with consistent values and history per plant.
 * Seeding by plantId ensures that clicking the same plant twice shows the same data,
 * and different plants show unique, deterministic data.
 */
const getMockVitals = (plantId?: string) => {
    // Generate a deterministic seed from the plant ID
    const seed = plantId ? plantId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) : 42;

    // Generate deterministic history based on seed
    const generateHistory = (base: number, variance: number, points: number = 12) => {
        const history: number[] = [];
        for (let i = 0; i < points; i++) {
            // Using Math.sin with the seed to create a deterministic "wavy" history
            const noise = Math.sin(seed + i * 0.8) * variance;
            history.push(base + noise);
        }
        return history;
    };

    const healthBase = 88 + (seed % 10);
    const tempBase = 74 + (seed % 4);
    const humBase = 58 + (seed % 8);
    const vpdBase = 1.05 + (seed % 5) / 20;

    return {
        health: healthBase,
        healthHistory: generateHistory(healthBase, 2),
        temperature: tempBase,
        tempHistory: generateHistory(tempBase, 1.5),
        humidity: humBase,
        humHistory: generateHistory(humBase, 4),
        vpd: vpdBase,
        vpdHistory: generateHistory(vpdBase, 0.15),
        batch: `B-${(seed % 9999).toString(16).toUpperCase().padStart(4, '0')}`,
        batchName: `Batch ${(seed % 150) + 101}`,
        lastUpdated: new Date(Date.now() - (seed % 45) * 60 * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
    };
};

export function PlantDataCard({ plant, onClose }: PlantDataCardProps) {
    // Early escape and null safety
    if (!plant || !plant.plant) {
        return null;
    }

    const { plant: plantInfo } = plant;

    // Memoize vitals based on plant ID to prevent re-rolls on every render
    const vitals = useMemo(() => getMockVitals(plantInfo.id), [plantInfo.id]);

    // Format position breadcrumb
    const position = plant.breadcrumb
        ? `${plant.breadcrumb.room} • ${plant.breadcrumb.section} • R${plant.row} C${plant.column} T${plant.tier}`
        : `R${plant.row} • C${plant.column} • T${plant.tier}`;

    return (
        <div className="bg-slate-900/95 backdrop-blur-md border border-slate-700/50 shadow-2xl overflow-hidden animate-in fade-in slide-in-from-bottom-4 duration-300 w-full rounded-t-xl rounded-b-none md:w-80 md:rounded-lg">
            {/* Header */}
            <div className="bg-gradient-to-r from-slate-800 to-slate-900 px-4 py-3 flex items-center justify-between border-b border-slate-700/50">
                <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2">
                        <span className="text-sm font-mono text-cyan-400 truncate">
                            {plantInfo.tagNumber}
                        </span>
                        <span className={`px-2 py-0.5 text-[10px] font-bold uppercase rounded ${plantInfo.stage === 'FLOWERING' ? 'bg-purple-600/30 text-purple-300' :
                            plantInfo.stage === 'VEGETATIVE' ? 'bg-green-600/30 text-green-300' :
                                'bg-blue-600/30 text-blue-300'
                            }`}>
                            {plantInfo.stage?.replace('_', ' ') || 'VEG'}
                        </span>
                    </div>
                    <div className="text-xs text-[var(--color-text-tertiary)] mt-0.5 flex items-center gap-1">
                        <Leaf className="w-3 h-3" />
                        {plantInfo.strain || 'Unknown Strain'}
                    </div>
                </div>
                <button
                    onClick={onClose}
                    className="p-1 hover:bg-slate-700 rounded transition-colors"
                >
                    <X className="w-4 h-4 text-[var(--color-text-tertiary)]" />
                </button>
            </div>

            {/* Position & Batch Metadata */}
            <div className="px-4 py-2 bg-slate-800/40 border-b border-slate-700/30 space-y-1">
                <div className="flex items-center gap-1.5 text-[10px] text-slate-300">
                    <MapPin className="w-3 h-3 text-[var(--color-text-tertiary)]" />
                    {position}
                </div>
                <div className="flex items-center justify-between">
                    <div className="flex items-center gap-1.5 text-[10px] text-[var(--color-text-tertiary)]">
                        <Box className="w-3 h-3 text-[var(--color-text-tertiary)]" />
                        <span className="font-mono text-slate-300">{vitals.batch}</span>
                        <span>•</span>
                        <span className="truncate max-w-[120px]">{vitals.batchName}</span>
                    </div>
                    <div className="flex items-center gap-1 text-[9px] text-[var(--color-text-tertiary)]">
                        <Clock className="w-2.5 h-2.5" />
                        {vitals.lastUpdated}
                    </div>
                </div>
            </div>

            {/* Lifecycle Timeline */}
            <div className="px-4 py-3 border-b border-slate-700/30">
                <div className="text-xs text-[var(--color-text-tertiary)] mb-2 flex items-center gap-1 uppercase tracking-wider font-semibold">
                    <Calendar className="w-3 h-3" />
                    Lifecycle Timeline
                </div>
                <LifecycleTimeline currentStage={plantInfo.stage ?? undefined} />
            </div>

            {/* Vitals Grid with Sparklines */}
            <div className="px-4 py-3 border-b border-slate-700/30">
                <div className="text-xs text-[var(--color-text-tertiary)] mb-2 flex items-center gap-1 uppercase tracking-wider font-semibold">
                    <Activity className="w-3 h-3" />
                    Environmental Vitals
                </div>
                <VitalsGrid
                    health={vitals.health}
                    temperature={vitals.temperature}
                    humidity={vitals.humidity}
                    vpd={vitals.vpd}
                />
            </div>

            {/* Contextual Actions */}
            <div className="px-4 py-3 flex gap-2">
                <button className="flex-1 px-2 py-2 text-xs bg-slate-800 hover:bg-slate-700 border border-slate-600/50 rounded transition-all hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center gap-1.5">
                    📸 Photo
                </button>
                <button className="flex-1 px-2 py-2 text-xs bg-slate-800 hover:bg-slate-700 border border-slate-600/50 rounded transition-all hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center gap-1.5">
                    📝 Note
                </button>
                <button className="flex-1 px-2 py-2 text-xs bg-cyan-600/10 hover:bg-cyan-600/20 border border-cyan-500/30 rounded text-cyan-400 transition-all hover:scale-[1.02] active:scale-[0.98] flex items-center justify-center gap-1.5 font-bold">
                    🔍 Metrc
                </button>
            </div>
        </div>
    );
}
