"use client";

import Link from "next/link";
import { useMemo, useState } from "react";
import {
  insertSetting,
  deleteSetting,
  updateSetting,
} from "@/app/actions/settings-actions";
import {
  coinsToRc,
  parseStoredCoins,
  rcToCoins,
} from "@/lib/coins-rc";
import type { DbSetting } from "@/types/database";

type Props = {
  rows: DbSetting[];
  saveError: boolean;
  addError: string | null;
  readOnly?: boolean;
};

function ReadOnlySettingRow({ row }: { row: DbSetting }) {
  return (
    <div className="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
      <p className="font-mono text-sm text-zinc-900 dark:text-zinc-100">
        {row.key}
      </p>
      <p className="mt-2 break-all text-sm text-zinc-700 dark:text-zinc-300">
        {row.value?.trim() ? row.value : "—"}
      </p>
    </div>
  );
}

function DefaultSettingRow({ row, index }: { row: DbSetting; index: number }) {
  const [value, setValue] = useState(row.value ?? "");
  const saveDisabled = value.trim() === "";

  return (
    <div className="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
      <form action={updateSetting}>
        <input type="hidden" name="key" value={row.key} />
        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
          <div className="min-w-0 flex-1">
            <label
              className="block text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400"
              htmlFor={`setting-value-${index}`}
            >
              <span className="font-mono text-sm normal-case tracking-normal text-zinc-900 dark:text-zinc-100">
                {row.key}
              </span>
            </label>
            <input
              id={`setting-value-${index}`}
              name="value"
              type="text"
              value={value}
              onChange={(e) => setValue(e.target.value)}
              autoComplete="off"
              className="mt-1.5 w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100"
            />
          </div>
          <button
            type="submit"
            disabled={saveDisabled}
            className="shrink-0 rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-zinc-600 disabled:hover:bg-zinc-600 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200 dark:disabled:bg-zinc-700"
          >
            Save
          </button>
        </div>
      </form>

      <form action={deleteSetting} className="mt-4 flex justify-end">
        <input type="hidden" name="key" value={row.key} />
        <button
          type="submit"
          className="rounded-md border border-red-300 bg-white px-4 py-2 text-sm font-medium text-red-700 shadow-sm transition hover:bg-red-50 dark:border-red-900 dark:bg-zinc-950 dark:text-red-300 dark:hover:bg-red-950/40"
          onClick={(e) => {
            if (!window.confirm(`Delete setting "${row.key}"?`)) {
              e.preventDefault();
            }
          }}
        >
          Delete
        </button>
      </form>
    </div>
  );
}

function BetFeeRow({ row, index }: { row: DbSetting; index: number }) {
  const initial = Math.min(
    100,
    Math.max(0, Math.round(Number(row.value ?? 0))),
  );
  const [v, setV] = useState(initial);

  return (
    <div className="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
      <form action={updateSetting}>
        <input type="hidden" name="key" value={row.key} />
        <input type="hidden" name="value" value={String(v)} />
        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
          <div className="min-w-0 flex-1 space-y-3">
            <div>
              <label
                className="block text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400"
                htmlFor={`bet-fee-${index}`}
              >
                <span className="font-mono text-sm normal-case tracking-normal text-zinc-900 dark:text-zinc-100">
                  {row.key}
                </span>
              </label>
              <p className="mt-1 text-xs text-zinc-500 dark:text-zinc-400">
                0–100 (saved as the number shown).
              </p>
            </div>
            <div className="flex flex-wrap items-center gap-4">
              <input
                id={`bet-fee-${index}`}
                type="range"
                min={0}
                max={100}
                value={v}
                onChange={(e) => setV(Number(e.target.value))}
                className="h-2 w-full min-w-[200px] max-w-md cursor-pointer accent-zinc-900 dark:accent-zinc-100"
              />
              <span className="min-w-[3ch] tabular-nums text-sm font-semibold text-zinc-900 dark:text-zinc-50">
                {v}
              </span>
            </div>
          </div>
          <button
            type="submit"
            className="shrink-0 rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
          >
            Save
          </button>
        </div>
      </form>

      <form action={deleteSetting} className="mt-4 flex justify-end">
        <input type="hidden" name="key" value={row.key} />
        <button
          type="submit"
          className="rounded-md border border-red-300 bg-white px-4 py-2 text-sm font-medium text-red-700 shadow-sm transition hover:bg-red-50 dark:border-red-900 dark:bg-zinc-950 dark:text-red-300 dark:hover:bg-red-950/40"
          onClick={(e) => {
            if (!window.confirm(`Delete setting "${row.key}"?`)) {
              e.preventDefault();
            }
          }}
        >
          Delete
        </button>
      </form>
    </div>
  );
}

function EntryFeeRow({ row, index }: { row: DbSetting; index: number }) {
  const initialCoins = parseStoredCoins(row.value);
  const initialRc = coinsToRc(initialCoins);
  const [rcText, setRcText] = useState(() => initialRc.toFixed(1));
  const [localError, setLocalError] = useState<string | null>(null);

  const coinsPreview = useMemo(() => {
    const t = rcText.trim();
    if (t === "") return null;
    return rcToCoins(Number(t));
  }, [rcText]);

  const saveDisabled = rcText.trim() === "";

  return (
    <div className="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
      <form
        action={updateSetting}
        onSubmit={(e) => {
          setLocalError(null);
          const trimmed = rcText.trim();
          if (trimmed === "") {
            e.preventDefault();
            setLocalError(
              "Enter an RC value (one decimal place; tenths digit 0–3).",
            );
            return;
          }
          const rc = Number(trimmed);
          const coins = rcToCoins(rc);
          if (coins === null) {
            e.preventDefault();
            setLocalError(
              "Enter a valid RC with one decimal place; the tenths digit must be 0–3 (e.g. 5.1).",
            );
          }
        }}
      >
        <input type="hidden" name="key" value={row.key} />
        <input
          type="hidden"
          name="value"
          value={coinsPreview === null ? "" : String(coinsPreview)}
        />
        <div className="flex flex-col gap-4 sm:flex-row sm:items-end">
          <div className="min-w-0 flex-1">
            <label
              className="block text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400"
              htmlFor={`entry-fee-rc-${index}`}
            >
              <span className="font-mono text-sm normal-case tracking-normal text-zinc-900 dark:text-zinc-100">
                {row.key}
              </span>
              <span className="ml-2 font-normal normal-case text-zinc-500 dark:text-zinc-400">
                (edit as RC; stored as coins)
              </span>
            </label>
            <input
              id={`entry-fee-rc-${index}`}
              type="text"
              inputMode="decimal"
              autoComplete="off"
              value={rcText}
              onChange={(e) => setRcText(e.target.value)}
              className="mt-1.5 w-full max-w-xs rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100"
            />
            {localError ? (
              <p
                className="mt-2 text-sm text-red-600 dark:text-red-400"
                role="alert"
              >
                {localError}
              </p>
            ) : coinsPreview !== null ? (
              <p className="mt-2 text-xs text-zinc-500 dark:text-zinc-400">
                Saves as {coinsPreview} coin{coinsPreview === 1 ? "" : "s"} in
                the database.
              </p>
            ) : rcText.trim() !== "" ? (
              <p className="mt-2 text-xs text-amber-700 dark:text-amber-300">
                Not a valid RC encoding yet — fix the value to save.
              </p>
            ) : null}
          </div>
          <button
            type="submit"
            disabled={saveDisabled}
            className="shrink-0 rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-zinc-800 disabled:cursor-not-allowed disabled:bg-zinc-600 disabled:hover:bg-zinc-600 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200 dark:disabled:bg-zinc-700"
          >
            Save
          </button>
        </div>
      </form>

      <form action={deleteSetting} className="mt-4 flex justify-end">
        <input type="hidden" name="key" value={row.key} />
        <button
          type="submit"
          className="rounded-md border border-red-300 bg-white px-4 py-2 text-sm font-medium text-red-700 shadow-sm transition hover:bg-red-50 dark:border-red-900 dark:bg-zinc-950 dark:text-red-300 dark:hover:bg-red-950/40"
          onClick={(e) => {
            if (!window.confirm(`Delete setting "${row.key}"?`)) {
              e.preventDefault();
            }
          }}
        >
          Delete
        </button>
      </form>
    </div>
  );
}

function SettingRow({ row, index }: { row: DbSetting; index: number }) {
  if (row.key === "bet_fee") {
    return <BetFeeRow row={row} index={index} />;
  }
  if (row.key === "entry_fee") {
    return <EntryFeeRow row={row} index={index} />;
  }
  return <DefaultSettingRow row={row} index={index} />;
}

export function AdminSettingsEditor({
  rows,
  saveError,
  addError,
  readOnly = false,
}: Props) {
  const [newKey, setNewKey] = useState("");
  const [newValue, setNewValue] = useState("");

  if (readOnly) {
    return (
      <div className="mx-auto w-full max-w-[900px] space-y-8">
        <div
          className="rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-950 dark:border-amber-900 dark:bg-amber-950/40 dark:text-amber-100"
          role="status"
        >
          Settings are view-only for your account. Contact an admin to make
          changes.
        </div>

        <section className="space-y-3">
          <h2 className="text-sm font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
            Existing keys
          </h2>
          {rows.length === 0 ? (
            <p className="rounded-xl border border-zinc-200 bg-white px-4 py-8 text-center text-sm text-zinc-500 shadow-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400">
              No settings rows yet.
            </p>
          ) : (
            <div className="space-y-3">
              {rows.map((row) => (
                <ReadOnlySettingRow key={row.key} row={row} />
              ))}
            </div>
          )}
        </section>

        <p className="text-center text-xs text-zinc-500 dark:text-zinc-400">
          <Link
            href="/"
            className="font-medium text-sky-700 underline decoration-sky-400/60 underline-offset-2 hover:text-sky-900 dark:text-sky-300 dark:hover:text-sky-100"
            scroll={false}
          >
            Back to dashboard
          </Link>
        </p>
      </div>
    );
  }

  return (
    <div className="mx-auto w-full max-w-[900px] space-y-8">
      {saveError ? (
        <div
          className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-900 dark:border-red-900 dark:bg-red-950/40 dark:text-red-100"
          role="alert"
        >
          Could not save that row. Try again or check Supabase connectivity.
        </div>
      ) : null}

      <section className="space-y-3">
        <h2 className="text-sm font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
          Existing keys
        </h2>
        {rows.length === 0 ? (
          <p className="rounded-xl border border-zinc-200 bg-white px-4 py-8 text-center text-sm text-zinc-500 shadow-sm dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-400">
            No settings rows yet. Add one below.
          </p>
        ) : (
          <div className="space-y-3">
            {rows.map((row, i) => (
              <SettingRow key={row.key} row={row} index={i} />
            ))}
          </div>
        )}
      </section>

      <section className="rounded-xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900">
        <h2 className="text-sm font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
          Add setting
        </h2>

        {addError === "duplicate" ? (
          <p className="mt-3 text-sm text-red-600 dark:text-red-400">
            That key already exists. Edit it in the list above instead.
          </p>
        ) : addError === "missing" ? (
          <p className="mt-3 text-sm text-red-600 dark:text-red-400">
            Enter a non-empty key.
          </p>
        ) : addError === "missingValue" ? (
          <p className="mt-3 text-sm text-red-600 dark:text-red-400">
            Enter a non-empty value.
          </p>
        ) : addError === "config" ? (
          <p className="mt-3 text-sm text-red-600 dark:text-red-400">
            Supabase admin client is not configured.
          </p>
        ) : addError === "other" ? (
          <p className="mt-3 text-sm text-red-600 dark:text-red-400">
            Could not insert. Check constraints and retry.
          </p>
        ) : null}

        <form action={insertSetting} className="mt-4 flex flex-col gap-4">
          <div>
            <label
              htmlFor="new-setting-key"
              className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
            >
              Key
            </label>
            <input
              id="new-setting-key"
              name="newKey"
              type="text"
              value={newKey}
              onChange={(e) => setNewKey(e.target.value)}
              autoComplete="off"
              placeholder="e.g. maintenance_message"
              className="mt-1 w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100"
            />
          </div>
          <div>
            <label
              htmlFor="new-setting-value"
              className="block text-sm font-medium text-zinc-700 dark:text-zinc-300"
            >
              Value
            </label>
            <input
              id="new-setting-value"
              name="newValue"
              type="text"
              value={newValue}
              onChange={(e) => setNewValue(e.target.value)}
              autoComplete="off"
              className="mt-1 w-full rounded-md border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-1 focus:ring-sky-500 dark:border-zinc-600 dark:bg-zinc-950 dark:text-zinc-100"
            />
          </div>
          <div className="flex justify-end">
            <button
              type="submit"
              disabled={newKey.trim() === "" || newValue.trim() === ""}
              className="rounded-md bg-zinc-900 px-4 py-2 text-sm font-medium text-white shadow-sm transition hover:bg-zinc-800 dark:bg-zinc-100 dark:text-zinc-900 dark:hover:bg-zinc-200"
            >
              Add row
            </button>
          </div>
        </form>
      </section>

      <p className="text-center text-xs text-zinc-500 dark:text-zinc-400">
        <Link
          href="/"
          className="font-medium text-sky-700 underline decoration-sky-400/60 underline-offset-2 hover:text-sky-900 dark:text-sky-300 dark:hover:text-sky-100"
          scroll={false}
        >
          Back to dashboard
        </Link>
      </p>
    </div>
  );
}