"use client";

import { useActionState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { submitCharacterWishAction, deleteCharacterWishAction } from "@/lib/actions/characterWishes";
import { WISH_STATUS_COLORS, type WishStatus } from "@/lib/characterWishStatus";

type Wish = { id: string; character: string; fandom: string; note: string; status: WishStatus };

export function CharacterWishForm({
  wishes,
  labels,
}: {
  wishes: Wish[];
  labels: {
    characterLabel: string;
    fandomLabel: string;
    noteLabel: string;
    submit: string;
    empty: string;
    remove: string;
    statusLabels: Record<string, string>;
  };
}) {
  const [state, formAction, pending] = useActionState(submitCharacterWishAction, {});
  const [rowPending, startTransition] = useTransition();
  const router = useRouter();

  return (
    <div className="flex flex-col gap-8">
      <form action={formAction} className="border border-white/10 rounded-2xl p-5 flex flex-col gap-3">
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
          <label className="flex flex-col gap-1.5 text-xs">
            <span className="text-[var(--rk-ink-muted)]">{labels.characterLabel}</span>
            <input
              name="character"
              required
              className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
            />
          </label>
          <label className="flex flex-col gap-1.5 text-xs">
            <span className="text-[var(--rk-ink-muted)]">{labels.fandomLabel}</span>
            <input
              name="fandom"
              className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
            />
          </label>
        </div>
        <label className="flex flex-col gap-1.5 text-xs">
          <span className="text-[var(--rk-ink-muted)]">{labels.noteLabel}</span>
          <textarea
            name="note"
            rows={2}
            className="bg-transparent border border-white/15 rounded-lg px-3 py-2 text-sm focus:outline-none focus:border-white/50"
          />
        </label>
        {state.error && <p className="text-xs text-red-400">{state.error}</p>}
        <button
          type="submit"
          disabled={pending}
          className="self-start border border-white/30 rounded-lg px-5 py-2.5 text-xs uppercase tracking-[0.2em] hover:border-white hover:bg-white/5 transition-colors disabled:opacity-50"
        >
          {labels.submit}
        </button>
      </form>

      <div className="flex flex-col gap-2">
        {wishes.length === 0 ? (
          <p className="text-sm text-center text-[var(--rk-ink-muted)]">{labels.empty}</p>
        ) : (
          wishes.map((w) => (
            <div key={w.id} className="flex items-start justify-between gap-3 border border-white/10 rounded-lg px-4 py-3">
              <div className="min-w-0">
                <div className="flex flex-wrap items-center gap-2">
                  <p className="text-sm text-[var(--rk-ink)]">
                    {w.character}
                    {w.fandom && <span className="text-[var(--rk-ink-muted)]"> · {w.fandom}</span>}
                  </p>
                  <span
                    className="rounded-full border px-2 py-0.5 text-[0.6rem] uppercase tracking-[0.1em]"
                    style={{
                      color: WISH_STATUS_COLORS[w.status],
                      borderColor: `${WISH_STATUS_COLORS[w.status]}66`,
                    }}
                  >
                    {labels.statusLabels[w.status] ?? w.status}
                  </span>
                </div>
                {w.note && <p className="mt-1 text-xs text-[var(--rk-ink-muted)]">{w.note}</p>}
              </div>
              <button
                type="button"
                disabled={rowPending}
                onClick={() => {
                  startTransition(async () => {
                    await deleteCharacterWishAction(w.id);
                    router.refresh();
                  });
                }}
                className="text-xs text-red-400/80 hover:text-red-400 disabled:opacity-50 shrink-0"
              >
                {labels.remove}
              </button>
            </div>
          ))
        )}
      </div>
    </div>
  );
}