"use client";

import { useEffect, useState } from "react";
import { Gift, LifeBuoy, Target, Trophy, Lock, Check, Flame, Star, Sparkles, Zap } from "lucide-react";
import type { AchievementView, DailyRewardStatus, MissionView, RescueStatus } from "@spinza/shared";
import { RESCUE_CREDITS_AMOUNT, RESCUE_CREDITS_COOLDOWN_HOURS, formatSC } from "@spinza/shared";
import { api } from "@/lib/api";
import { toast, useSession } from "@/lib/store";
import { useApi } from "@/lib/use-api";
import { cn, countdown } from "@/lib/utils";
import { Button, Card, Credits, Progress, Skeleton, SectionHead, Empty, Badge } from "@/components/ui";
import { AppShell } from "@/components/shell/app-shell";
import { RequireAuth } from "@/components/shell/require-auth";
import { ApiErrorState } from "@/components/shell/api-error";

/* ---------------------------------------------------------------- helpers */

function useTick(active: boolean) {
  const [, set] = useState(0);
  useEffect(() => {
    if (!active) return;
    const t = setInterval(() => set((n) => n + 1), 1000);
    return () => clearInterval(t);
  }, [active]);
}

/* ------------------------------------------------------------ daily card */

interface DailyClaim {
  amount: number;
  streakDay: number;
  balance: number;
  nextAvailableAt: string;
  xp: { xp: number; level: number } | null;
}

function DailyCard() {
  const { data, error, reload, setData } = useApi<DailyRewardStatus>("/api/rewards/daily");
  const setBalance = useSession((s) => s.setBalance);
  const setUserXp = useSession((s) => s.setUserXp);
  const [busy, setBusy] = useState(false);
  useTick(!!data && !data.available);

  const claim = async () => {
    if (busy) return;
    setBusy(true);
    try {
      const res = await api<DailyClaim>("/api/rewards/daily/claim", { method: "POST" });
      setBalance(res.balance);
      if (res.xp) setUserXp(res.xp.xp, res.xp.level);
      toast({ title: `+${res.amount.toLocaleString("en-US")} SC`, description: `Day ${res.streakDay} claimed. Come back tomorrow to keep the streak.`, tone: "credit" });
      setData((d) => (d ? { ...d, available: false, claimedToday: true, streakDay: res.streakDay, nextAvailableAt: res.nextAvailableAt } : d));
    } catch (e) {
      toast({ title: "Could not claim", description: e instanceof Error ? e.message : undefined, tone: "danger" });
      void reload();
    } finally {
      setBusy(false);
    }
  };

  if (error && !data) return <ApiErrorState error={error} retry={reload} compact />;
  if (!data) {
    return (
      <Card className="p-5">
        <Skeleton className="h-5 w-40" />
        <div className="mt-5 grid grid-cols-7 gap-2">
          {Array.from({ length: 7 }).map((_, i) => (
            <Skeleton key={i} className="h-20" />
          ))}
        </div>
        <Skeleton className="mt-5 h-12 w-full" />
      </Card>
    );
  }

  // Day the next claim will land on (or the last claimed day when waiting).
  const targetDay = data.available ? Math.min((data.streakDay % data.schedule.length) + 1, data.schedule.length) : data.streakDay;

  return (
    <Card className={cn("relative overflow-hidden p-5 sm:p-6", data.available && "border-accent/40 shadow-glow")}>
      <div className="flex items-start justify-between gap-4">
        <div className="flex items-center gap-3">
          <span className={cn("grid h-11 w-11 place-items-center rounded-md", data.available ? "bg-accent text-bg" : "metal text-accent-2")}>
            <Gift className="h-5 w-5" />
          </span>
          <div>
            <h2 className="text-lg font-semibold tracking-tight">Daily reward</h2>
            <p className="text-[13px] text-fg-3">Claim once a day. Seven days in a row unlock the big one.</p>
          </div>
        </div>
        {data.streakDay > 0 ? (
          <span className="inline-flex items-center gap-1 rounded-full bg-surface-2 px-2.5 py-1 text-[12px] font-bold text-fg-2">
            <Flame className="h-3.5 w-3.5 text-accent" /> {data.streakDay}-day streak
          </span>
        ) : null}
      </div>

      <ol className="mt-5 grid grid-cols-7 gap-1.5 sm:gap-2" aria-label="Seven-day schedule">
        {data.schedule.map((amt, i) => {
          const day = i + 1;
          const claimed = day <= data.streakDay && !(data.available && day === targetDay);
          const isNext = data.available && day === targetDay;
          return (
            <li key={day} className={cn("flex flex-col items-center justify-between rounded-md border px-1 py-2.5 text-center", isNext ? "border-accent bg-accent-soft" : claimed ? "border-success/30 bg-success/5" : "border-line bg-surface", day === 7 && !isNext && !claimed && "border-line-2")} aria-current={isNext ? "step" : undefined}>
              <span className="text-[10px] font-bold uppercase tracking-wider text-fg-3">Day {day}</span>
              <span className={cn("my-1.5 grid h-7 w-7 place-items-center rounded-full", claimed ? "bg-success text-bg" : isNext ? "bg-accent text-bg" : "bg-surface-2 text-fg-4")}>{claimed ? <Check className="h-4 w-4" /> : day === 7 ? <Star className="h-3.5 w-3.5" /> : <Gift className="h-3.5 w-3.5" />}</span>
              <span className={cn("text-[11px] font-semibold tabular sm:text-[12px]", claimed ? "text-fg-3" : "text-credit")}>{amt >= 1000 ? `${(amt / 1000).toFixed(amt % 1000 ? 2 : 0).replace(/\.?0+$/, "")}K` : amt}</span>
            </li>
          );
        })}
      </ol>

      <div className="mt-5 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="text-sm text-fg-2">
          {data.available ? (
            <>
              Ready now: <Credits amount={data.nextAmount} size="md" />
            </>
          ) : (
            <>
              Next reward <Credits amount={data.nextAmount} size="sm" /> in <span className="font-semibold tabular text-fg">{countdown(data.nextAvailableAt)}</span>
            </>
          )}
        </div>
        <Button variant="accent" size="lg" onClick={claim} disabled={!data.available} loading={busy} className="sm:min-w-[180px]">
          {data.available ? `Claim ${formatSC(data.nextAmount)}` : "Claimed today"}
        </Button>
      </div>
    </Card>
  );
}

/* ----------------------------------------------------------- rescue card */

function RescueCard() {
  const { data, error, reload, setData } = useApi<RescueStatus>("/api/rewards/rescue");
  const setBalance = useSession((s) => s.setBalance);
  const balance = useSession((s) => s.wallet?.balance ?? 0);
  const [busy, setBusy] = useState(false);
  useTick(!!data?.nextAvailableAt);

  const claim = async () => {
    if (busy) return;
    setBusy(true);
    try {
      const res = await api<{ amount: number; balance: number; nextAvailableAt: string }>("/api/rewards/rescue/claim", { method: "POST" });
      setBalance(res.balance);
      toast({ title: `+${res.amount.toLocaleString("en-US")} SC`, description: "Rescue credits added. Back in the game.", tone: "credit" });
      setData((d) => (d ? { ...d, eligible: false, balance: res.balance, nextAvailableAt: res.nextAvailableAt } : d));
    } catch (e) {
      toast({ title: "Not available", description: e instanceof Error ? e.message : undefined, tone: "danger" });
      void reload();
    } finally {
      setBusy(false);
    }
  };

  if (error && !data) return <ApiErrorState error={error} retry={reload} compact />;
  const amount = data?.amount ?? RESCUE_CREDITS_AMOUNT;
  return (
    <Card className={cn("p-5 sm:p-6", data?.eligible && "border-success/40")}>
      <div className="flex items-center gap-3">
        <span className={cn("grid h-11 w-11 place-items-center rounded-md", data?.eligible ? "bg-success text-bg" : "metal text-fg-2")}>
          <LifeBuoy className="h-5 w-5" />
        </span>
        <div>
          <h2 className="text-lg font-semibold tracking-tight">Rescue credits</h2>
          <p className="text-[13px] text-fg-3">
            {formatSC(amount)} every {RESCUE_CREDITS_COOLDOWN_HOURS} hours whenever you reach 0 SC.
          </p>
        </div>
      </div>
      <p className="mt-4 text-sm leading-relaxed text-fg-2">Spinza Credits are fictional, so nobody ever gets stuck. If your balance hits zero, claim a free top-up here. The cooldown resets {RESCUE_CREDITS_COOLDOWN_HOURS} hours after each rescue.</p>
      <div className="mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="text-sm text-fg-3">
          {!data ? (
            <Skeleton className="h-4 w-40" />
          ) : data.eligible ? (
            <span className="text-success">Available now</span>
          ) : data.nextAvailableAt ? (
            <>
              Recharging · ready in <span className="font-semibold tabular text-fg">{countdown(data.nextAvailableAt)}</span>
            </>
          ) : (
            <>
              Balance <Credits amount={balance} size="sm" /> — unlocks at 0 SC
            </>
          )}
        </div>
        <Button variant={data?.eligible ? "primary" : "secondary"} onClick={claim} disabled={!data?.eligible} loading={busy}>
          {data?.eligible ? `Claim ${formatSC(amount)}` : "Not needed yet"}
        </Button>
      </div>
    </Card>
  );
}

/* ------------------------------------------------------------ level card */

function LevelCard() {
  const user = useSession((s) => s.user);
  if (!user) return null;
  const max = user.xpForNext || 1;
  const pct = user.xpForNext ? user.xpIntoLevel / user.xpForNext : 1;
  return (
    <Card className="p-5 sm:p-6">
      <div className="flex items-center gap-3">
        <span className="grid h-11 w-11 place-items-center rounded-md bg-[linear-gradient(180deg,#e8cf8f,#c9a961)] text-bg">
          <Zap className="h-5 w-5" />
        </span>
        <div className="flex-1">
          <div className="flex items-baseline justify-between">
            <h2 className="text-lg font-semibold tracking-tight">Level {user.level}</h2>
            <span className="text-[12px] tabular text-fg-3">{user.xp.toLocaleString("en-US")} XP total</span>
          </div>
          <p className="text-[13px] text-fg-3">Every spin earns XP. Level-ups grant bonus credits.</p>
        </div>
      </div>
      <div className="mt-4">
        <Progress value={user.xpIntoLevel} max={max} />
        <div className="mt-2 flex justify-between text-[12px] tabular text-fg-3">
          <span>{user.xpIntoLevel.toLocaleString("en-US")} XP</span>
          <span>{user.xpForNext ? `${(user.xpForNext - user.xpIntoLevel).toLocaleString("en-US")} XP to level ${user.level + 1}` : "Max level reached"}</span>
        </div>
        <div className="mt-1 text-right text-[11px] text-fg-4">{Math.round(pct * 100)}%</div>
      </div>
    </Card>
  );
}

/* --------------------------------------------------------------- missions */

function Missions() {
  const { data, error, loading, reload } = useApi<{ missions: MissionView[]; enabled: boolean }>("/api/missions");
  useTick(!!data);
  if (error && !data) return <ApiErrorState error={error} retry={reload} compact />;
  if (loading && !data) {
    return (
      <div className="grid gap-3 md:grid-cols-2">
        {Array.from({ length: 4 }).map((_, i) => (
          <Skeleton key={i} className="h-28 rounded-lg" />
        ))}
      </div>
    );
  }
  const missions = data?.missions ?? [];
  if (!data?.enabled) return <Empty title="Missions are paused" description="Daily and weekly missions will return shortly." icon={<Target className="h-5 w-5" />} />;
  if (!missions.length) return <Empty title="No missions right now" description="Check back soon for new daily and weekly challenges." icon={<Target className="h-5 w-5" />} />;

  const groups: { period: "daily" | "weekly"; label: string; items: MissionView[] }[] = [
    { period: "daily", label: "Daily", items: missions.filter((m) => m.period === "daily") },
    { period: "weekly", label: "Weekly", items: missions.filter((m) => m.period === "weekly") },
  ].filter((g) => g.items.length) as { period: "daily" | "weekly"; label: string; items: MissionView[] }[];

  return (
    <div className="space-y-6">
      {groups.map((g) => (
        <div key={g.period}>
          <div className="mb-2 flex items-center justify-between text-[12px] text-fg-3">
            <span className="eyebrow">{g.label}</span>
            <span className="tabular">Resets in {countdown(g.items[0].expiresAt)}</span>
          </div>
          <div className="grid gap-3 md:grid-cols-2">
            {g.items.map((m) => {
              const done = !!m.completedAt;
              return (
                <Card key={m.key} className={cn("p-4", done && "border-success/30")}>
                  <div className="flex items-start justify-between gap-3">
                    <div className="min-w-0">
                      <div className="flex items-center gap-2">
                        <h3 className="truncate text-[15px] font-semibold tracking-tight">{m.name}</h3>
                        {done ? <Badge tone="success">Done</Badge> : null}
                      </div>
                      <p className="mt-0.5 text-[13px] text-fg-3">{m.description}</p>
                    </div>
                    <div className="shrink-0 text-right">
                      <Credits amount={m.rewardCredits} size="sm" sign />
                      <div className="text-[11px] text-fg-3">+{m.rewardXp} XP</div>
                    </div>
                  </div>
                  <div className="mt-3 flex items-center gap-3">
                    <Progress value={m.progress} max={m.target} tone={done ? "success" : "accent"} className="flex-1" />
                    <span className="text-[12px] tabular text-fg-2">
                      {m.progress.toLocaleString("en-US")}/{m.target.toLocaleString("en-US")}
                    </span>
                  </div>
                </Card>
              );
            })}
          </div>
        </div>
      ))}
      <p className="text-[12px] text-fg-4">Mission rewards are credited automatically the moment a mission completes.</p>
    </div>
  );
}

/* ----------------------------------------------------------- achievements */

function Achievements() {
  const { data, error, loading, reload } = useApi<{ achievements: AchievementView[]; unlocked: number; total: number }>("/api/achievements");
  if (error && !data) return <ApiErrorState error={error} retry={reload} compact />;
  if (loading && !data) {
    return (
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {Array.from({ length: 6 }).map((_, i) => (
          <Skeleton key={i} className="h-32 rounded-lg" />
        ))}
      </div>
    );
  }
  const list = data?.achievements ?? [];
  if (!list.length) return <Empty title="No achievements yet" description="Achievements unlock as you play." icon={<Trophy className="h-5 w-5" />} />;
  const sorted = [...list].sort((a, b) => Number(!!b.unlockedAt) - Number(!!a.unlockedAt) || b.progress / b.target - a.progress / a.target);
  return (
    <div className="space-y-3">
      <div className="flex items-center justify-between text-sm text-fg-3">
        <span>
          <span className="font-semibold text-fg">{data?.unlocked ?? 0}</span> of {data?.total ?? list.length} unlocked
        </span>
        <Progress value={data?.unlocked ?? 0} max={(data?.total ?? list.length) || 1} className="w-32" tone="credit" />
      </div>
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        {sorted.map((a) => {
          const unlocked = !!a.unlockedAt;
          return (
            <Card key={a.key} className={cn("relative p-4", unlocked ? "border-accent/35 bg-[linear-gradient(180deg,rgba(201,169,97,0.10),rgba(255,255,255,0.02))]" : "opacity-90")}>
              <div className="flex items-start gap-3">
                <span className={cn("grid h-11 w-11 shrink-0 place-items-center rounded-md", unlocked ? "bg-accent text-bg shadow-glow" : "bg-surface-2 text-fg-4")} aria-hidden>
                  {unlocked ? <Sparkles className="h-5 w-5" /> : <Lock className="h-4 w-4" />}
                </span>
                <div className="min-w-0 flex-1">
                  <h3 className="truncate text-[15px] font-semibold tracking-tight">{a.name}</h3>
                  <p className="mt-0.5 text-[13px] leading-snug text-fg-3">{a.description}</p>
                  <div className="mt-2 flex items-center gap-3 text-[12px]">
                    <span className="inline-flex items-center gap-1 text-credit tabular">+{a.rewardCredits.toLocaleString("en-US")} SC</span>
                    <span className="text-fg-3">+{a.rewardXp} XP</span>
                  </div>
                </div>
              </div>
              {unlocked ? (
                <div className="mt-3 text-[11px] text-fg-3">Unlocked {new Date(a.unlockedAt!).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" })}</div>
              ) : (
                <div className="mt-3 flex items-center gap-3">
                  <Progress value={a.progress} max={a.target} className="flex-1" />
                  <span className="text-[11px] tabular text-fg-3">
                    {a.progress.toLocaleString("en-US")}/{a.target.toLocaleString("en-US")}
                  </span>
                </div>
              )}
            </Card>
          );
        })}
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------- page */

export default function RewardsPage() {
  return (
    <AppShell>
      <RequireAuth>
        <div className="mb-6">
          <div className="eyebrow mb-1">Rewards</div>
          <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">Keep the credits flowing.</h1>
          <p className="mt-2 max-w-xl text-sm text-fg-3">Daily rewards, missions, achievements and level-ups all pay in Spinza Credits — fictional, free and never for sale.</p>
        </div>
        <div className="grid gap-4 lg:grid-cols-[1.4fr_1fr]">
          <DailyCard />
          <div className="grid gap-4">
            <LevelCard />
            <RescueCard />
          </div>
        </div>
        <section className="mt-12" aria-labelledby="missions-title">
          <SectionHead eyebrow="Challenges" title="Missions" />
          <Missions />
        </section>
        <section className="mt-12" aria-labelledby="achievements-title">
          <SectionHead eyebrow="Milestones" title="Achievements" />
          <Achievements />
        </section>
      </RequireAuth>
    </AppShell>
  );
}