import { Archive, Copy, Eye, Files, Pencil, RotateCcw, Trash2 } from "lucide-react";
import Button from "@/components/ui/Button";
import type { MenuBoard, MenuBoardAction } from "@/components/business/menu-boards/types";
import {
  boardItemCount,
  boardSectionCount,
  getBoardType,
  statusStyles,
} from "@/components/business/menu-boards/menuBoardUtils";
import { useMenuBoardText } from "@/components/business/menu-boards/menuBoardI18n";

type Props = {
  boards: MenuBoard[];
  canManage: boolean;
  canArchive?: boolean;
  canRestore?: boolean;
  canDuplicate?: boolean;
  canDelete?: boolean;
  onAction: (action: MenuBoardAction, board: MenuBoard) => void;
  inTrash?: boolean;
};

export default function MenuBoardCardGrid({ boards, canManage, canArchive = canManage, canRestore = canManage, canDuplicate = canManage, canDelete = canManage, onAction, inTrash = false }: Props) {
  const t = useMenuBoardText();
  return (
    <section className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
      {boards.map((board) => {
        const type = getBoardType(board);

        return (
          <article
            key={board.id}
            role={inTrash ? undefined : "button"}
            tabIndex={inTrash ? undefined : 0}
            onClick={inTrash ? undefined : () => onAction("detail", board)}
            onKeyDown={(event) => {
              if (!inTrash && (event.key === "Enter" || event.key === " ")) onAction("detail", board);
            }}
            className={`group rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] p-4 transition ${inTrash ? "" : "cursor-pointer hover:-translate-y-0.5 hover:border-[var(--accent)] hover:shadow-[0_10px_30px_rgba(0,0,0,0.22)] focus:outline-none focus-visible:border-[var(--accent)] focus-visible:ring-2 focus-visible:ring-[var(--accent)]/30"}`}
          >
            <div className="block w-full text-left">
              <div className="flex items-start justify-between gap-3">
                <div className="min-w-0">
                  <h2 className="truncate text-base font-semibold text-[var(--text)]">{board.name}</h2>
                  <p className="mt-1 truncate text-xs text-[var(--text-faint)]">{board.location?.name ?? t("allLocations")}</p>
                </div>
                <span className={`shrink-0 rounded-full border px-2 py-0.5 text-[11px] font-medium ${inTrash ? "border-red-500/25 bg-red-500/10 text-red-300" : statusStyles[board.status]}`}>
                  {inTrash ? t("deleted") : board.status === "PUBLISHED" ? t("published") : board.status === "DRAFT" ? t("drafts") : t("archived")}
                </span>
              </div>
              <div className="mt-4 grid grid-cols-3 gap-2 text-center">
                <Metric label={t("type")} value={type === "MANUAL" ? t("manual") : type === "SCHEDULED" ? t("scheduled") : t("announcement")} />
                <Metric label={t("sections")} value={String(boardSectionCount(board))} />
                <Metric label={t("items")} value={String(boardItemCount(board))} />
              </div>
              <div className="mt-4 flex items-center justify-between gap-3 border-t border-[var(--border)] pt-3 text-xs text-[var(--text-muted)]">
                <span>{board.orientation === "LANDSCAPE" ? t("landscape") : t("portrait")}</span>
                <span className="text-[var(--text-faint)]">{inTrash ? t("inTrash") : t("editBoard")}</span>
              </div>
            </div>
            <div className="mt-4 flex items-center justify-between gap-2">
              <div className="flex items-center gap-1">
                {inTrash ? (
                  <Button type="button" variant="secondary" size="sm" disabled={!canRestore} onClick={(event) => { event.stopPropagation(); onAction("restore-deleted", board); }}>
                    <RotateCcw className="h-3.5 w-3.5" />
                    {t("restore")}
                  </Button>
                ) : (
                  <Button type="button" variant="secondary" size="sm" onClick={(event) => { event.stopPropagation(); onAction("detail", board); }}>
                    <Pencil className="h-3.5 w-3.5" />
                    {t("edit")}
                  </Button>
                )}
                {!inTrash && board.status === "PUBLISHED" && (
                  <QuickButton label={t("openLivePreview")} onClick={() => onAction("open", board)}>
                    <Eye className="h-4 w-4" />
                  </QuickButton>
                )}
              </div>
              <div className="flex items-center gap-1">
                {!inTrash && <QuickButton label={t("copyDisplayLink")} onClick={() => onAction("copy", board)}>
                  <Copy className="h-4 w-4" />
                </QuickButton>}
                {board.status !== "ARCHIVED" && (
                  <>
                    {canDuplicate && <QuickButton label={t("duplicateBoard")} onClick={() => onAction("duplicate", board)}><Files className="h-4 w-4" /></QuickButton>}
                    {canArchive && <QuickButton label={t("archiveBoard")} danger onClick={() => onAction("archive", board)}><Archive className="h-4 w-4" /></QuickButton>}
                  </>
                )}
                {canRestore && board.status === "ARCHIVED" && (
                  <QuickButton label={t("restoreBoard")} onClick={() => onAction("restore", board)}>
                    <RotateCcw className="h-4 w-4" />
                  </QuickButton>
                )}
                {canDelete && inTrash && (
                  <QuickButton label={t("deletePermanently")} danger onClick={() => onAction("purge", board)}>
                    <Trash2 className="h-4 w-4" />
                  </QuickButton>
                )}
              </div>
            </div>
          </article>
        );
      })}
    </section>
  );
}

function Metric({ label, value }: { label: string; value: string }) {
  return (
    <div className="min-w-0 rounded-lg border border-[var(--border)] bg-[var(--bg)] px-2 py-2">
      <p className="truncate text-[10px] uppercase tracking-wide text-[var(--text-faint)]">{label}</p>
      <p className="mt-1 truncate text-xs font-semibold text-[var(--text)]">{value}</p>
    </div>
  );
}

function QuickButton({ label, danger, onClick, children }: { label: string; danger?: boolean; onClick: () => void; children: React.ReactNode }) {
  return (
    <button
      type="button"
      aria-label={label}
      title={label}
      onClick={(event) => {
        event.stopPropagation();
        onClick();
      }}
      className={`grid h-9 w-9 place-items-center rounded-lg border border-transparent text-[var(--text-muted)] transition hover:border-[var(--border)] hover:bg-[var(--bg-hover)] hover:text-[var(--text)] ${
        danger ? "hover:border-red-500/20 hover:bg-red-500/10 hover:text-red-400" : ""
      }`}
    >
      {children}
    </button>
  );
}