"use client";

import * as React from "react";
import { Plus, RotateCcw, Save, Trash2 } from "lucide-react";
import { DAILY_REWARDS, RESCUE_CREDITS_AMOUNT, RESCUE_CREDITS_COOLDOWN_HOURS, RESCUE_CREDITS_THRESHOLD } from "@spinza/shared";
import { Button } from "@/components/ui";
import { api } from "@/lib/api";
import { toast } from "@/lib/store";
import { cn } from "@/lib/utils";
import { useAdminQuery } from "@/components/admin/use-query";
import type { DailyRewardsSetting, RescueSetting, SettingsResponse } from "@/components/admin/types";
import { PageHeader, RefreshButton, Panel, ErrorState, TableSkeleton, DenseInput, FieldLabel, InlineError, Pill } from "@/components/admin/primitives";
import { describeError, int, sc } from "@/components/admin/format";

function readSchedule(s: Record<string, unknown> | undefined): number[] {
  const v = s?.["dailyRewards"] as Partial<DailyRewardsSetting> | undefined;
  return Array.isArray(v?.schedule) && v.schedule.length ? v.schedule.map((n) => Math.max(0, Math.trunc(Number(n) || 0))) : [...DAILY_REWARDS];
}

function readRescue(s: Record<string, unknown> | undefined): RescueSetting {
  const v = s?.["rescue"] as Partial<RescueSetting> | undefined;
  return { amount: Number(v?.amount ?? RESCUE_CREDITS_AMOUNT), cooldownHours: Number(v?.cooldownHours ?? RESCUE_CREDITS_COOLDOWN_HOURS), threshold: Number(v?.threshold ?? RESCUE_CREDITS_THRESHOLD) };
}

export default function AdminRewardsPage() {
  const q = useAdminQuery<SettingsResponse>("/api/admin/settings");
  const d = q.data;
  const flags = d?.flags ?? {};

  return (
    <>
      <PageHeader title="Daily Rewards" description="Streak schedule and rescue credits. Changes apply to the next claim; existing streaks are preserved." actions={<RefreshButton onClick={() => void q.refresh()} loading={q.refreshing} />} />
      {q.error && !d ? (
        <ErrorState error={q.error} onRetry={() => void q.refresh()} />
      ) : !d ? (
        <div className="grid gap-4 xl:grid-cols-[1.3fr_1fr]">
          <Panel>
            <TableSkeleton rows={7} cols={3} />
          </Panel>
          <Panel>
            <TableSkeleton rows={3} cols={2} />
          </Panel>
        </div>
      ) : (
        <div className={cn("grid gap-4 xl:grid-cols-[1.3fr_1fr]", q.stale && "opacity-70")}>
          <ScheduleEditor key={`s-${q.updatedAt}`} initial={readSchedule(d.settings)} enabled={flags["dailyRewards.enabled"] ?? true} onSaved={() => void q.refresh()} />
          <RescueEditor key={`r-${q.updatedAt}`} initial={readRescue(d.settings)} enabled={flags["rescue.enabled"] ?? true} onSaved={() => void q.refresh()} />
        </div>
      )}
    </>
  );
}

function ScheduleEditor({ initial, enabled, onSaved }: { initial: number[]; enabled: boolean; onSaved: () => void }) {
  const [schedule, setSchedule] = React.useState<number[]>(initial);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const dirty = JSON.stringify(schedule) !== JSON.stringify(initial);
  const valid = schedule.length >= 1 && schedule.length <= 30 && schedule.every((n) => Number.isInteger(n) && n >= 0);
  const total = schedule.reduce((a, n) => a + n, 0);

  async function save() {
    if (!valid) return;
    setBusy(true);
    setError(null);
    try {
      await api("/api/admin/settings/dailyRewards", { json: { value: { schedule } } });
      toast({ title: "Daily reward schedule saved", description: `${schedule.length}-day streak · ${sc(total)} per full cycle`, tone: "success" });
      onSaved();
    } catch (e) {
      setError(describeError(e));
    } finally {
      setBusy(false);
    }
  }

  return (
    <Panel
      title="Streak schedule"
      description="Credits granted on each consecutive day; the last day repeats until the streak breaks."
      actions={
        <>
          <Pill tone={enabled ? "success" : "danger"} dot>
            {enabled ? "flag on" : "flag off"}
          </Pill>
          <Button size="sm" variant="ghost" onClick={() => setSchedule(initial)} disabled={!dirty || busy} aria-label="Reset">
            <RotateCcw className="h-3.5 w-3.5" />
          </Button>
          <Button size="sm" variant="accent" onClick={() => void save()} disabled={!dirty || !valid} loading={busy}>
            <Save className="h-3.5 w-3.5" /> Save
          </Button>
        </>
      }
    >
      <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-3">
        {schedule.map((v, i) => (
          <div key={i} className="flex items-center gap-2 rounded-sm border border-line bg-bg-1/60 px-2.5 py-2">
            <span className="w-12 shrink-0 text-[11px] font-semibold uppercase tracking-wider text-fg-4">Day {i + 1}</span>
            <DenseInput inputMode="numeric" className="h-8 flex-1 text-right font-mono" value={String(v)} onChange={(e) => setSchedule((s) => s.map((x, j) => (j === i ? Number(e.target.value.replace(/\D/g, "") || 0) : x)))} aria-label={`Day ${i + 1} reward`} />
            <span className="text-[11px] text-fg-4">SC</span>
            <button type="button" onClick={() => setSchedule((s) => s.filter((_, j) => j !== i))} disabled={schedule.length <= 1} className="grid h-7 w-7 place-items-center rounded-xs text-fg-4 hover:text-danger disabled:opacity-30" aria-label={`Remove day ${i + 1}`}>
              <Trash2 className="h-3.5 w-3.5" />
            </button>
          </div>
        ))}
        {schedule.length < 30 ? (
          <button type="button" onClick={() => setSchedule((s) => [...s, s[s.length - 1] ?? 1000])} className="flex h-[46px] items-center justify-center gap-1.5 rounded-sm border border-dashed border-line-2 text-[12px] text-fg-3 hover:border-accent/50 hover:text-fg">
            <Plus className="h-3.5 w-3.5" /> Add day {schedule.length + 1}
          </button>
        ) : null}
      </div>
      <div className="mt-4 flex flex-wrap items-center gap-x-6 gap-y-1 border-t border-line pt-3 text-[12px] text-fg-3">
        <span>
          <span className="text-fg-4">days</span> {schedule.length}
        </span>
        <span>
          <span className="text-fg-4">full cycle</span> {sc(total)}
        </span>
        <span>
          <span className="text-fg-4">avg / day</span> {sc(Math.round(total / Math.max(1, schedule.length)))}
        </span>
        <button type="button" className="ml-auto text-fg-3 underline-offset-2 hover:text-fg hover:underline" onClick={() => setSchedule([...DAILY_REWARDS])}>
          Load defaults
        </button>
      </div>
      <FieldLabel className="mt-4">Preview</FieldLabel>
      <div className="flex items-end gap-1" aria-hidden>
        {schedule.map((v, i) => (
          <div key={i} className="flex flex-1 flex-col items-center gap-1">
            <div className="w-full rounded-t-[3px] bg-accent/70" style={{ height: `${Math.max(4, (v / Math.max(1, ...schedule)) * 56)}px` }} title={`Day ${i + 1}: ${sc(v)}`} />
            <span className="text-[9px] text-fg-4">{i + 1}</span>
          </div>
        ))}
      </div>
      {!valid ? <div className="mt-3"><InlineError>Schedule must have 1–30 non-negative integer amounts.</InlineError></div> : null}
      {error ? <div className="mt-3"><InlineError>{error}</InlineError></div> : null}
    </Panel>
  );
}

function RescueEditor({ initial, enabled, onSaved }: { initial: RescueSetting; enabled: boolean; onSaved: () => void }) {
  const [v, setV] = React.useState<RescueSetting>(initial);
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState<string | null>(null);
  const dirty = JSON.stringify(v) !== JSON.stringify(initial);
  const valid = Number.isInteger(v.amount) && v.amount >= 0 && Number.isFinite(v.cooldownHours) && v.cooldownHours >= 0 && Number.isInteger(v.threshold) && v.threshold >= 0;

  async function save() {
    if (!valid) return;
    setBusy(true);
    setError(null);
    try {
      await api("/api/admin/settings/rescue", { json: { value: v } });
      toast({ title: "Rescue credits saved", description: `${sc(v.amount)} every ${v.cooldownHours} h under ${sc(v.threshold)}`, tone: "success" });
      onSaved();
    } catch (e) {
      setError(describeError(e));
    } finally {
      setBusy(false);
    }
  }

  return (
    <Panel
      title="Rescue credits"
      description="Granted to players who run out of credits."
      actions={
        <>
          <Pill tone={enabled ? "success" : "danger"} dot>
            {enabled ? "flag on" : "flag off"}
          </Pill>
          <Button size="sm" variant="ghost" onClick={() => setV(initial)} disabled={!dirty || busy} aria-label="Reset">
            <RotateCcw className="h-3.5 w-3.5" />
          </Button>
          <Button size="sm" variant="accent" onClick={() => void save()} disabled={!dirty || !valid} loading={busy}>
            <Save className="h-3.5 w-3.5" /> Save
          </Button>
        </>
      }
    >
      <div className="space-y-3">
        <div>
          <FieldLabel hint={`default ${int(RESCUE_CREDITS_AMOUNT)}`}>Amount (SC)</FieldLabel>
          <DenseInput inputMode="numeric" className="font-mono" value={String(v.amount)} onChange={(e) => setV({ ...v, amount: Number(e.target.value.replace(/\D/g, "") || 0) })} />
        </div>
        <div>
          <FieldLabel hint={`default ${RESCUE_CREDITS_COOLDOWN_HOURS} h`}>Cooldown (hours)</FieldLabel>
          <DenseInput inputMode="decimal" className="font-mono" value={String(v.cooldownHours)} onChange={(e) => setV({ ...v, cooldownHours: Number(e.target.value.replace(/[^\d.]/g, "") || 0) })} />
        </div>
        <div>
          <FieldLabel hint="balance at or below which rescue is offered">Threshold (SC)</FieldLabel>
          <DenseInput inputMode="numeric" className="font-mono" value={String(v.threshold)} onChange={(e) => setV({ ...v, threshold: Number(e.target.value.replace(/\D/g, "") || 0) })} />
        </div>
      </div>
      <p className="mt-4 rounded-sm border border-line bg-bg-1/60 px-3 py-2 text-[12px] text-fg-3">
        A player with <span className="text-fg">≤ {sc(v.threshold)}</span> can claim <span className="text-credit">{sc(v.amount)}</span> at most once every <span className="text-fg">{v.cooldownHours} h</span>.
      </p>
      {!valid ? <div className="mt-3"><InlineError>Amount and threshold must be non-negative integers; cooldown a non-negative number.</InlineError></div> : null}
      {error ? <div className="mt-3"><InlineError>{error}</InlineError></div> : null}
    </Panel>
  );
}