import { useState, type FormEvent } from "react";
import { NavLink, Navigate, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";

import type { components } from "../api/schema";
import { useAuthorities, useCreateAuthority } from "../api/queries";
import { LabelEditor } from "../components/label-editor";
import { Button } from "@/components/ui/button";
import { labelText } from "../lib/labels";

type LabelInput = components["schemas"]["LabelInput"];

const KINDS = ["person", "organisation", "place"] as const;

export function AuthoritiesPage() {
  const { t, i18n } = useTranslation();
  const { kind } = useParams();
  const lang = i18n.language.startsWith("sv") ? "sv" : "en";

  const isValidKind = (KINDS as readonly string[]).includes(kind ?? "");

  const { data: authorities } = useAuthorities(isValidKind ? (kind as string) : "person");
  const create = useCreateAuthority();

  const [labels, setLabels] = useState<LabelInput[]>([]);
  const [error, setError] = useState(false);

  if (!isValidKind) return <Navigate to="/authorities/person" replace />;

  const onCreate = (event: FormEvent) => {
    event.preventDefault();

    if (!labels.some((l) => l.lang === "en" && l.label)) {
      setError(true);
      return;
    }

    setError(false);
    create.mutate(
      { kind: kind as string, external_uri: null, labels },
      { onSuccess: () => setLabels([]) },
    );
  };

  return (
    <div className="overflow-auto p-4">
      <div className="mb-3 flex gap-2">
        {KINDS.map((k) => (
          <NavLink
            key={k}
            to={`/authorities/${k}`}
            className={({ isActive }) =>
              `rounded px-3 py-1 text-sm ${isActive ? "bg-neutral-800 text-white" : "border"}`
            }
          >
            {t(`authorities.${k}`)}
          </NavLink>
        ))}
      </div>

      <ul className="mb-4">
        {authorities?.length === 0 && (
          <li className="text-sm text-neutral-500">{t("authorities.empty")}</li>
        )}
        {authorities?.map((a) => (
          <li key={a.id} className="border-b py-1 text-sm">
            {labelText(a.labels, lang)}
          </li>
        ))}
      </ul>

      <form onSubmit={onCreate} className="space-y-2 border-t pt-3">
        <div className="text-sm font-medium">
          {t("authorities.new")} · {t(`authorities.${kind}`)}
        </div>

        <LabelEditor value={labels} onChange={setLabels} />

        {error && (
          <p role="alert" className="text-xs text-red-600">
            {t("form.required")}
          </p>
        )}

        {create.isError && (
          <p role="alert" className="text-xs text-red-600">
            {t("form.rejected")}
          </p>
        )}

        <Button type="submit" size="sm" disabled={create.isPending}>
          {t("authorities.create")}
        </Button>
      </form>
    </div>
  );
}