import React, { useEffect, useState } from "react";
import { Box } from "@mui/material";

import { CvTheme, cvBuilderApi } from "../cvBuilder";

const previewCache = new Map<string, string>();

export default function CvTemplateThumbnail({ theme, height = 150 }: { theme?: CvTheme; height?: number }) {
  const [previewHtml, setPreviewHtml] = useState(() => theme ? previewCache.get(theme.id) ?? "" : "");
  const accent = theme?.swatches?.[0] || "#3157d5";
  const sidebar = theme?.swatches?.[1] || "#eef1f4";
  const paper = theme?.swatches?.[2] || "#ffffff";
  const layout = theme?.layout || "header-band";
  const hasSidebar = layout === "sidebar-left" || layout === "sidebar-right";
  const sidebarRight = layout === "sidebar-right";
  const lines = [92, 72, 84, 61, 88, 76, 95, 67];

  useEffect(() => {
    if (!theme) return;
    const cached = previewCache.get(theme.id);
    if (cached) {
      setPreviewHtml(cached);
      return;
    }
    setPreviewHtml("");
    let active = true;
    void cvBuilderApi.themePreview(theme.id).then((render) => {
      previewCache.set(theme.id, render.html);
      if (active) setPreviewHtml(render.html);
    }).catch(() => undefined);
    return () => { active = false; };
  }, [theme]);

  if (previewHtml) {
    const scale = height / (297 * 96 / 25.4);
    return (
      <Box aria-hidden sx={{ height, bgcolor: "#dfe4ea", border: "1px solid", borderColor: "divider", borderRadius: 1.5, overflow: "hidden", display: "flex", justifyContent: "center" }}>
        <Box sx={{ width: height * 210 / 297, height, bgcolor: "#fff", boxShadow: "0 5px 14px rgba(15,23,42,.15)", overflow: "hidden" }}>
          <iframe title={`${theme?.name ?? "CV"} template preview`} srcDoc={previewHtml} sandbox="allow-same-origin" tabIndex={-1}
            style={{ width: "210mm", height: "297mm", border: 0, display: "block", transform: `scale(${scale})`, transformOrigin: "top left", pointerEvents: "none" }} />
        </Box>
      </Box>
    );
  }

  const body = <Box sx={{ p: "7%", minWidth: 0 }}>
    <Box sx={{ width: "48%", height: 5, borderRadius: 2, bgcolor: accent, mb: 1 }} />
    {lines.map((width, index) => <Box key={index} sx={{ width: `${width}%`, height: index === 4 ? 4 : 2.5, borderRadius: 2, bgcolor: index === 4 ? accent : "rgba(51,65,85,.24)", mt: index === 4 ? 1.25 : 0, mb: 0.7 }} />)}
  </Box>;
  const side = <Box sx={{ bgcolor: sidebar, p: "13% 12%", minWidth: 0 }}>
    <Box sx={{ width: 24, height: 24, borderRadius: theme?.photoShape === "circle" ? "50%" : 1, bgcolor: "rgba(255,255,255,.78)", border: "1px solid rgba(15,23,42,.1)", mb: 1.2 }} />
    {[66, 86, 54, 74, 62, 79].map((width) => <Box key={width} sx={{ width: `${width}%`, height: 2.5, borderRadius: 2, bgcolor: "rgba(30,41,59,.3)", mb: 0.8 }} />)}
  </Box>;

  return (
    <Box aria-hidden sx={{ height, bgcolor: paper, border: "1px solid", borderColor: "divider", borderRadius: 1.5, overflow: "hidden", boxShadow: "0 8px 20px rgba(15,23,42,.08)", display: "flex", flexDirection: "column" }}>
      {!hasSidebar && <Box sx={{ height: layout === "header-band" ? "25%" : 8, bgcolor: layout === "header-band" ? accent : paper, borderBottom: layout === "header-band" ? 0 : `2px solid ${accent}`, p: layout === "header-band" ? "6%" : 0 }}>
        {layout === "header-band" && <><Box sx={{ width: "42%", height: 5, bgcolor: "rgba(255,255,255,.9)", mb: 0.75 }} /><Box sx={{ width: "30%", height: 2.5, bgcolor: "rgba(255,255,255,.65)" }} /></>}
      </Box>}
      <Box sx={{ flex: 1, minHeight: 0, display: "grid", gridTemplateColumns: hasSidebar ? (sidebarRight ? "1fr 32%" : "32% 1fr") : "1fr" }}>
        {hasSidebar && !sidebarRight ? side : null}{body}{hasSidebar && sidebarRight ? side : null}
      </Box>
    </Box>
  );
}