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

import { Game } from "../api/games";

export default function GameCard({ game }: { game: Game }) {
  const created = new Date(game.created_at).toLocaleString("de-DE");
  const [copied, setCopied] = useState(false);

  async function handleCopyLink(e: React.MouseEvent) {
    e.preventDefault();
    e.stopPropagation();
    const link = `${window.location.origin}/games/${game.id}?code=${game.participation_code}`;
    await navigator.clipboard.writeText(link);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  }

  return (
    <Link
      to={`/games/${game.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">{game.name}</h2>
        {game.status === "ended" && (
          <span className="shrink-0 rounded bg-slate-700 px-2 py-1 text-xs font-semibold text-slate-300">
            Beendet
          </span>
        )}
        {game.participation_code && (
          <button
            onClick={handleCopyLink}
            title="Einladungslink kopieren"
            className="flex shrink-0 items-center gap-1.5 rounded bg-amber-500/20 px-2 py-1 font-mono text-xs text-amber-300 hover:bg-amber-500/30"
          >
            Code: {game.participation_code}
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth={2}
              className="h-3.5 w-3.5"
            >
              <rect x="9" y="9" width="11" height="11" rx="1.5" />
              <path d="M5 15V5a2 2 0 0 1 2-2h10" />
            </svg>
            {copied && <span className="text-emerald-400">Kopiert!</span>}
          </button>
        )}
      </div>
      <p className="mt-1 text-sm text-slate-400">{game.description}</p>
      <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-500">
        <span>Erstellt: {created}</span>
        <span>Von: {game.creator_name}</span>
        <span>
          {game.player_count} Spieler
          {game.player_names.length > 0 && `: ${game.player_names.join(", ")}`}
        </span>
        {game.has_adventure && <span>📖 Eigenes Abenteuer</span>}
      </div>
    </Link>
  );
}