"use client";

import { useEffect, useState } from "react";
import { useParams } from "next/navigation";
import type { Game } from "@/lib/types";
import { computeCompleteness } from "@/lib/types";

export default function EditGamePage() {
  const { id } = useParams<{ id: string }>();
  const [game, setGame] = useState<Game | null>(null);
  const [saving, setSaving] = useState(false);
  const [notice, setNotice] = useState<string | null>(null);
  const [blockers, setBlockers] = useState<string[]>([]);

  useEffect(() => {
    fetch(`/api/admin/games/${id}`)
      .then((r) => r.json())
      .then(setGame);
  }, [id]);

  if (!game) return <div className="mx-auto max-w-3xl px-4 py-8 text-bone-100/60">Loading…</div>;

  const { percent, missing } = computeCompleteness(game);

  async function save(status?: Game["status"]) {
    setSaving(true);
    setNotice(null);
    setBlockers([]);
    const res = await fetch(`/api/admin/games/${id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(status ? { ...game, status } : game),
    });
    setSaving(false);
    if (!res.ok) {
      const body = await res.json();
      setBlockers(body.missing ?? [body.error]);
      return;
    }
    const updated = await res.json();
    setGame(updated);
    setNotice(status ? `Status set to ${status}.` : "Saved.");
  }

  const update = <K extends keyof Game>(key: K, value: Game[K]) =>
    setGame((g) => (g ? { ...g, [key]: value } : g));

  return (
    <div className="mx-auto max-w-3xl px-4 py-8">
      <div className="flex items-center justify-between">
        <h1 className="font-display text-2xl font-semibold">{game.title || "Untitled game"}</h1>
        <span className="rounded-full bg-ink-800 px-3 py-1 text-xs capitalize">{game.status}</span>
      </div>

      <div className="mt-3 flex items-center gap-2">
        <div className="h-1.5 w-40 overflow-hidden rounded-full bg-ink-800">
          <div className="h-full bg-signal" style={{ width: `${percent}%` }} />
        </div>
        <span className="text-xs text-bone-100/60">{percent}% complete</span>
      </div>
      {missing.length > 0 && (
        <p className="mt-1 text-xs text-bone-100/50">Missing: {missing.join(", ")}</p>
      )}

      <div className="mt-6 space-y-5">
        <TextField label="Title" value={game.title} onChange={(v) => update("title", v)} />
        <TextField label="Slug" value={game.slug} onChange={(v) => update("slug", v)} />
        <TextField label="Verdict (one line)" value={game.verdict_short ?? ""} onChange={(v) => update("verdict_short", v)} />
        <TextArea label="Overview" value={game.overview ?? ""} onChange={(v) => update("overview", v)} rows={6} />
        <TextArea label="Gameplay & Mechanics" value={game.gameplay ?? ""} onChange={(v) => update("gameplay", v)} rows={5} />
        <TextArea label="Who It's For" value={game.who_its_for ?? ""} onChange={(v) => update("who_its_for", v)} rows={3} />

        <ArrayField label="Pros (one per line)" value={game.pros} onChange={(v) => update("pros", v)} />
        <ArrayField label="Cons (one per line)" value={game.cons} onChange={(v) => update("cons", v)} />

        <NumberField
          label="Editor score (0–10)"
          value={game.editor_score ?? undefined}
          onChange={(v) => update("editor_score", v ?? null)}
        />
      </div>

      {notice && <p className="mt-6 text-sm text-signal">{notice}</p>}
      {blockers.length > 0 && (
        <div className="mt-6 rounded border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300">
          <p className="font-medium">Can&rsquo;t publish yet:</p>
          <ul className="mt-1 list-disc pl-5">
            {blockers.map((b) => (
              <li key={b}>{b}</li>
            ))}
          </ul>
        </div>
      )}

      <div className="mt-8 flex gap-3">
        <button onClick={() => save()} disabled={saving} className="rounded bg-ink-800 px-4 py-2 text-sm font-medium">
          Save draft
        </button>
        <button
          onClick={() => save("ready")}
          disabled={saving}
          className="rounded bg-ink-800 px-4 py-2 text-sm font-medium"
        >
          Mark ready
        </button>
        <button
          onClick={() => save("published")}
          disabled={saving || percent < 100}
          className="rounded bg-signal px-4 py-2 text-sm font-semibold text-ink-950 disabled:opacity-40"
          title={percent < 100 ? "Complete all required fields first" : undefined}
        >
          Publish
        </button>
      </div>
    </div>
  );
}

function TextField({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
  return (
    <label className="block text-sm">
      <span className="mb-1 block text-bone-100/70">{label}</span>
      <input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="w-full rounded border border-ink-700 bg-ink-900 px-3 py-2"
      />
    </label>
  );
}

function TextArea({
  label,
  value,
  onChange,
  rows,
}: {
  label: string;
  value: string;
  onChange: (v: string) => void;
  rows: number;
}) {
  return (
    <label className="block text-sm">
      <span className="mb-1 block text-bone-100/70">{label}</span>
      <textarea
        value={value}
        rows={rows}
        onChange={(e) => onChange(e.target.value)}
        className="w-full rounded border border-ink-700 bg-ink-900 px-3 py-2"
      />
    </label>
  );
}

function ArrayField({ label, value, onChange }: { label: string; value: string[]; onChange: (v: string[]) => void }) {
  return (
    <label className="block text-sm">
      <span className="mb-1 block text-bone-100/70">{label}</span>
      <textarea
        value={value.join("\n")}
        rows={4}
        onChange={(e) => onChange(e.target.value.split("\n").filter(Boolean))}
        className="w-full rounded border border-ink-700 bg-ink-900 px-3 py-2"
      />
    </label>
  );
}

function NumberField({
  label,
  value,
  onChange,
}: {
  label: string;
  value: number | undefined;
  onChange: (v: number | null) => void;
}) {
  return (
    <label className="block text-sm">
      <span className="mb-1 block text-bone-100/70">{label}</span>
      <input
        type="number"
        min={0}
        max={10}
        step={0.1}
        value={value ?? ""}
        onChange={(e) => onChange(e.target.value === "" ? null : Number(e.target.value))}
        className="w-32 rounded border border-ink-700 bg-ink-900 px-3 py-2"
      />
    </label>
  );
}