"use client";

import type { ResumeModel, ResumeTemplateId } from "@/types/resume";
import { ResumeRenderer, resumeTemplates } from "./ResumeRenderer";

export const RESUME_PAGE_COUNT = 2;

function ResumeHeaderChrome({ resume }: { resume: ResumeModel }) {
  return (
    <header className="shrink-0 border-b border-black pb-2">
      <div className="flex items-center justify-between text-[0.45rem] font-semibold">
        <span className="rounded bg-black px-2 py-1 text-white">
          Motivated {resume.title}
        </span>
        <span>{resume.location}</span>
      </div>
      <div className="mt-2 grid grid-cols-[1fr_auto] gap-2">
        <div>
          <h1 className="text-[0.9rem] font-extrabold">{resume.name}</h1>
          <p className="text-[0.55rem] font-semibold">{resume.title}</p>
          <p className="mt-1 text-[0.45rem] text-black/70">
            {resume.contact.join("  /  ")}
          </p>
        </div>
        {resume.photoUrl && (
          <img
            src={resume.photoUrl}
            alt=""
            className="h-12 w-12 rounded object-cover"
          />
        )}
      </div>
    </header>
  );
}
function ResumeFooterChrome({ page }: { page: number }) {
  return (
    <footer className="mt-auto flex shrink-0 items-end justify-between border-t border-black pt-1 text-[0.45rem]">
      <span className="font-bold text-[#0066ff]">weebard</span>
      <span className="text-[#0066ff]">www.weebard.com</span>
      <span>Page {page}</span>
    </footer>
  );
}

export function ResumePreview({
  resume,
  templateId,
  page,
}: {
  resume: ResumeModel;
  templateId: ResumeTemplateId;
  page: number;
}) {
  const template =
    resumeTemplates.find((item) => item.id === templateId) ??
    resumeTemplates[0];
  const portrait = template.id === "modern-portrait";
  return (
    <div className="flex h-[calc(110dvh-12rem)] min-h-[560px] w-full items-center justify-center overflow-hidden py-2">
      <div
        data-resume-document
        className={`box-border flex h-full max-h-full max-w-full shrink-0 flex-col overflow-hidden bg-white text-black shadow-lg ${portrait ? "aspect-[210/297] p-[4.5%]" : "aspect-[297/210] p-[3%]"}`}
        style={{ aspectRatio: portrait ? "210 / 297" : "297 / 210" }}
      >
        <ResumeHeaderChrome resume={resume} />
        <main className="min-h-0 flex-1 overflow-hidden pt-3">
          <div key={`${templateId}-${page}`} className="h-full overflow-hidden">
            <ResumeRenderer
              resume={resume}
              templateId={templateId}
              page={page}
            />
          </div>
        </main>
        <ResumeFooterChrome page={page} />
      </div>
    </div>
  );
}