"use client";

import { useCallback, useEffect, useState } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { ArrowLeft, Gift, Sparkles, Target, Zap, LifeBuoy, Wrench, Dice5, Coins, ReceiptText, type LucideIcon } from "lucide-react";
import type { LedgerEntry, TransactionType } from "@spinza/shared";
import { formatSC } from "@spinza/shared";
import { api, ApiClientError } from "@/lib/api";
import { cn } from "@/lib/utils";
import { Button, Card, Empty, Skeleton, Tabs } from "@/components/ui";
import { AppShell } from "@/components/shell/app-shell";
import { RequireAuth } from "@/components/shell/require-auth";
import { ApiErrorState } from "@/components/shell/api-error";

const TYPES: Record<TransactionType, { label: string; icon: LucideIcon; tone: string }> = {
  INITIAL_GRANT: { label: "Welcome credits", icon: Sparkles, tone: "text-accent-2 bg-accent-soft" },
  BET: { label: "Bet", icon: Dice5, tone: "text-fg-2 bg-surface-2" },
  WIN: { label: "Win", icon: Coins, tone: "text-credit bg-credit/10" },
  DAILY_REWARD: { label: "Daily reward", icon: Gift, tone: "text-accent-2 bg-accent-soft" },
  ACHIEVEMENT: { label: "Achievement", icon: Sparkles, tone: "text-accent-2 bg-accent-soft" },
  MISSION: { label: "Mission", icon: Target, tone: "text-info bg-info/10" },
  LEVEL_UP: { label: "Level up", icon: Zap, tone: "text-accent-2 bg-accent-soft" },
  RESCUE_CREDITS: { label: "Rescue credits", icon: LifeBuoy, tone: "text-success bg-success/10" },
  ADMIN_ADJUSTMENT: { label: "Adjustment", icon: Wrench, tone: "text-fg-2 bg-surface-2" },
};

const FILTERS = [
  { value: "", label: "All" },
  { value: "WIN", label: "Wins" },
  { value: "BET", label: "Bets" },
  { value: "rewards", label: "Rewards" },
] as const;
type Filter = (typeof FILTERS)[number]["value"];
const REWARD_TYPES: TransactionType[] = ["DAILY_REWARD", "ACHIEVEMENT", "MISSION", "LEVEL_UP", "RESCUE_CREDITS", "INITIAL_GRANT"];

interface Page {
  entries: LedgerEntry[];
  nextBefore: string | null;
}
const LIMIT = 50;

function fmtDate(iso: string) {
  return new Date(iso).toLocaleString("en-US", { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
}

async function fetchPage(before: string | null, f: Filter): Promise<{ entries: LedgerEntry[]; nextBefore: string | null }> {
  const q = new URLSearchParams({ limit: String(LIMIT) });
  if (before) q.set("before", before);
  if (f && f !== "rewards") q.set("type", f);
  const page = await api<Page>(`/api/wallet/ledger?${q}`);
  // "Rewards" groups several types; the API filters by a single type, so refine client-side.
  return { entries: f === "rewards" ? page.entries.filter((e) => REWARD_TYPES.includes(e.type)) : page.entries, nextBefore: page.nextBefore };
}

function LedgerBody() {
  const router = useRouter();
  const [filter, setFilter] = useState<Filter>("");
  const [entries, setEntries] = useState<LedgerEntry[] | null>(null); // null = first page loading
  const [nextBefore, setNextBefore] = useState<string | null>(null);
  const [more, setMore] = useState(false);
  const [error, setError] = useState<unknown>(null);
  const [tick, setTick] = useState(0);

  // Switching filter restarts from the first page (adjust-state-from-props).
  const [prevFilter, setPrevFilter] = useState(filter);
  if (filter !== prevFilter) {
    setPrevFilter(filter);
    setEntries(null);
    setError(null);
  }

  const fail = useCallback(
    (e: unknown) => {
      if (e instanceof ApiClientError && e.status === 401) {
        router.replace("/login?next=%2Fprofile%2Fledger&reason=expired");
        return;
      }
      setError(e);
    },
    [router],
  );

  useEffect(() => {
    let alive = true;
    fetchPage(null, filter)
      .then((page) => {
        if (!alive) return;
        setEntries(page.entries);
        setNextBefore(page.nextBefore);
        setError(null);
      })
      .catch((e: unknown) => alive && fail(e));
    return () => {
      alive = false;
    };
  }, [filter, tick, fail]);

  const retry = () => {
    setEntries(null);
    setError(null);
    setTick((t) => t + 1);
  };

  const loadMore = async () => {
    if (!nextBefore || more) return;
    setMore(true);
    try {
      const page = await fetchPage(nextBefore, filter);
      setEntries((cur) => [...(cur ?? []), ...page.entries]);
      setNextBefore(page.nextBefore);
    } catch (e) {
      fail(e);
    } finally {
      setMore(false);
    }
  };

  return (
    <>
      <div className="mb-4">
        <Tabs<Filter> value={filter} onChange={setFilter} items={FILTERS.map((f) => ({ value: f.value, label: f.label }))} />
      </div>
      {error && !entries?.length ? (
        <ApiErrorState error={error} retry={retry} />
      ) : entries === null ? (
        <div className="space-y-2" aria-busy>
          {Array.from({ length: 8 }).map((_, i) => (
            <Skeleton key={i} className="h-16 rounded-md" />
          ))}
        </div>
      ) : !entries.length ? (
        <Empty title="Nothing here yet" description={filter ? "No transactions of this kind yet." : "Every credit movement — bets, wins, rewards — is recorded here."} icon={<ReceiptText className="h-5 w-5" />} action={filter ? <Button variant="secondary" onClick={() => setFilter("")}>Show all</Button> : <Button href="/games">Play a game</Button>} />
      ) : (
        <>
          <Card as="ul" className="divide-y divide-line overflow-hidden">
            {entries.map((e) => {
              const meta = TYPES[e.type] ?? { label: e.type, icon: Wrench, tone: "text-fg-2 bg-surface-2" };
              const Icon = meta.icon;
              const positive = e.amount > 0;
              return (
                <li key={e.id} className="flex items-center gap-3 px-4 py-3">
                  <span className={cn("grid h-10 w-10 shrink-0 place-items-center rounded-md", meta.tone)}>
                    <Icon className="h-[18px] w-[18px]" />
                  </span>
                  <div className="min-w-0 flex-1">
                    <div className="flex items-center gap-2">
                      <span className="truncate text-[15px] font-medium">{meta.label}</span>
                      {e.reference && !/^(spz_rnd_|daily:|welcome$|rescue$)/.test(e.reference) ? <span className="hidden truncate text-[12px] text-fg-4 sm:inline">{e.reference.replace(/[:_]/g, " · ")}</span> : null}
                    </div>
                    <div className="text-[12px] tabular text-fg-3">{fmtDate(e.createdAt)}</div>
                  </div>
                  <div className="shrink-0 text-right">
                    <div className={cn("text-[15px] font-semibold tabular", positive ? "text-credit" : "text-fg-2")}>
                      {positive ? "+" : e.amount < 0 ? "−" : ""}
                      {formatSC(Math.abs(e.amount))}
                    </div>
                    <div className="text-[11px] tabular text-fg-4">Balance {formatSC(e.balanceAfter, { unit: false })}</div>
                  </div>
                </li>
              );
            })}
          </Card>
          {nextBefore ? (
            <div className="mt-4 flex justify-center">
              <Button variant="secondary" onClick={loadMore} loading={more}>
                Load more
              </Button>
            </div>
          ) : (
            <p className="mt-4 text-center text-[12px] text-fg-4">End of ledger.</p>
          )}
        </>
      )}
    </>
  );
}

export default function LedgerPage() {
  return (
    <AppShell>
      <RequireAuth>
        <div className="mb-6">
          <Link href="/profile" className="tap -ml-1 inline-flex h-9 min-h-0 items-center gap-1 text-sm text-fg-3 hover:text-fg">
            <ArrowLeft className="h-4 w-4" /> Profile
          </Link>
          <h1 className="mt-1 text-3xl font-semibold tracking-tight sm:text-4xl">Credit ledger</h1>
          <p className="mt-2 max-w-xl text-sm text-fg-3">A complete record of your Spinza Credits. All amounts are fictional and have no cash value.</p>
        </div>
        <LedgerBody />
      </RequireAuth>
    </AppShell>
  );
}