freezmo/components/HomeworkCard.tsx

"use client";

import { motion } from "framer-motion";
import Link from "next/link";
import { useState } from "react";

import { BoltIcon, CheckCircleIcon, ChevronDownIcon, PlayIcon, XIcon } from "@/components/icons";
import { Button } from "@/components/ui";
import { homeworkModeLabelKey } from "@/lib/homework";
import { useI18n } from "@/lib/i18n";
import { springGentle } from "@/lib/motion";
import type { HomeworkRecord } from "@/lib/schemas";
import { useIsPhone } from "@/lib/use-phone";
import { cn, formatDate, truncate } from "@/lib/utils";

/**
 * One saved homework result in the library's Homework tab: the finished
 * solution or the step-by-step guide, with open + delete.
 */
export function HomeworkCard({
  record,
  onDelete,
  index = 0,
}: {
  record: HomeworkRecord;
  onDelete: (id: string) => void;
  /** Position in the list — used for the capped first-load stagger. */
  index?: number;
}) {
  const { t, plural } = useI18n();
  const isPhone = useIsPhone();
  const [confirmDelete, setConfirmDelete] = useState(false);
  const [expanded, setExpanded] = useState(false);
  const href = `/homework?open=${record.id}`;

  const cardVariants = {
    hidden: { opacity: 0, y: 12 },
    show: { opacity: 1, y: 0, transition: { ...springGentle, delay: Math.min(index, 8) * 0.04 } },
    exit: { opacity: 0, scale: 0.97, transition: { duration: 0.16 } },
  };

  const preview =
    record.mode === "make"
      ? truncate(record.answer.replace(/\s+/g, " ").trim(), 150)
      : record.mode === "check"
        ? truncate(record.verdict.replace(/\s+/g, " ").trim(), 150)
        : truncate(
            record.steps.map((step) => step.title).join(" · "),
            150,
          );

  return (
    <motion.li
      layout={isPhone}
      variants={isPhone ? cardVariants : undefined}
      initial={isPhone ? "hidden" : false}
      animate={isPhone ? "show" : undefined}
      exit={isPhone ? "exit" : undefined}
      className="card card-hover group relative flex flex-col p-4 sm:p-5"
    >
      {/* Phones: the whole card opens the result too; the delete button sits above it. */}
      <Link href={href} aria-hidden="true" tabIndex={-1} className="absolute inset-0 hidden rounded-[1.5rem] max-sm:block lg:block" />

      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0 flex-1">
          <h2
            className="line-clamp-2 text-[15px] font-semibold leading-snug tracking-[-0.01em] text-[var(--text)]"
            title={record.title}
          >
            {truncate(record.title, 90)}
          </h2>
          <p className="mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-[12.5px] text-[var(--text-subtle)]">
            <span className="inline-flex items-center gap-1">
              {record.mode === "make" ? (
                <BoltIcon className="size-3.5" />
              ) : record.mode === "check" ? (
                <CheckCircleIcon className="size-3.5" />
              ) : (
                <PlayIcon className="size-3.5" />
              )}
              {t(homeworkModeLabelKey(record.mode))}
            </span>
            <span aria-hidden>·</span>
            {formatDate(record.updatedAt)}
            {record.mode === "guide" ? (
              <>
                <span aria-hidden>·</span>
                {plural(record.steps.length, "homework.steps")}
              </>
            ) : null}
          </p>
        </div>
        <button
          type="button"
          aria-label={`${t("common.delete")} — ${record.title}`}
          onClick={() => setConfirmDelete(true)}
          className="touch-target relative z-10 grid size-8 shrink-0 place-items-center rounded-full text-[var(--text-muted)] transition hover:bg-[var(--hover)] hover:text-rose-600 dark:hover:text-rose-300"
        >
          <XIcon className="size-4" />
        </button>
      </div>

      {preview ? (
        <>
          <button
            type="button"
            aria-expanded={expanded}
            onClick={() => setExpanded((value) => !value)}
            className="relative z-10 mt-2 flex w-full items-start gap-1 text-left text-[13px] leading-relaxed text-[var(--text-muted)] sm:hidden"
          >
            <span className={cn("min-w-0 flex-1", !expanded && "line-clamp-1")}>{preview}</span>
            <ChevronDownIcon
              className={cn("mt-0.5 size-4 shrink-0 text-[var(--text-subtle)] transition-transform", expanded && "rotate-180")}
            />
          </button>
          <p className="mt-3 hidden line-clamp-2 text-[13.5px] leading-relaxed text-[var(--text-muted)] sm:block">{preview}</p>
        </>
      ) : null}

      <div className="mt-4 flex justify-end lg:mt-4">
        {confirmDelete ? (
          <div className="relative z-10 flex flex-wrap items-center gap-2">
            <span className="text-[12.5px] text-[var(--text-muted)]">{t("homework.history.deleteConfirm")}</span>
            <Button size="sm" variant="danger" onClick={() => onDelete(record.id)}>
              {t("common.delete")}
            </Button>
            <Button size="sm" variant="ghost" onClick={() => setConfirmDelete(false)}>
              {t("common.cancel")}
            </Button>
          </div>
        ) : (
          <>
            <Link
              href={href}
              className="btn-primary touch-target relative z-10 h-9 gap-1.5 px-3.5 text-[13px] sm:hidden"
            >
              <PlayIcon className="size-4" />
              {t("homework.open")}
            </Link>
            <Link href={href} className="btn-primary hidden h-10 w-full px-4 text-sm sm:flex lg:hidden">
              {t("homework.open")}
            </Link>
            <div className="relative z-10 hidden lg:flex lg:justify-end">
              <Link href={href} className="btn-secondary h-9 px-4 text-[13px]">
                {t("homework.open")}
              </Link>
            </div>
          </>
        )}
      </div>
    </motion.li>
  );
}