295 lines
15 KiB
TypeScript
295 lines
15 KiB
TypeScript
'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>
|
|
);
|
|
}
|