import { useState, useEffect, useCallback, useRef } from "react";

const OCCUPATIONS = [
  { key: "cm", label: "Computer & Mathematical", short: "Computer & Math" },
  { key: "oa", label: "Office & Administrative Support", short: "Office & Admin" },
  { key: "bf", label: "Business & Financial Operations", short: "Business & Finance" },
  { key: "ad", label: "Arts, Design, Entertainment, Sports & Media", short: "Arts & Design" },
  { key: "le", label: "Legal", short: "Legal" },
  { key: "et", label: "Education, Training & Library", short: "Education & Library" },
  { key: "mg", label: "Management", short: "Management" },
  { key: "sc", label: "Life, Physical & Social Science", short: "Science" },
  { key: "cs", label: "Community & Social Service", short: "Community & Social" },
  { key: "hp", label: "Healthcare Practitioners & Technical", short: "Healthcare Practitioners" },
  { key: "sr", label: "Sales & Related", short: "Sales" },
  { key: "ae", label: "Architecture & Engineering", short: "Architecture & Eng." },
  { key: "pc", label: "Personal Care & Service", short: "Personal Care" },
  { key: "ps", label: "Protective Service", short: "Protective Service" },
  { key: "hs", label: "Healthcare Support", short: "Healthcare Support" },
  { key: "fp", label: "Food Preparation & Serving", short: "Food Prep & Serving" },
  { key: "bg", label: "Building & Grounds Cleaning & Maintenance", short: "Building & Grounds" },
  { key: "pr", label: "Production", short: "Production" },
  { key: "ce", label: "Construction & Extraction", short: "Construction" },
  { key: "tm", label: "Transportation & Material Moving", short: "Transportation" },
  { key: "im", label: "Installation, Maintenance & Repair", short: "Install. & Repair" },
  { key: "ff", label: "Farming, Fishing & Forestry", short: "Farming & Forestry" },
  { key: "ts", label: "Technical SEO", short: "Technical SEO" },
  { key: "fd", label: "Frontend Development", short: "Frontend Dev" },
  { key: "om", label: "Online Marketing", short: "Online Marketing" },
  { key: "lb", label: "Linkbuilding", short: "Linkbuilding" },
];

const N = OCCUPATIONS.length;

function generateRandom() {
  const vals = {};
  OCCUPATIONS.forEach((o) => { vals[o.key] = Math.round(Math.random() * 10) * 10; });
  return vals;
}

function encodeState(vals) {
  return OCCUPATIONS.map((o) => Math.round((vals[o.key] ?? 0) / 10)).join("");
}

function decodeState(str) {
  const vals = {};
  OCCUPATIONS.forEach((o, i) => {
    const ch = str[i];
    vals[o.key] = ch !== undefined ? parseInt(ch, 10) * 10 : 0;
    if (isNaN(vals[o.key])) vals[o.key] = 0;
    vals[o.key] = Math.min(100, Math.max(0, vals[o.key]));
  });
  return vals;
}

function getInitialValues() {
  try {
    const hash = window.location.hash.slice(1);
    if (hash && hash.length >= N && /^\d+$/.test(hash.slice(0, N))) return decodeState(hash);
  } catch (e) {}
  return generateRandom();
}

const BG_DARK = "#111318";
const BG_CARD = "#1a1e26";
const BG_SLIDER = "#252a35";
const TEXT_PRIMARY = "#e4e7ec";
const TEXT_SECONDARY = "#8b93a5";
const TEXT_DIM = "#555d6e";
const ACCENT = "#5b8def";
const FILL_COLOR = "rgba(91, 141, 239, 0.28)";
const STROKE_COLOR = "rgba(91, 141, 239, 0.85)";
const GRID_COLOR = "rgba(255,255,255,0.06)";
const SPOKE_COLOR = "rgba(255,255,255,0.08)";
const DOT_COLOR = "#5b8def";

const CHART_TITLE = "Theoretical AI capability by occupational category";
const WATERMARK_TEXT = "johnmu.com";
const TITLE_H = 52;
const WATERMARK_H = 36;

function polarToXY(cx, cy, radius, angleDeg) {
  const rad = ((angleDeg - 90) * Math.PI) / 180;
  return { x: cx + radius * Math.cos(rad), y: cy + radius * Math.sin(rad) };
}

function labelAnchor(angle) {
  const n = ((angle % 360) + 360) % 360;
  if (n > 10 && n < 170) return "start";
  if (n > 190 && n < 350) return "end";
  return "middle";
}

function labelDy(angle) {
  const n = ((angle % 360) + 360) % 360;
  if (n > 100 && n < 260) return "0.8em";
  if (n < 10 || n > 350) return "-0.4em";
  return "0.35em";
}

function RadarChartSVG({ values, hovered, onHover, size }) {
  const totalH = size + TITLE_H + WATERMARK_H;
  const cx = size / 2;
  const cy = size / 2 + TITLE_H;
  const maxR = size * 0.34;
  const labelR = maxR + 28;
  const angleStep = 360 / N;
  const rings = [20, 40, 60, 80, 100];

  const points = OCCUPATIONS.map((occ, i) => {
    const val = values[occ.key] || 0;
    return polarToXY(cx, cy, (val / 100) * maxR, i * angleStep);
  });
  const pathD = points.map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`).join(" ") + " Z";

  return (
    <svg viewBox={`0 0 ${size} ${totalH}`} width="100%" height="100%" style={{ maxWidth: size, maxHeight: totalH }}>
      <text x={size / 2} y={TITLE_H / 2 + 6} fontSize="16" fontWeight="600" fill={TEXT_PRIMARY}
        fontFamily="'IBM Plex Sans', sans-serif" textAnchor="middle" dominantBaseline="central">
        {CHART_TITLE}
      </text>

      {rings.map((pct) => {
        const r = (pct / 100) * maxR;
        return (
          <g key={pct}>
            <circle cx={cx} cy={cy} r={r} fill="none" stroke={GRID_COLOR} strokeWidth={1} />
            <text x={cx + 4} y={cy - r + 1} fontSize="9" fill={TEXT_DIM}
              fontFamily="'IBM Plex Mono', monospace" textAnchor="start">{pct}%</text>
          </g>
        );
      })}

      {OCCUPATIONS.map((occ, i) => {
        const angle = i * angleStep;
        const outerPt = polarToXY(cx, cy, maxR, angle);
        const labelPt = polarToXY(cx, cy, labelR, angle);
        const isHov = hovered === occ.key;
        return (
          <g key={occ.key}>
            <line x1={cx} y1={cy} x2={outerPt.x} y2={outerPt.y} stroke={SPOKE_COLOR} strokeWidth={1} />
            <text x={labelPt.x} y={labelPt.y} fontSize={isHov ? 11 : 10} fontWeight={isHov ? 600 : 400}
              fill={isHov ? TEXT_PRIMARY : TEXT_SECONDARY} fontFamily="'IBM Plex Sans', sans-serif"
              textAnchor={labelAnchor(angle)} dominantBaseline="central" dy={labelDy(angle)}
              style={{ cursor: "default" }}
              onMouseEnter={() => onHover(occ.key)} onMouseLeave={() => onHover(null)}>
              {occ.short}
            </text>
          </g>
        );
      })}

      <path d={pathD} fill={FILL_COLOR} stroke={STROKE_COLOR} strokeWidth={2} strokeLinejoin="round" />

      {points.map((p, i) => {
        const occ = OCCUPATIONS[i];
        const val = values[occ.key] || 0;
        if (val === 0) return null;
        const isHov = hovered === occ.key;
        return (
          <g key={occ.key} style={{ cursor: "default" }}
            onMouseEnter={() => onHover(occ.key)} onMouseLeave={() => onHover(null)}>
            <circle cx={p.x} cy={p.y} r={isHov ? 5.5 : 3.5} fill={DOT_COLOR} stroke={BG_DARK} strokeWidth={2} />
            {isHov && (
              <text x={p.x} y={p.y - 12} fontSize="11" fill={TEXT_PRIMARY}
                fontFamily="'IBM Plex Mono', monospace" fontWeight={600} textAnchor="middle">{val}%</text>
            )}
          </g>
        );
      })}

      <text x={size / 2} y={totalH - WATERMARK_H / 2 + 4} fontSize="12" fontWeight="400" fill={TEXT_DIM}
        fontFamily="'IBM Plex Mono', monospace" textAnchor="middle" dominantBaseline="central" opacity="0.7">
        {WATERMARK_TEXT}
      </text>
    </svg>
  );
}

function buildExportSVGString(values) {
  const S = 900;
  const totalH = S + TITLE_H + WATERMARK_H;
  const cx = S / 2;
  const cy = S / 2 + TITLE_H;
  const maxR = S * 0.34;
  const labelR = maxR + 28;
  const angleStep = 360 / N;
  const rings = [20, 40, 60, 80, 100];
  const esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
  const p = [];

  p.push(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${S} ${totalH}" width="${S * 2}" height="${totalH * 2}">`);
  p.push(`<rect x="0" y="0" width="${S}" height="${totalH}" fill="${BG_DARK}"/>`);
  p.push(`<text x="${S / 2}" y="${TITLE_H / 2 + 6}" font-size="16" font-weight="600" fill="${TEXT_PRIMARY}" font-family="sans-serif" text-anchor="middle" dominant-baseline="central">${esc(CHART_TITLE)}</text>`);

  rings.forEach(pct => {
    const r = (pct / 100) * maxR;
    p.push(`<circle cx="${cx}" cy="${cy}" r="${r}" fill="none" stroke="${GRID_COLOR}" stroke-width="1"/>`);
    p.push(`<text x="${cx + 4}" y="${cy - r + 1}" font-size="9" fill="${TEXT_DIM}" font-family="monospace" text-anchor="start">${pct}%</text>`);
  });

  OCCUPATIONS.forEach((occ, i) => {
    const angle = i * angleStep;
    const outerPt = polarToXY(cx, cy, maxR, angle);
    const labelPt = polarToXY(cx, cy, labelR, angle);
    p.push(`<line x1="${cx}" y1="${cy}" x2="${outerPt.x}" y2="${outerPt.y}" stroke="${SPOKE_COLOR}" stroke-width="1"/>`);
    p.push(`<text x="${labelPt.x}" y="${labelPt.y}" font-size="10" fill="${TEXT_SECONDARY}" font-family="sans-serif" text-anchor="${labelAnchor(angle)}" dominant-baseline="central" dy="${labelDy(angle)}">${esc(occ.short)}</text>`);
  });

  const pts = OCCUPATIONS.map((occ, i) => {
    const val = values[occ.key] || 0;
    return polarToXY(cx, cy, (val / 100) * maxR, i * angleStep);
  });
  const pathD = pts.map((pt, i) => `${i === 0 ? "M" : "L"} ${pt.x} ${pt.y}`).join(" ") + " Z";
  p.push(`<path d="${pathD}" fill="${FILL_COLOR}" stroke="${STROKE_COLOR}" stroke-width="2" stroke-linejoin="round"/>`);

  pts.forEach((pt, i) => {
    const val = values[OCCUPATIONS[i].key] || 0;
    if (val > 0) {
      p.push(`<circle cx="${pt.x}" cy="${pt.y}" r="4" fill="${DOT_COLOR}" stroke="${BG_DARK}" stroke-width="2"/>`);
      p.push(`<text x="${pt.x}" y="${pt.y - 12}" font-size="10" fill="${TEXT_PRIMARY}" font-family="monospace" font-weight="600" text-anchor="middle">${val}%</text>`);
    }
  });

  p.push(`<text x="${S / 2}" y="${totalH - WATERMARK_H / 2 + 4}" font-size="12" fill="${TEXT_DIM}" font-family="monospace" text-anchor="middle" dominant-baseline="central" opacity="0.7">${esc(WATERMARK_TEXT)}</text>`);
  p.push(`</svg>`);
  return { svg: p.join("\n"), width: S * 2, height: totalH * 2 };
}

function SliderRow({ occ, value, onChange, isHovered, onHover }) {
  return (
    <div style={{
      marginBottom: "8px", padding: "4px 6px", borderRadius: "6px",
      background: isHovered ? "rgba(91,141,239,0.08)" : "transparent", transition: "background 0.15s",
    }} onMouseEnter={() => onHover(occ.key)} onMouseLeave={() => onHover(null)}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: "2px" }}>
        <span style={{ fontSize: "11.5px", color: isHovered ? TEXT_PRIMARY : TEXT_SECONDARY, lineHeight: 1.3, flex: 1, paddingRight: "8px", transition: "color 0.15s" }}>
          {occ.short}
        </span>
        <span style={{
          fontSize: "11.5px", fontFamily: "'IBM Plex Mono', monospace", fontWeight: 500,
          color: value > 0 ? ACCENT : TEXT_DIM, minWidth: "36px", textAlign: "right",
        }}>{value}%</span>
      </div>
      <input type="range" min={0} max={100} step={10} value={value}
        onChange={(e) => onChange(occ.key, parseInt(e.target.value, 10))}
        style={{
          width: "100%", height: "4px", appearance: "none", WebkitAppearance: "none",
          background: `linear-gradient(to right, ${ACCENT} 0%, ${ACCENT} ${value}%, ${BG_SLIDER} ${value}%, ${BG_SLIDER} 100%)`,
          borderRadius: "2px", outline: "none", cursor: "pointer",
        }} />
    </div>
  );
}

const btnStyle = {
  padding: "7px 14px", fontSize: "12px", fontWeight: 500, border: "none",
  borderRadius: "6px", cursor: "pointer", background: BG_SLIDER, color: TEXT_SECONDARY,
  fontFamily: "'IBM Plex Sans', system-ui, sans-serif", transition: "background 0.15s, color 0.15s",
  whiteSpace: "nowrap",
};

export default function OccupationExposureRadar() {
  const [values, setValues] = useState(getInitialValues);
  const [hovered, setHovered] = useState(null);
  const [showSliders, setShowSliders] = useState(true);
  const [downloading, setDownloading] = useState(false);
  const containerRef = useRef(null);
  const [chartSize, setChartSize] = useState(680);

  useEffect(() => { window.location.hash = encodeState(values); }, [values]);

  useEffect(() => {
    const onHash = () => {
      const hash = window.location.hash.slice(1);
      if (hash && hash.length >= N && /^\d+$/.test(hash.slice(0, N))) setValues(decodeState(hash));
    };
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  useEffect(() => {
    const measure = () => {
      if (containerRef.current) {
        const w = containerRef.current.clientWidth;
        const h = containerRef.current.clientHeight;
        setChartSize(Math.min(w - 20, h - 20, 780));
      }
    };
    measure();
    window.addEventListener("resize", measure);
    return () => window.removeEventListener("resize", measure);
  }, [showSliders]);

  const handleChange = useCallback((key, val) => {
    setValues((prev) => ({ ...prev, [key]: val }));
  }, []);

  const handleDownload = async () => {
    setDownloading(true);
    try {
      const { svg, width, height } = buildExportSVGString(values);
      // Use data URI instead of blob URL to avoid CSP img-src restrictions
      const dataUrl = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(svg);
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);
        // Use data URI for the PNG as well
        const pngDataUrl = canvas.toDataURL("image/png");
        const a = document.createElement("a");
        a.href = pngDataUrl;
        a.download = "ai-capability-by-occupation.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        setDownloading(false);
      };
      img.onerror = () => setDownloading(false);
      img.src = dataUrl;
    } catch (e) {
      console.error("Download error:", e);
      setDownloading(false);
    }
  };

  return (
    <div style={{
      background: BG_DARK, minHeight: "100vh", color: TEXT_PRIMARY,
      fontFamily: "'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif",
      display: "flex", flexDirection: "column",
    }}>
      <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet" />
      <style>{`
        input[type="range"]::-webkit-slider-thumb {
          -webkit-appearance: none; appearance: none; width: 13px; height: 13px;
          border-radius: 50%; background: ${ACCENT}; cursor: pointer;
          border: 2px solid ${BG_CARD}; box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }
        input[type="range"]::-moz-range-thumb {
          width: 13px; height: 13px; border-radius: 50%; background: ${ACCENT};
          cursor: pointer; border: 2px solid ${BG_CARD}; box-shadow: 0 1px 3px rgba(0,0,0,0.5);
        }
      `}</style>

      {/* Header */}
      <div style={{ padding: "20px 24px 16px", borderBottom: `1px solid ${BG_SLIDER}`, flexShrink: 0 }}>
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", flexWrap: "wrap", gap: "12px" }}>
          <div>
            <h1 style={{ fontSize: "18px", fontWeight: 600, margin: 0, letterSpacing: "-0.02em" }}>
              Theoretical AI Capability by Occupation
            </h1>
            <p style={{ fontSize: "12px", color: TEXT_SECONDARY, margin: "4px 0 0", lineHeight: 1.5, maxWidth: "560px" }}>
              Share of job tasks that LLMs could theoretically perform. Adjust sliders, then share the URL or download as PNG.
            </p>
          </div>
          <div style={{ display: "flex", gap: "6px", flexShrink: 0, flexWrap: "wrap" }}>
            <button onClick={() => setValues(generateRandom())} style={btnStyle}>Randomize</button>
            <button onClick={() => { const v = {}; OCCUPATIONS.forEach(o => v[o.key] = 0); setValues(v); }} style={btnStyle}>Reset</button>
            <button onClick={() => setShowSliders(s => !s)}
              style={{ ...btnStyle, background: showSliders ? ACCENT : BG_SLIDER, color: showSliders ? "#fff" : TEXT_SECONDARY }}>
              {showSliders ? "Hide Controls" : "Show Controls"}
            </button>
            <button onClick={handleDownload} disabled={downloading}
              style={{ ...btnStyle, background: downloading ? TEXT_DIM : "#3a7d44", color: "#fff", minWidth: "120px", opacity: downloading ? 0.6 : 1 }}>
              {downloading ? "Exporting\u2026" : "\u2B07 Download PNG"}
            </button>
          </div>
        </div>
      </div>

      {/* Main */}
      <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
        {showSliders && (
          <div style={{
            width: "300px", minWidth: "300px", borderRight: `1px solid ${BG_SLIDER}`,
            overflowY: "auto", padding: "12px 14px", background: BG_CARD,
          }}>
            <div style={{ fontSize: "10px", fontWeight: 500, color: TEXT_DIM, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: "10px" }}>
              Occupation Controls (10% steps)
            </div>
            {OCCUPATIONS.map((occ) => (
              <SliderRow key={occ.key} occ={occ} value={values[occ.key] || 0}
                onChange={handleChange} isHovered={hovered === occ.key} onHover={setHovered} />
            ))}
          </div>
        )}

        <div ref={containerRef} style={{
          flex: 1, display: "flex", alignItems: "center", justifyContent: "center",
          overflow: "hidden", padding: "12px",
        }}>
          <RadarChartSVG values={values} hovered={hovered} onHover={setHovered} size={chartSize} />
        </div>
      </div>
    </div>
  );
}