"use client";

import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";

type Result = { ok: boolean; error?: string };
type ButtonProps = {
  id: string;
  path: string;
  resolved: boolean;
  autoCreate: (input: {
    fromPath: string;
    toPath: string;
    statusCode?: number;
  }) => Promise<Result>;
  resolve: (id: string) => Promise<Result>;
  del: (id: string) => Promise<Result>;
};

export function Buttons({ id, path, resolved, autoCreate, resolve, del }: ButtonProps) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();
  const [showForm, setShowForm] = useState(false);
  const [target, setTarget] = useState("/");
  const [statusCode, setStatusCode] = useState(301);
  const [err, setErr] = useState<string | null>(null);

  function run(fn: () => Promise<Result>) {
    setErr(null);
    startTransition(async () => {
      const r = await fn();
      if (!r.ok) setErr(r.error ?? "Lỗi.");
      else router.refresh();
    });
  }

  if (showForm) {
    return (
      <div className="flex flex-col gap-1.5 items-end">
        <div className="flex gap-1.5">
          <input
            type="text"
            value={target}
            onChange={(e) => setTarget(e.target.value)}
            placeholder="/path-mới"
            className="text-xs px-2 py-1 rounded bg-bg-elevated border border-stroke-subtle w-40 font-mono"
          />
          <select
            value={statusCode}
            onChange={(e) => setStatusCode(parseInt(e.target.value, 10))}
            className="text-xs px-2 py-1 rounded bg-bg-elevated border border-stroke-subtle"
          >
            <option value={301}>301</option>
            <option value={302}>302</option>
            <option value={307}>307</option>
            <option value={308}>308</option>
          </select>
          <button
            type="button"
            onClick={() =>
              run(() => autoCreate({ fromPath: path, toPath: target, statusCode }))
            }
            disabled={pending}
            className="text-xs px-2 py-1 rounded bg-emerald-500/15 text-emerald-300 hover:bg-emerald-500/25 disabled:opacity-50"
          >
            Lưu
          </button>
          <button
            type="button"
            onClick={() => setShowForm(false)}
            className="text-xs px-2 py-1 rounded text-ink-muted hover:text-ink-primary"
          >
            Hủy
          </button>
        </div>
        {err && <span className="text-xs text-rose-300">{err}</span>}
      </div>
    );
  }

  return (
    <div className="flex gap-1.5 justify-end">
      {!resolved && (
        <button
          type="button"
          onClick={() => setShowForm(true)}
          className="text-xs px-2.5 py-1 rounded bg-emerald-500/15 text-emerald-300 hover:bg-emerald-500/25"
        >
          + Redirect
        </button>
      )}
      {!resolved && (
        <button
          type="button"
          onClick={() => run(() => resolve(id))}
          disabled={pending}
          className="text-xs px-2.5 py-1 rounded bg-bg-elevated border border-stroke-subtle text-ink-secondary hover:border-accent-primary/40 disabled:opacity-50"
        >
          ✓ Bỏ qua
        </button>
      )}
      <button
        type="button"
        onClick={() => {
          if (confirm("Xóa log này?")) run(() => del(id));
        }}
        disabled={pending}
        className="text-xs px-2.5 py-1 rounded text-rose-300 hover:bg-rose-500/15 disabled:opacity-50"
      >
        Xóa
      </button>
      {err && <span className="text-xs text-rose-300 self-center">{err}</span>}
    </div>
  );
}