import { useState } from "react";
import { useTranslation } from "react-i18next";

import type { components } from "../api/schema";
import { useUpdateAuthority, useDeleteAuthority } from "../api/queries";
import { LabelEditor } from "../components/label-editor";
import { DeleteConfirmDialog } from "../components/delete-confirm-dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { labelText } from "../lib/labels";

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

export function AuthorityRow({ authority, kind, lang }: { authority: AuthorityView; kind: string; lang: string }) {
  const { t } = useTranslation();

  const updateAuthority = useUpdateAuthority();
  const deleteAuthority = useDeleteAuthority();

  const [editing, setEditing] = useState(false);
  const [labels, setLabels] = useState<LabelInput[]>(authority.labels as LabelInput[]);
  const [uri, setUri] = useState(authority.external_uri ?? "");

  if (editing) {
    return (
      <li className="space-y-2 border-b py-2">
        <LabelEditor value={labels} onChange={setLabels} />
        <div className="space-y-1">
          <Label htmlFor={`auth-uri-${authority.id}`}>{t("labels.externalUri")}</Label>
          <Input id={`auth-uri-${authority.id}`} value={uri} onChange={(e) => setUri(e.target.value)} />
        </div>
        <div className="flex gap-2">
          <Button
            type="button"
            size="sm"
            disabled={updateAuthority.isPending}
            onClick={() =>
              updateAuthority.mutate(
                { id: authority.id, kind, external_uri: uri.trim() || null, labels },
                { onSuccess: () => setEditing(false) },
              )
            }
          >
            {t("actions.save")}
          </Button>
          <Button type="button" variant="ghost" size="sm" onClick={() => setEditing(false)}>
            {t("form.cancel")}
          </Button>
        </div>
      </li>
    );
  }

  return (
    <li className="flex items-center gap-2 border-b py-1 text-sm">
      <span className="flex-1">{labelText(authority.labels, lang)}</span>
      <Button
        type="button"
        variant="ghost"
        size="sm"
        onClick={() => {
          setLabels(authority.labels as LabelInput[]);
          setUri(authority.external_uri ?? "");
          setEditing(true);
        }}
      >
        {t("actions.edit")}
      </Button>
      <DeleteConfirmDialog
        description={t("actions.confirmDeleteAuthority")}
        onConfirm={() => deleteAuthority.mutateAsync({ id: authority.id, kind })}
      />
    </li>
  );
}