import React from 'react';
import { Card } from '../ui/card';
import { Thermometer, Droplets, Wind, Zap, CheckCircle2, AlertCircle, Clock } from 'lucide-react';
import { cn } from '../../lib/utils';
import { motion } from 'framer-motion';

interface RoomStatusProps {
    name: string;
    phase: 'VEG' | 'FLOWER' | 'DRY' | 'CURE';
    status: 'OK' | 'WARNING' | 'CRITICAL';
    metrics: {
        temp: number;
        humidity: number;
        vpd: number;
        co2: number;
    };
    tasks: {
        due: number;
        completed: number;
    };
    strains: string[];
}

export function RoomStatusCard({ name, phase, status, metrics, tasks, strains }: RoomStatusProps) {
    const statusColors = {
        OK: 'text-[var(--color-primary)] border-emerald-500/20 bg-[var(--color-primary)]/5',
        WARNING: 'text-[var(--color-warning)] border-amber-500/20 bg-[var(--color-warning)]/5',
        CRITICAL: 'text-[var(--color-error)] border-rose-500/20 bg-[var(--color-error)]/5',
    };

    const statusIcons = {
        OK: <CheckCircle2 size={14} />,
        WARNING: <AlertCircle size={14} />,
        CRITICAL: <AlertCircle size={14} />,
    };

    return (
        <Card className="group relative overflow-hidden bg-[var(--color-bg-elevated)] border-[var(--color-border-subtle)] hover:border-emerald-500/50 transition-all duration-300">
            <div className="p-5 space-y-4">
                {/* Header */}
                <div className="flex items-start justify-between">
                    <div>
                        <div className="flex items-center gap-2">
                            <h3 className="text-lg font-bold tracking-tight text-[var(--color-text-primary)]">{name}</h3>
                            <span className={cn(
                                "px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-widest",
                                phase === 'FLOWER' ? "bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400" :
                                    phase === 'VEG' ? "bg-emerald-100 text-[var(--color-primary)] dark:bg-emerald-900/30 dark:text-emerald-400" :
                                        "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-[var(--color-text-tertiary)]"
                            )}>
                                {phase}
                            </span>
                        </div>
                        <p className="text-xs text-[var(--color-text-tertiary)] mt-1 truncate max-w-[150px]">
                            {strains.join(', ')}
                        </p>
                    </div>

                    <div className={cn(
                        "flex items-center gap-1 px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider border",
                        statusColors[status]
                    )}>
                        {statusIcons[status]}
                        <span>{status}</span>
                    </div>
                </div>

                {/* Metrics Grid */}
                <div className="grid grid-cols-2 gap-3">
                    <MetricItem
                        icon={<Thermometer size={14} className="text-rose-400" />}
                        label="Temp"
                        value={`${metrics.temp}°F`}
                        status={metrics.temp > 85 ? 'warning' : 'ok'}
                    />
                    <MetricItem
                        icon={<Droplets size={14} className="text-blue-400" />}
                        label="RH"
                        value={`${metrics.humidity}%`}
                        status={metrics.humidity > 70 ? 'warning' : 'ok'}
                    />
                    <MetricItem
                        icon={<Wind size={14} className="text-emerald-400" />}
                        label="VPD"
                        value={`${metrics.vpd} kPa`}
                        status="ok"
                    />
                    <MetricItem
                        icon={<Zap size={14} className="text-amber-400" />}
                        label="CO2"
                        value={`${metrics.co2} ppm`}
                        status="ok"
                    />
                </div>

                {/* Footer / Tasks */}
                <div className="pt-4 border-t border-[var(--color-border-subtle)]/50 flex items-center justify-between">
                    <div className="flex items-center gap-4">
                        <div className="flex items-center gap-1.5 text-xs text-[var(--color-text-tertiary)]">
                            <Clock size={12} />
                            <span className="font-bold text-[var(--color-text-secondary)]">{tasks.due}</span>
                            <span>Pending</span>
                        </div>
                        <div className="flex items-center gap-1.5 text-xs text-[var(--color-text-tertiary)]">
                            <CheckCircle2 size={12} className="text-[var(--color-primary)]" />
                            <span className="font-bold text-[var(--color-text-secondary)]">{tasks.completed}</span>
                            <span>Done</span>
                        </div>
                    </div>

                    <div className="w-16 h-1 bg-slate-100 dark:bg-slate-800 rounded-full overflow-hidden">
                        <motion.div
                            initial={{ width: 0 }}
                            animate={{ width: `${(tasks.completed / (tasks.due + tasks.completed)) * 100}%` }}
                            className="h-full bg-[var(--color-primary)]"
                        />
                    </div>
                </div>
            </div>

            {/* Subtle glow effect on hover */}
            <div className="absolute inset-0 bg-gradient-to-br from-emerald-500/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
        </Card>
    );
}

function MetricItem({ icon, label, value, status }: { icon: React.ReactNode, label: string, value: string, status: 'ok' | 'warning' | 'critical' }) {
    return (
        <div className="bg-[var(--color-bg-tertiary)]/50 p-2.5 rounded-xl border border-[var(--color-border-subtle)]/50">
            <div className="flex items-center gap-1.5 mb-1">
                {icon}
                <span className="text-[10px] font-bold text-[var(--color-text-tertiary)] uppercase tracking-widest">{label}</span>
            </div>
            <div className={cn(
                "text-sm font-bold tracking-tight",
                status === 'warning' ? "text-[var(--color-warning)]" :
                    status === 'critical' ? "text-[var(--color-error)]" :
                        "text-[var(--color-text-primary)]"
            )}>
                {value}
            </div>
        </div>
    );
}
