"use client";

import { useState } from "react";
import Link from "next/link";
import { Play, Pencil, Trash2, Eye, EyeOff } from "lucide-react";
import { TEMPLATE_LABELS } from "@/lib/games/types";
import type { GameSummaryDTO } from "@/lib/games/service";

export function MyGamesList({ initialGames }: { initialGames: GameSummaryDTO[] }) {
  const [games, setGames] = useState(initialGames);
  const [error, setError] = useState<string | null>(null);

  async function togglePublish(game: GameSummaryDTO) {
    setError(null);
    const nextStatus = game.status === "published" ? "draft" : "published";
    const res = await fetch(`/api/games/${game.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ status: nextStatus }),
    });
    if (!res.ok) {
      setError("Не удалось изменить статус публикации");
      return;
    }
    setGames((gs) => gs.map((g) => (g.id === game.id ? { ...g, status: nextStatus } : g)));
  }

  async function handleDelete(id: string) {
    setError(null);
    const res = await fetch(`/api/games/${id}`, { method: "DELETE" });
    if (!res.ok) {
      setError("Не удалось удалить игру");
      return;
    }
    setGames((gs) => gs.filter((g) => g.id !== id));
  }

  if (games.length === 0) {
    return <p className="text-sm text-text-muted">Вы ещё не создали ни одной игры.</p>;
  }

  return (
    <div className="flex flex-col gap-3">
      {error && <p className="rounded-md bg-danger-soft px-3 py-2 text-sm text-danger-soft-text">{error}</p>}
      {games.map((game) => (
        <div key={game.id} className="card flex flex-wrap items-center gap-3 p-4">
          <div className="min-w-0 flex-1">
            <div className="mb-1 flex items-center gap-2">
              <span className="badge">{TEMPLATE_LABELS[game.templateType]}</span>
              <span
                className={`badge ${
                  game.status === "published" ? "bg-success-soft text-success-soft-text" : "bg-surface-hover text-text-muted"
                }`}
              >
                {game.status === "published" ? "Опубликовано" : "Черновик"}
              </span>
            </div>
            <p className="truncate font-medium">{game.title}</p>
            <p className="text-xs text-text-faint">{game.playCount} игр сыграно</p>
          </div>

          <Link href={`/play/${game.id}`} className="btn btn-ghost" title="Играть">
            <Play size={14} />
          </Link>
          <Link href={`/my-games/${game.id}/edit`} className="btn btn-ghost" title="Редактировать">
            <Pencil size={14} />
          </Link>
          <button
            onClick={() => togglePublish(game)}
            className="btn btn-ghost"
            title={game.status === "published" ? "Снять с публикации" : "Опубликовать"}
          >
            {game.status === "published" ? <EyeOff size={14} /> : <Eye size={14} />}
          </button>
          <button onClick={() => handleDelete(game.id)} className="btn btn-ghost text-danger" title="Удалить">
            <Trash2 size={14} />
          </button>
        </div>
      ))}
    </div>
  );
}