"use client";

import { useState } from "react";

import { ChevronRightIcon, XIcon } from "@/components/icons";
import { Button } from "@/components/ui";
import { homeworkModeLabelKey } from "@/lib/homework";
import { useI18n } from "@/lib/i18n";
import type { HomeworkRecord } from "@/lib/schemas";

/** Small history list under the input: open a past result or delete it. */
export function HomeworkHistory({
  records,
  onOpen,
  onDelete,
}: {
  records: HomeworkRecord[];
  onOpen: (record: HomeworkRecord) => void;
  onDelete: (id: string) => void;
}) {
  const { locale, t } = useI18n();
  const [confirmId, setConfirmId] = useState<string | null>(null);

  if (records.length === 0) return null;

  return (
    <section className="space-y-2">
      <h2 className="text-[15px] font-semibold tracking-[-0.01em] text-[var(--text)]">
        {t("homework.history.title")}
      </h2>
      <ul className="list-group">
        {records.map((record) =>
          confirmId === record.id ? (
            <li key={record.id} className="flex flex-wrap items-center justify-between gap-2 px-3 py-2.5">
              <span className="text-[12.5px] font-medium text-[var(--text-muted)]">
                {t("homework.history.deleteConfirm")}
              </span>
              <span className="flex shrink-0 items-center gap-1">
                <Button
                  size="sm"
                  variant="danger"
                  className="touch-target"
                  onClick={() => {
                    onDelete(record.id);
                    setConfirmId(null);
                  }}
                >
                  {t("common.delete")}
                </Button>
                <Button size="sm" variant="ghost" className="touch-target" onClick={() => setConfirmId(null)}>
                  {t("common.cancel")}
                </Button>
              </span>
            </li>
          ) : (
            <li key={record.id} className="flex items-center gap-1 px-1.5 py-1.5">
              <button
                type="button"
                onClick={() => onOpen(record)}
                aria-label={t("homework.history.openTitle", { title: record.title })}
                className="flex min-w-0 flex-1 items-center gap-3 rounded-xl px-2 py-1.5 text-left transition hover:bg-[var(--hover)]"
              >
                <span className="min-w-0 flex-1">
                  <span className="block truncate text-[13.5px] font-medium text-[var(--text)]">{record.title}</span>
                  <span className="block text-[11.5px] text-[var(--text-subtle)]">
                    {t(homeworkModeLabelKey(record.mode))} ·{" "}
                    {new Date(record.updatedAt).toLocaleDateString(locale === "cs" ? "cs-CZ" : "en-US", {
                      day: "numeric",
                      month: "short",
                    })}
                  </span>
                </span>
                <ChevronRightIcon className="size-4 shrink-0 text-[var(--text-subtle)]" />
              </button>
              <button
                type="button"
                onClick={() => setConfirmId(record.id)}
                aria-label={`${t("common.delete")} — ${record.title}`}
                className="touch-target grid size-9 shrink-0 place-items-center rounded-lg text-[var(--text-subtle)] transition hover:bg-[var(--hover)] hover:text-rose-600 dark:hover:text-rose-300"
              >
                <XIcon className="size-4" />
              </button>
            </li>
          ),
        )}
      </ul>
    </section>
  );
}