"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useTranslations } from "next-intl";
import { Button } from "@/shared/components/ui/button";
import { formatDateTime } from "@/shared/lib/utils";
import { duplicateLessonPlanAction, deleteLessonPlanAction } from "../actions";
import type { LessonPlanListItem } from "../types";

export function LessonPlanCard({ plan }: { plan: LessonPlanListItem }) {
  const t = useTranslations("lessonPreparation");
  const router = useRouter();

  return (
    <div className="border border-outline-variant rounded-lg p-4 bg-surface-container-lowest hover:shadow-md transition-shadow">
      <Link
        href={`/teacher/lesson-plans/${plan.id}/edit`}
        className="block"
      >
        <h3 className="font-title-md text-title-md hover:text-primary">
          {plan.title}
        </h3>
      </Link>
      <div className="text-sm text-on-surface-variant mt-1">
        {plan.textbookTitle ?? t("list.noTextbook")} · {plan.chapterTitle ?? t("list.noChapter")}
      </div>
      <div className="text-xs text-on-surface-variant mt-1">
        {plan.templateName ?? t("list.noTemplate")} ·{" "}
        {t(`status.${plan.status}`)}
      </div>
      <div className="text-xs text-on-surface-variant mt-2">
        {t("list.lastSaved")}
        {plan.lastSavedAt
          ? formatDateTime(plan.lastSavedAt)
          : t("list.neverSaved")}
      </div>
      <div className="flex gap-2 mt-3">
        <Button
          variant="outline"
          size="sm"
          onClick={async () => {
            const res = await duplicateLessonPlanAction(plan.id);
            if (res.success) router.refresh();
          }}
        >
          {t("action.duplicate")}
        </Button>
        <Button
          variant="outline"
          size="sm"
          onClick={async () => {
            if (!confirm(t("confirm.archive"))) return;
            const res = await deleteLessonPlanAction(plan.id);
            if (res.success) router.refresh();
          }}
        >
          {t("action.archive")}
        </Button>
      </div>
    </div>
  );
}