import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

import { api } from "../api";

// Anonymous read-only public CV at /cv/:slug. Renders the server-produced HTML in a sandboxed
// iframe. noindex is enforced server-side (X-Robots-Tag) and reinforced with a meta tag here.
export default function PublicCvPage() {
  const { slug } = useParams();
  const pdfUrl = `${api.defaults.baseURL}/public-cv/${slug}/pdf`;
  const [html, setHtml] = useState<string | null>(null);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const meta = document.createElement("meta");
    meta.name = "robots";
    meta.content = "noindex, nofollow";
    document.head.appendChild(meta);

    let alive = true;
    api.get<{ html: string; name: string }>(`/public-cv/${slug}`)
      .then((r) => { if (alive) { setHtml(r.data.html); if (r.data.name) document.title = `${r.data.name} — CV`; } })
      .catch((err) => {
        if (!alive) return;
        // 404 = unknown slug or the owner made it private again. Anything else is a transient error.
        setError(err?.response?.status === 404
          ? "This CV isn’t available. The link may be wrong, or the owner has made it private."
          : "This CV can’t be loaded right now. Please try again in a moment.");
      });

    return () => {
      alive = false;
      document.head.removeChild(meta);
    };
  }, [slug]);

  if (error) {
    return (
      <div style={{ display: "flex", height: "100vh", alignItems: "center", justifyContent: "center", fontFamily: "system-ui", color: "#374151" }}>
        {error}
      </div>
    );
  }
  if (html === null) {
    return (
      <div style={{ display: "flex", height: "100vh", alignItems: "center", justifyContent: "center", fontFamily: "system-ui", color: "#9ca3af" }}>
        Loading…
      </div>
    );
  }

  return (
    <div style={{ minHeight: "100vh", background: "#e9edf2", padding: "24px 0", display: "flex", flexDirection: "column", alignItems: "center", gap: 16 }}>
      <a href={pdfUrl} download style={{ padding: "10px 16px", borderRadius: 8, background: "#1d4ed8", color: "#fff", font: "600 14px system-ui", textDecoration: "none" }}>
        Download PDF
      </a>
      <iframe
        title="Public CV"
        srcDoc={html}
        sandbox="allow-same-origin"
        style={{ width: "210mm", height: "297mm", border: "none", background: "#fff", boxShadow: "0 8px 30px rgba(0,0,0,0.18)" }}
      />
    </div>
  );
}
