import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { cn } from "@/lib/cn";
import type { WorldListItem, WorldStatus } from "@/types";
import { Button } from "@/components/ui/Button";

export interface WorldCardProps {
  world: WorldListItem;
  onDelete?: (world: WorldListItem) => void;
  className?: string;
}

const STATUS_BADGE: Record<WorldStatus, string> = {
  draft: "bg-warn/15 text-warn",
  building: "bg-accent/15 text-accent",
  ready: "bg-ok/15 text-ok",
  failed: "bg-err/15 text-err",
  archived: "bg-fg-dim/15 text-fg-muted",
};

const STATUS_LABEL_KEY: Record<WorldStatus, string> = {
  draft: "worlds.status_draft",
  building: "worlds.status_building",
  ready: "worlds.status_ready",
  failed: "worlds.status_failed",
  archived: "worlds.status_archived",
};

export function WorldCard({ world, onDelete, className }: WorldCardProps) {
  const { t } = useTranslation();
  const navigate = useNavigate();

  const isReady = world.status === "ready";

  return (
    <article
      className={cn(
        "card flex flex-col gap-2 hover:border-accent/40 transition-colors",
        className,
      )}
    >
      <header className="flex items-start justify-between gap-2">
        <div className="min-w-0">
          <h3 className="text-base font-semibold text-fg truncate">{world.name}</h3>
          <p className="text-xs text-fg-muted uppercase tracking-wide">{world.language}</p>
        </div>
        <span className={cn("badge shrink-0", STATUS_BADGE[world.status])}>
          {t(STATUS_LABEL_KEY[world.status])}
        </span>
      </header>

      <p className="text-sm text-fg-muted line-clamp-2 min-h-[2.5rem]">
        {world.description || "—"}
      </p>

      <dl className="grid grid-cols-2 gap-2 text-xs">
        <div>
          <dt className="text-fg-dim">{t("worlds.player")}</dt>
          <dd className="text-fg truncate">{world.preview_player_name || "—"}</dd>
        </div>
        <div>
          <dt className="text-fg-dim">{t("worlds.current_time")}</dt>
          <dd className="text-fg truncate">{world.current_time || "—"}</dd>
        </div>
        <div className="col-span-2">
          <dt className="text-fg-dim">{t("worlds.last_played")}</dt>
          <dd className="text-fg">{world.last_played_at ? formatDate(world.last_played_at) : t("worlds.never_played")}</dd>
        </div>
      </dl>

      <footer className="mt-2 flex gap-2">
        <Button
          size="sm"
          variant={isReady ? "primary" : "secondary"}
          onClick={() => navigate(`/worlds/${world.id}/play`)}
          disabled={!isReady}
          fullWidth
        >
          {t("worlds.play")}
        </Button>
        <Button
          size="sm"
          variant="secondary"
          onClick={() => navigate(`/worlds/${world.id}/edit`)}
        >
          {t("worlds.edit")}
        </Button>
        {onDelete && (
          <Button
            size="sm"
            variant="ghost"
            onClick={() => onDelete(world)}
            aria-label={t("common.delete")}
          >
            🗑
          </Button>
        )}
      </footer>
    </article>
  );
}

function formatDate(iso: string): string {
  try {
    const d = new Date(iso);
    return d.toLocaleString();
  } catch {
    return iso;
  }
}