import { useState } from "react";
import { Link } from "react-router-dom";

import { Character } from "../api/characters";
import { useAuth } from "../hooks/useAuth";
import ConfirmDialog from "./ConfirmDialog";

export default function CharacterCard({
  character,
  onDelete,
}: {
  character: Character;
  onDelete?: (id: string) => void;
}) {
  const { user } = useAuth();
  const [confirming, setConfirming] = useState(false);
  const isOwner = user?.id === character.owner_id;

  function handleDeleteClick(e: React.MouseEvent) {
    e.preventDefault();
    e.stopPropagation();
    setConfirming(true);
  }

  return (
    <>
      <Link
        to={`/characters/${character.id}`}
        className="block rounded-lg border border-slate-800 bg-slate-900 p-4 hover:border-amber-500"
      >
        <div className="flex items-start justify-between gap-4">
          <h2 className="text-lg font-semibold text-slate-100">{character.name}</h2>
          {isOwner && onDelete && (
            <button
              onClick={handleDeleteClick}
              className="shrink-0 rounded px-2 py-1 text-xs text-red-400 hover:bg-red-500/10 hover:text-red-300"
            >
              Löschen
            </button>
          )}
        </div>
        <p className="text-sm text-slate-400">
          {character.race ?? "?"} · {character.char_class ?? "?"} · Stufe {character.level}
        </p>
      </Link>

      <ConfirmDialog
        open={confirming}
        title="Charakter löschen?"
        message={`„${character.name}" wird endgültig gelöscht. Spiele, in denen der Charakter mitgespielt hat, bleiben erhalten, verlieren aber die Verknüpfung zu ihm.`}
        confirmLabel="Endgültig löschen"
        onCancel={() => setConfirming(false)}
        onConfirm={() => {
          setConfirming(false);
          onDelete?.(character.id);
        }}
      />
    </>
  );
}