"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { Gift, Users, ChevronRight, Flame } from "lucide-react";
import type { DailyRewardStatus } from "@spinza/shared";
import { api } from "@/lib/api";
import { toast, useSession } from "@/lib/store";
import { useApi } from "@/lib/use-api";
import { countdown, cn } from "@/lib/utils";
import { Button, Credits, Skeleton } from "@/components/ui";

interface ClaimResponse {
  amount: number;
  streakDay: number;
  balance: number;
  nextAvailableAt: string;
  xp: { xp: number; level: number; leveledUp?: boolean } | null;
}

/** Lobby strip: daily reward availability + live players. */
export function RewardsStrip({ livePlayers }: { livePlayers: number }) {
  const { data, loading, error, setData, reload } = useApi<DailyRewardStatus>("/api/rewards/daily");
  const setBalance = useSession((s) => s.setBalance);
  const setUserXp = useSession((s) => s.setUserXp);
  const [claiming, setClaiming] = useState(false);
  const [, tick] = useState(0);

  useEffect(() => {
    if (!data || data.available) return;
    const t = setInterval(() => tick((n) => n + 1), 1000);
    return () => clearInterval(t);
  }, [data]);

  const claim = async () => {
    if (claiming) return;
    setClaiming(true);
    try {
      const res = await api<ClaimResponse>("/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: `Daily reward · day ${res.streakDay} of ${data?.schedule.length ?? 7}`, 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 {
      setClaiming(false);
    }
  };

  return (
    <div className="grid gap-3 sm:grid-cols-[1fr_auto]">
      <div className={cn("surface flex items-center gap-4 rounded-lg p-3 pl-4", data?.available && "border-accent/40 shadow-glow")}>
        <span className={cn("grid h-11 w-11 shrink-0 place-items-center rounded-md", data?.available ? "bg-accent text-bg" : "metal text-accent-2")}>
          <Gift className="h-5 w-5" />
        </span>
        <div className="min-w-0 flex-1">
          {loading && !data ? (
            <>
              <Skeleton className="h-4 w-40" />
              <Skeleton className="mt-2 h-3 w-24" />
            </>
          ) : error && !data ? (
            <>
              <div className="text-[15px] font-semibold">Daily reward</div>
              <div className="text-[13px] text-fg-3">Unavailable right now.</div>
            </>
          ) : data ? (
            <>
              <div className="flex items-center gap-2 text-[15px] font-semibold tracking-tight">
                {data.available ? "Your daily reward is ready" : "Daily reward claimed"}
                {data.streakDay > 1 ? (
                  <span className="inline-flex items-center gap-0.5 rounded-full bg-surface-2 px-2 py-0.5 text-[11px] font-bold text-fg-2">
                    <Flame className="h-3 w-3 text-accent" /> {data.streakDay}-day streak
                  </span>
                ) : null}
              </div>
              <div className="text-[13px] text-fg-3">
                {data.available ? (
                  <>
                    Claim <Credits amount={data.nextAmount} size="sm" /> · day {Math.min(data.streakDay + 1, data.schedule.length)} of {data.schedule.length}
                  </>
                ) : (
                  <>
                    Next reward <Credits amount={data.nextAmount} size="sm" /> in <span className="tabular text-fg-2">{countdown(data.nextAvailableAt)}</span>
                  </>
                )}
              </div>
            </>
          ) : null}
        </div>
        {data?.available ? (
          <Button variant="accent" size="md" onClick={claim} loading={claiming} className="shrink-0">
            Claim
          </Button>
        ) : (
          <Link href="/rewards" className="tap grid h-11 w-11 place-items-center rounded-md text-fg-3 hover:bg-surface-2 hover:text-fg focus-ring" aria-label="Open rewards">
            <ChevronRight className="h-5 w-5" />
          </Link>
        )}
      </div>
      <div className="surface flex items-center gap-3 rounded-lg px-4 py-3">
        <span className="relative grid h-9 w-9 place-items-center rounded-full bg-surface-2 text-success">
          <Users className="h-4 w-4" />
          <span className="absolute -right-0.5 -top-0.5 h-2.5 w-2.5 rounded-full bg-success shadow-[0_0_10px_rgba(61,220,151,0.9)] animate-pulse-soft" />
        </span>
        <div>
          <div className="text-[15px] font-semibold tabular">{livePlayers.toLocaleString("en-US")}</div>
          <div className="text-[12px] text-fg-3">{livePlayers === 1 ? "player" : "players"} live now</div>
        </div>
      </div>
    </div>
  );
}