Stop_smoking_website_ver2/src/components/SubstanceTrackingPage.tsx

'use client';

import { useState, useEffect, useCallback } from 'react';
import { User } from '@/lib/session';
import { fetchUsageData, UsageEntry } from '@/lib/storage';
import { UserHeader } from './UserHeader';
import { StatsCard } from './StatsCard';
import { UsageTrendGraph } from './UsageTrendGraph';
import { Cigarette, Leaf } from 'lucide-react';

interface SubstanceTrackingPageProps {
  user: User;
  substance: 'nicotine' | 'weed';
}

export function SubstanceTrackingPage({ user, substance }: SubstanceTrackingPageProps) {
  const [usageData, setUsageData] = useState<UsageEntry[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  const loadData = useCallback(async () => {
    const usage = await fetchUsageData();
    setUsageData(usage);
    setIsLoading(false);
  }, []);

  useEffect(() => {
    loadData();
  }, [loadData]);

  const substanceLabel = substance === 'nicotine' ? 'Nicotine' : 'Marijuana';
  const SubstanceIcon = substance === 'nicotine' ? Cigarette : Leaf;
  const gradientColors = substance === 'nicotine'
    ? 'from-red-500/20 to-orange-500/20'
    : 'from-green-500/20 to-emerald-500/20';
  const borderColor = substance === 'nicotine' ? 'border-red-500/30' : 'border-green-500/30';
  const iconColor = substance === 'nicotine' ? 'text-red-400' : 'text-green-400';

  if (isLoading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="animate-pulse text-lg text-white">Loading...</div>
      </div>
    );
  }

  return (
    <div className="min-h-screen">
      <UserHeader user={user} />

      <main className="container mx-auto px-4 py-8">
        {/* Substance Header */}
        <div className={`mb-8 p-6 rounded-xl bg-gradient-to-r ${gradientColors} border ${borderColor} backdrop-blur-sm`}>
          <div className="flex items-center gap-4">
            <div className={`p-3 rounded-full bg-background/50 ${iconColor}`}>
              <SubstanceIcon className="h-8 w-8" />
            </div>
            <div>
              <h1 className="text-3xl font-bold text-white">{substanceLabel} Tracking</h1>
              <p className="text-white/70 mt-1">Monitor your {substanceLabel.toLowerCase()} usage and progress</p>
            </div>
          </div>
        </div>

        {/* Inspirational Message */}
        <div className="mb-8 text-center">
          <p className="text-2xl font-light text-white/80 italic">
            &quot;One day at a time...&quot;
          </p>
        </div>

        {/* Stats and Graph */}
        <div className="grid gap-6 md:grid-cols-2">
          <StatsCard usageData={usageData} substance={substance} />
          <UsageTrendGraph usageData={usageData} substance={substance} />
        </div>
      </main>
    </div>
  );
}