'use client';

import React, { useState, useMemo } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { QuitPlan, UsageEntry, UserPreferences } from '@/lib/storage';
import { Target, TrendingDown, ChevronDown, ChevronUp, Cigarette, Leaf } from 'lucide-react';
import { useTheme } from '@/lib/theme-context';
import { getTodayString } from '@/lib/date-utils';
import { cn } from '@/lib/utils';

interface SubstancePlanSectionProps {
    substance: 'nicotine' | 'weed';
    plan: QuitPlan | null;
    usageData: UsageEntry[];
    trackingStartDate: string | null;
    onGeneratePlan: () => void;
    isExpanded: boolean;
    onToggle: () => void;
}

function SubstancePlanSection({
    substance,
    plan,
    usageData,
    trackingStartDate,
    onGeneratePlan,
    isExpanded,
    onToggle
}: SubstancePlanSectionProps) {
    const { theme } = useTheme();

    // 1. Data Processing
    const substanceUsage = useMemo(() => usageData.filter(e => e.substance === substance), [usageData, substance]);
    const uniqueDaysWithData = useMemo(() => new Set(substanceUsage.map(e => e.date)).size, [substanceUsage]);
    const daysRemaining = Math.max(0, 7 - uniqueDaysWithData);

    const totalUsage = substanceUsage.reduce((sum, e) => sum + e.count, 0);
    const currentAverage = uniqueDaysWithData > 0 ? Math.round(totalUsage / uniqueDaysWithData) : 0;

    // 2. Unlock Logic
    const isUnlocked = useMemo(() => {
        if (!trackingStartDate || uniqueDaysWithData < 7) return false;
        const [y, m, d] = trackingStartDate.split('-').map(Number);
        const startObj = new Date(y, m - 1, d);
        const now = new Date();
        const todayObj = new Date(now.getFullYear(), now.getMonth(), now.getDate());
        const daysPassed = Math.floor((todayObj.getTime() - startObj.getTime()) / (1000 * 60 * 60 * 24));
        return daysPassed >= 7 || uniqueDaysWithData > 7;
    }, [uniqueDaysWithData, trackingStartDate]);

    // 3. Plan Validation & Calculations
    const isValidPlan = plan && plan.startDate && plan.weeklyTargets && Array.isArray(plan.weeklyTargets);
    const activePlan = isValidPlan ? plan : null;

    const todayStr = getTodayString();
    const todayUsage = substanceUsage
        .filter(e => e.date === todayStr)
        .reduce((sum, e) => sum + e.count, 0);

    let weekNumber = 0;
    let currentTarget = 0;
    let totalWeeks = 0;
    let usagePercent = 0;

    if (activePlan) {
        const startDate = new Date(activePlan.startDate);
        const today = new Date();
        weekNumber = Math.floor((today.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24 * 7)) + 1;
        totalWeeks = activePlan.weeklyTargets.length;
        currentTarget = weekNumber <= totalWeeks ? activePlan.weeklyTargets[weekNumber - 1] : 0;
        usagePercent = currentTarget > 0 ? (todayUsage / currentTarget) * 100 : 0;
    }

    // 4. Styling
    const isNicotine = substance === 'nicotine';
    const Icon = isNicotine ? Cigarette : Leaf;
    const label = isNicotine ? 'Nicotine' : 'Weed';

    // Base Colors
    const bgColor = isNicotine
        ? (theme === 'light' ? 'bg-yellow-500/10' : 'bg-yellow-500/5')
        : (theme === 'light' ? 'bg-emerald-500/10' : 'bg-emerald-500/5');

    const borderColor = isNicotine
        ? (theme === 'light' ? 'border-yellow-500/20' : 'border-yellow-500/10')
        : (theme === 'light' ? 'border-emerald-500/20' : 'border-emerald-500/10');

    const accentColor = isNicotine ? 'text-yellow-500' : 'text-emerald-500';
    const progressFill = isNicotine ? 'bg-yellow-500' : 'bg-emerald-500';

    // Specific plan color for the progress bar alert states
    let progressColor = progressFill;
    if (activePlan) {
        if (usagePercent >= 100) progressColor = 'bg-red-500';
        else if (usagePercent >= 80) progressColor = isNicotine ? 'bg-orange-400' : 'bg-yellow-400';
    }

    return (
        <div className={cn("rounded-xl border transition-all duration-300 overflow-hidden mb-3", bgColor, borderColor)}>
            {/* HEADER / SUMMARY ROW */}
            <div
                onClick={onToggle}
                className="flex items-center justify-between p-4 cursor-pointer hover:bg-black/5 active:bg-black/10 transition-colors"
            >
                <div className="flex items-center gap-3">
                    <div className={cn("p-2 rounded-lg", isNicotine ? "bg-yellow-500/20" : "bg-emerald-500/20")}>
                        <Icon className={cn("h-5 w-5", accentColor)} />
                    </div>
                    <div>
                        <h3 className="font-bold text-sm sm:text-base">{label} Plan</h3>
                        <p className="text-[10px] opacity-50 uppercase tracking-wider font-bold">
                            {activePlan ? `Week ${Math.min(weekNumber, totalWeeks)} of ${totalWeeks}` : `Tracking: Day ${uniqueDaysWithData}/7`}
                        </p>
                    </div>
                </div>

                <div className="flex items-center gap-4">
                    <div className="hidden sm:flex flex-col items-end">
                        <span className="text-xs font-bold opacity-60 uppercase">Today</span>
                        <span className={cn("text-sm font-black", activePlan && usagePercent >= 100 ? "text-red-500" : accentColor)}>
                            {todayUsage}{activePlan ? ` / ${currentTarget}` : ''}
                        </span>
                    </div>
                    {isExpanded ? <ChevronUp className="h-5 w-5 opacity-30" /> : <ChevronDown className="h-5 w-5 opacity-30" />}
                </div>
            </div>

            {/* EXPANDED CONTENT */}
            {isExpanded && (
                <div className="px-4 pb-4 animate-in slide-in-from-top-2 duration-200">
                    <div className="h-px w-full bg-border mb-4 opacity-30" />

                    {!activePlan ? (
                        <div className="space-y-4">
                            <div className="bg-black/5 p-4 rounded-lg">
                                <div className="flex justify-between items-center mb-2">
                                    <span className="text-xs font-medium">Weekly Baseline Progress</span>
                                    <span className={cn("text-xs font-bold", accentColor)}>
                                        {daysRemaining > 0 ? `${daysRemaining} days left` : 'Ready!'}
                                    </span>
                                </div>
                                <div className="w-full bg-black/10 rounded-full h-2 overflow-hidden">
                                    <div
                                        className={cn("h-full transition-all duration-700", progressFill)}
                                        style={{ width: `${Math.min(100, (uniqueDaysWithData / 7) * 100)}%` }}
                                    />
                                </div>
                            </div>

                            {isUnlocked ? (
                                <div className="text-center space-y-3">
                                    <p className="text-sm">
                                        Baseline established: <strong className={accentColor}>{currentAverage} puffs/day</strong>
                                    </p>
                                    <Button onClick={(e) => { e.stopPropagation(); onGeneratePlan(); }} size="sm" className={cn("w-full h-10 font-bold", progressFill, "text-white hover:opacity-90")}>
                                        Generate Plan
                                    </Button>
                                </div>
                            ) : (
                                <p className="text-xs text-center opacity-70 italic">
                                    Keep logging for {daysRemaining} more days to calculate your personalized reduction plan.
                                </p>
                            )}
                        </div>
                    ) : (
                        <div className="space-y-6">
                            {/* Active Plan Detail */}
                            <div className="text-center">
                                <p className="text-[10px] font-bold uppercase opacity-50 mb-1">Current Daily Limit</p>
                                <p className={cn("text-4xl font-black", accentColor)}>{currentTarget}</p>
                                <p className="text-xs opacity-50 mt-1">puffs allowed today</p>
                            </div>

                            {/* Progress Bar Detail */}
                            <div className="space-y-1.5">
                                <div className="flex justify-between text-[10px] uppercase font-bold opacity-60">
                                    <span>Usage Progress</span>
                                    <span>{Math.round(usagePercent)}%</span>
                                </div>
                                <div className="w-full bg-black/10 rounded-full h-3 overflow-hidden">
                                    <div
                                        className={cn("h-full transition-all duration-500", progressColor)}
                                        style={{ width: `${Math.min(100, usagePercent)}%` }}
                                    />
                                </div>
                            </div>

                            {/* Weekly Matrix */}
                            <div className="grid grid-cols-4 gap-2">
                                {activePlan.weeklyTargets.map((target, idx) => {
                                    const wNum = idx + 1;
                                    const isFuture = wNum > weekNumber;
                                    const isCurrent = wNum === weekNumber;
                                    return (
                                        <div
                                            key={idx}
                                            className={cn(
                                                "text-center p-2 rounded-lg border transition-all",
                                                isCurrent
                                                    ? `${progressFill} border-transparent text-white shadow-lg scale-105`
                                                    : isFuture
                                                        ? "bg-black/5 opacity-40 border-transparent"
                                                        : "opacity-60 border-current"
                                            )}
                                        >
                                            <p className="text-[9px] uppercase font-black">Wk {wNum}</p>
                                            <p className="text-sm font-bold">{isFuture ? '?' : target}</p>
                                        </div>
                                    );
                                })}
                            </div>

                            <div className="bg-black/5 p-3 rounded-lg flex justify-between items-center text-[10px] uppercase font-bold opacity-50">
                                <span>Start: {activePlan.baselineAverage}/day</span>
                                <span>End: {new Date(activePlan.endDate).toLocaleDateString()}</span>
                            </div>
                        </div>
                    )}
                </div>
            )}
        </div>
    );
}

interface UnifiedQuitPlanCardProps {
    preferences: UserPreferences | null;
    usageData: UsageEntry[];
    onGeneratePlan: (substance: 'nicotine' | 'weed') => void;
    refreshKey: number;
}

export function UnifiedQuitPlanCard({
    preferences,
    usageData,
    onGeneratePlan,
    refreshKey
}: UnifiedQuitPlanCardProps) {
    const [expandedSubstance, setExpandedSubstance] = useState<'nicotine' | 'weed' | 'none'>('nicotine');

    if (!preferences) return null;

    // Determine which substances to show
    const showNicotine = preferences.substance === 'nicotine' || usageData.some(e => e.substance === 'nicotine');
    const showWeed = preferences.substance === 'weed' || usageData.some(e => e.substance === 'weed');

    if (!showNicotine && !showWeed) return null;

    return (
        <Card className="backdrop-blur-xl shadow-xl border-white/10 overflow-hidden">
            <CardHeader className="pb-3 border-b border-white/5 bg-white/5">
                <CardTitle className="flex items-center gap-2 text-sm sm:text-base font-black uppercase tracking-widest opacity-80">
                    <TrendingDown className="h-5 w-5 text-primary" />
                    Quit Journey Plan
                </CardTitle>
            </CardHeader>
            <CardContent className="pt-4 p-3 sm:p-6">
                {showNicotine && (
                    <SubstancePlanSection
                        substance="nicotine"
                        isExpanded={expandedSubstance === 'nicotine'}
                        onToggle={() => setExpandedSubstance(expandedSubstance === 'nicotine' ? 'none' : 'nicotine')}
                        plan={preferences.quitState?.nicotine?.plan || (preferences.substance === 'nicotine' ? preferences.quitPlan : null)}
                        usageData={usageData}
                        trackingStartDate={
                            preferences.quitState?.nicotine?.startDate ||
                            (preferences.substance === 'nicotine' ? preferences.trackingStartDate : null) ||
                            usageData.filter(e => e.substance === 'nicotine').sort((a, b) => a.date.localeCompare(b.date))[0]?.date ||
                            null
                        }
                        onGeneratePlan={() => onGeneratePlan('nicotine')}
                    />
                )}

                {showWeed && (
                    <SubstancePlanSection
                        substance="weed"
                        isExpanded={expandedSubstance === 'weed'}
                        onToggle={() => setExpandedSubstance(expandedSubstance === 'weed' ? 'none' : 'weed')}
                        plan={preferences.quitState?.weed?.plan || (preferences.substance === 'weed' ? preferences.quitPlan : null)}
                        usageData={usageData}
                        trackingStartDate={
                            preferences.quitState?.weed?.startDate ||
                            (preferences.substance === 'weed' ? preferences.trackingStartDate : null) ||
                            usageData.filter(e => e.substance === 'weed').sort((a, b) => a.date.localeCompare(b.date))[0]?.date ||
                            null
                        }
                        onGeneratePlan={() => onGeneratePlan('weed')}
                    />
                )}
            </CardContent>
        </Card>
    );
}