"use client";

import * as React from "react";
import { Check, RotateCcw } from "lucide-react";
import { Button } from "@/components/ui";
import { api } from "@/lib/api";
import { toast } from "@/lib/store";
import { cn } from "@/lib/utils";
import type { ProgressionPatch } from "./types";
import { DenseInput, Pill, Toggle } from "./primitives";
import { describeError, int } from "./format";

export interface ProgressionItem {
  key: string;
  name: string;
  description: string;
  target: number;
  rewardCredits: number;
  rewardXp: number;
  enabled: boolean;
  metric: string;
  /** Extra chip shown next to the key (period / category). */
  tag?: string;
  /** Right-hand statistics columns. */
  stats: { label: string; value: React.ReactNode }[];
}

type Draft = Partial<Pick<ProgressionItem, "name" | "description" | "target" | "rewardCredits" | "rewardXp">>;

/** Inline-editable table shared by Missions and Achievements. Each row saves through PATCH `${endpoint}/${key}`. */
export function ProgressionTable({ items, endpoint, onSaved, statHeaders }: { items: ProgressionItem[]; endpoint: string; onSaved: () => void; statHeaders: string[] }) {
  const [drafts, setDrafts] = React.useState<Record<string, Draft>>({});
  const [busy, setBusy] = React.useState<string | null>(null);

  function edit(key: string, patch: Draft) {
    setDrafts((d) => ({ ...d, [key]: { ...d[key], ...patch } }));
  }
  function reset(key: string) {
    setDrafts((d) => {
      const n = { ...d };
      delete n[key];
      return n;
    });
  }

  function validate(item: ProgressionItem, draft: Draft): string | null {
    const name = draft.name ?? item.name;
    const desc = draft.description ?? item.description;
    if (name.trim().length < 2) return "Name must be at least 2 characters.";
    if (desc.trim().length < 2) return "Description must be at least 2 characters.";
    const t = draft.target ?? item.target;
    if (!Number.isInteger(t) || t < 1) return "Target must be a positive integer.";
    const rc = draft.rewardCredits ?? item.rewardCredits;
    const rx = draft.rewardXp ?? item.rewardXp;
    if (!Number.isInteger(rc) || rc < 0 || !Number.isInteger(rx) || rx < 0) return "Rewards must be non-negative integers.";
    return null;
  }

  async function save(item: ProgressionItem) {
    const draft = drafts[item.key];
    if (!draft) return;
    const err = validate(item, draft);
    if (err) {
      toast({ title: "Invalid values", description: err, tone: "danger" });
      return;
    }
    const patch: ProgressionPatch = {};
    if (draft.name !== undefined && draft.name !== item.name) patch.name = draft.name.trim();
    if (draft.description !== undefined && draft.description !== item.description) patch.description = draft.description.trim();
    if (draft.target !== undefined && draft.target !== item.target) patch.target = draft.target;
    if (draft.rewardCredits !== undefined && draft.rewardCredits !== item.rewardCredits) patch.rewardCredits = draft.rewardCredits;
    if (draft.rewardXp !== undefined && draft.rewardXp !== item.rewardXp) patch.rewardXp = draft.rewardXp;
    if (Object.keys(patch).length === 0) {
      reset(item.key);
      return;
    }
    setBusy(item.key);
    try {
      await api(`${endpoint}/${encodeURIComponent(item.key)}`, { method: "PATCH", json: patch });
      toast({ title: `${item.name} saved`, tone: "success" });
      reset(item.key);
      onSaved();
    } catch (e) {
      toast({ title: "Save failed", description: describeError(e), tone: "danger" });
    } finally {
      setBusy(null);
    }
  }

  async function toggleEnabled(item: ProgressionItem, enabled: boolean) {
    setBusy(item.key);
    try {
      await api(`${endpoint}/${encodeURIComponent(item.key)}`, { method: "PATCH", json: { enabled } });
      onSaved();
    } catch (e) {
      toast({ title: "Update failed", description: describeError(e), tone: "danger" });
    } finally {
      setBusy(null);
    }
  }

  const numInput = (item: ProgressionItem, field: "target" | "rewardCredits" | "rewardXp", width: string) => {
    const draft = drafts[item.key];
    const v = draft?.[field] ?? item[field];
    return <DenseInput inputMode="numeric" className={cn(width, "text-right font-mono", draft?.[field] !== undefined && draft[field] !== item[field] && "border-accent/60")} value={String(v)} onChange={(e) => edit(item.key, { [field]: Number(e.target.value.replace(/\D/g, "") || 0) })} aria-label={`${field} of ${item.name}`} />;
  };

  return (
    <div className="overflow-x-auto">
      <table className="w-full min-w-[980px] border-collapse text-[13px]">
        <thead>
          <tr className="border-b border-line text-left text-[11px] font-semibold uppercase tracking-wider text-fg-3">
            <th className="px-3 py-2">On</th>
            <th className="px-3 py-2">Key</th>
            <th className="px-3 py-2">Name & description</th>
            <th className="px-3 py-2 text-right">Target</th>
            <th className="px-3 py-2 text-right">Reward SC</th>
            <th className="px-3 py-2 text-right">Reward XP</th>
            {statHeaders.map((h) => (
              <th key={h} className="px-3 py-2 text-right">
                {h}
              </th>
            ))}
            <th className="px-3 py-2" />
          </tr>
        </thead>
        <tbody>
          {items.map((item) => {
            const draft = drafts[item.key];
            const dirty = !!draft;
            return (
              <tr key={item.key} className={cn("border-b border-line/60 align-top last:border-0", !item.enabled && "opacity-60", dirty && "bg-accent-soft/30")}>
                <td className="px-3 py-2.5">
                  <Toggle checked={item.enabled} disabled={busy === item.key} onChange={(v) => void toggleEnabled(item, v)} label={`Enable ${item.name}`} />
                </td>
                <td className="px-3 py-2.5">
                  <div className="font-mono text-[12px] text-fg-2">{item.key}</div>
                  <div className="mt-1 flex flex-wrap gap-1">
                    {item.tag ? <Pill tone={item.tag === "weekly" ? "info" : "muted"}>{item.tag}</Pill> : null}
                    <Pill tone="muted">{item.metric}</Pill>
                  </div>
                </td>
                <td className="px-3 py-2.5">
                  <DenseInput className={cn("mb-1.5 h-8 font-medium", draft?.name !== undefined && draft.name !== item.name && "border-accent/60")} value={draft?.name ?? item.name} onChange={(e) => edit(item.key, { name: e.target.value })} aria-label={`Name of ${item.key}`} />
                  <DenseInput className={cn("h-8 text-fg-2", draft?.description !== undefined && draft.description !== item.description && "border-accent/60")} value={draft?.description ?? item.description} onChange={(e) => edit(item.key, { description: e.target.value })} aria-label={`Description of ${item.key}`} />
                </td>
                <td className="px-3 py-2.5 text-right">{numInput(item, "target", "w-24")}</td>
                <td className="px-3 py-2.5 text-right">{numInput(item, "rewardCredits", "w-24")}</td>
                <td className="px-3 py-2.5 text-right">{numInput(item, "rewardXp", "w-20")}</td>
                {item.stats.map((s) => (
                  <td key={s.label} className="px-3 py-2.5 text-right tabular text-fg-2">
                    {s.value}
                  </td>
                ))}
                <td className="px-3 py-2.5 text-right">
                  {dirty ? (
                    <div className="inline-flex gap-1">
                      <Button size="sm" variant="accent" onClick={() => void save(item)} loading={busy === item.key} aria-label="Save">
                        <Check className="h-3.5 w-3.5" /> Save
                      </Button>
                      <Button size="sm" variant="ghost" onClick={() => reset(item.key)} disabled={busy === item.key} aria-label="Discard changes">
                        <RotateCcw className="h-3.5 w-3.5" />
                      </Button>
                    </div>
                  ) : (
                    <span className="text-[11px] text-fg-4">{int(item.target)} target</span>
                  )}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
}