'use client';

import { useQuery } from '@tanstack/react-query';
import { useMe } from '@/lib/auth';
import { api } from '@/lib/api';
import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils';

interface PersonalStats {
  lifetime: { vihars: number; totalKm: number };
  current: { vihars: number; totalKm: number };
  comparison: { previousPeriodVihars: number; pctChange: number | null };
}

export default function VolunteerHome() {
  const { data: user } = useMe();
  const stats = useQuery({
    queryKey: ['stats', 'me', 'this_month'],
    queryFn: () => api.get<PersonalStats>('/api/stats/me', { query: { period: 'this_month' } }),
  });

  if (!user) return null;

  return (
    <div className="space-y-6 animate-fade-in">
      {/* Greeting */}
      <div>
        <div className="text-xs uppercase tracking-widest text-ink-400">Jai Jinendra</div>
        <div className="font-display text-3xl text-ink mt-1">{user.fullName}</div>
      </div>

      {/* Next vihar - placeholder */}
      <Card className="border-saffron-300 bg-gradient-to-br from-saffron-50/50 to-paper">
        <CardContent className="pt-5">
          <div className="text-xs uppercase tracking-widest text-saffron-700 font-medium mb-2">
            Next Vihar
          </div>
          <div className="text-sm text-ink-400">
            No upcoming vihars allocated to you yet.
          </div>
          <div className="text-xs text-ink-300 mt-3">
            (Live next-vihar card: Claude Code task: volunteer-next-vihar)
          </div>
        </CardContent>
      </Card>

      {/* Personal stats */}
      <section>
        <h2 className="font-display text-xl text-ink mb-3">Your Sewa</h2>
        <div className="grid grid-cols-2 gap-3">
          <StatTile
            label="Lifetime vihars"
            value={stats.data?.lifetime.vihars}
            accent="ink"
          />
          <StatTile
            label="Lifetime km"
            value={stats.data ? stats.data.lifetime.totalKm.toFixed(1) : undefined}
            accent="moss"
          />
          <StatTile
            label="This month"
            value={stats.data?.current.vihars}
            accent="saffron"
            sub="vihars"
          />
          <StatTile
            label="This month"
            value={stats.data ? stats.data.current.totalKm.toFixed(1) : undefined}
            accent="saffron"
            sub="km"
          />
        </div>
      </section>
    </div>
  );
}

function StatTile({
  label,
  value,
  accent,
  sub,
}: {
  label: string;
  value: number | string | undefined;
  accent: 'ink' | 'moss' | 'saffron';
  sub?: string;
}) {
  const accentClass = {
    ink: 'text-ink',
    moss: 'text-moss-700',
    saffron: 'text-saffron-700',
  }[accent];
  return (
    <div className="surface-card p-4">
      <div className="text-[10px] uppercase tracking-widest text-ink-400">{label}</div>
      <div className={cn('font-display text-3xl mt-1 tabular-nums leading-none', accentClass)}>
        {value ?? '—'}
        {sub && <span className="text-xs text-ink-400 font-sans ml-1.5 tracking-normal">{sub}</span>}
      </div>
    </div>
  );
}