"use client";

import { useSearchParams } from "next/navigation";
import { useParams } from "@/lib/route-params";
import { useEffect, useMemo, useState } from "react";
import {
  OfficialReportCardSheet,
  PrintPayload,
  UnofficialReportCardSheet,
} from "@/components/report-cards/ReportCardPrintSheets";
import { Alert } from "@/components/ui/Alert";
import { Button } from "@/components/ui/Button";
import { PageContentSkeleton } from "@/components/ui/Skeleton";
import { ApiError, apiGet } from "@/lib/api";
import { printFileStem } from "@/lib/report-cards";

export default function ReportCardPrintPage() {
  const { id } = useParams<{ id: string }>();
  const search = useSearchParams();
  const [data, setData] = useState<PrintPayload | null>(null);
  const [error, setError] = useState<string | null>(null);

  const enrollmentId = search.get("enrollment_id");
  const classId = search.get("class_id") || search.get("class_room_id");
  const periodId = search.get("period_id") || search.get("report_card_period_id");

  useEffect(() => {
    if (!id || (!enrollmentId && !classId)) {
      setError("کلاس یا دانش‌آموز برای چاپ مشخص نشده است.");
      return;
    }
    const params = new URLSearchParams();
    if (enrollmentId) params.set("enrollment_id", enrollmentId);
    if (classId) params.set("class_room_id", classId);
    if (periodId) params.set("report_card_period_id", periodId);
    apiGet<PrintPayload>(`/report-cards/${id}/preview-grades?${params.toString()}`)
      .then((payload) => {
        setData(payload);
        setError(null);
      })
      .catch((err) => {
        setError(err instanceof ApiError ? err.message : "خطا در بارگذاری کارنامه");
      });
  }, [id, enrollmentId, classId, periodId]);

  const filename = useMemo(
    () => printFileStem(data?.school.class_name, data?.period.name),
    [data],
  );

  useEffect(() => {
    if (!filename) return;
    const previous = document.title;
    document.title = filename;
    return () => {
      document.title = previous;
    };
  }, [filename]);

  const printNow = () => {
    window.print();
  };

  if (!data && !error) {
    return (
      <div className="p-6">
        <PageContentSkeleton rows={8} />
      </div>
    );
  }

  if (error || !data) {
    return (
      <div className="p-6">
        <Alert tone="error">{error ?? "داده‌ای برای چاپ نیست."}</Alert>
      </div>
    );
  }

  const official = data.report_card.kind === "official";

  return (
    <div className="report-card-print bg-slate-100 p-4 print:bg-white print:p-0">
      <style>{`
        @page { size: A4 landscape; margin: 8mm; }
        @media print {
          body { background: white !important; }
          .print-toolbar { display: none !important; }
          aside, header, nav, .pb-\\[calc\\(4\\.5rem\\+env\\(safe-area-inset-bottom\\)\\)\\] { display: none !important; }
        }
        .report-card-sheet {
          background: white;
          color: #111;
          direction: rtl;
          font-family: Tahoma, "Iran Sans", sans-serif;
          padding: 12mm 10mm;
          margin: 0 auto 16px;
          max-width: 297mm;
          min-height: 190mm;
          border: 1px solid #1f2937;
        }
        .sheet-header {
          display: grid;
          grid-template-columns: 1fr 2fr 1fr;
          gap: 8px;
          align-items: center;
          text-align: center;
          border-bottom: 2px solid #111;
          padding-bottom: 8px;
          margin-bottom: 8px;
        }
        .sheet-header.simple { display: block; }
        .sheet-header h1 { font-size: 16px; margin: 0 0 4px; }
        .header-side { font-size: 11px; }
        .header-side.left { text-align: left; }
        .emblem-box, .photo-box {
          width: 72px;
          height: 90px;
          border: 1px solid #111;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 4px;
          font-size: 11px;
          overflow: hidden;
        }
        .photo-box img { width: 100%; height: 100%; object-fit: cover; }
        .meta-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 4px 12px;
          font-size: 11px;
          margin-bottom: 8px;
        }
        table.grades {
          width: 100%;
          border-collapse: collapse;
          font-size: 11px;
        }
        table.grades th, table.grades td {
          border: 1px solid #111;
          padding: 3px 4px;
          text-align: center;
        }
        table.grades th { background: #f3f4f6; }
        table.grades td.name { text-align: right; }
        .summary { display: flex; gap: 24px; margin-top: 8px; font-size: 12px; }
        .formula, .note { font-size: 11px; margin-top: 8px; }
        .signs {
          display: flex;
          justify-content: space-around;
          margin-top: 24px;
          font-size: 12px;
          text-align: center;
        }
        .signs span { display: block; margin-top: 28px; }
      `}</style>

      <div className="print-toolbar mb-4 flex flex-wrap items-center justify-between gap-2 rounded-2xl border border-[var(--border)] bg-white p-3">
        <div>
          <p className="font-bold">{data.title}</p>
          <p className="text-xs text-[var(--muted)]">
            برای دانلود PDF از گفتگوی چاپ مرورگر، «Save as PDF» را انتخاب کنید.
            {" "}
            نام پیشنهادی: {filename}.pdf
          </p>
        </div>
        <Button onClick={printNow}>چاپ / ذخیره PDF</Button>
      </div>

      <div className="mx-auto max-w-[297mm]">
        {data.students.map((student, index) =>
          official ? (
            <OfficialReportCardSheet
              key={student.enrollment_id}
              payload={data}
              student={student}
              pageBreak={index < data.students.length - 1}
            />
          ) : (
            <UnofficialReportCardSheet
              key={student.enrollment_id}
              payload={data}
              student={student}
              pageBreak={index < data.students.length - 1}
            />
          ),
        )}
        {!data.students.length ? (
          <Alert tone="warning">دانش‌آموزی برای چاپ پیدا نشد.</Alert>
        ) : null}
      </div>
    </div>
  );
}