import { useState } from "react";

const FIELDS = [
  { id:"physics",      label:"⚛ Physics" },
  { id:"chemistry",    label:"🧪 Chemistry" },
  { id:"biology",      label:"🧬 Biology" },
  { id:"mathematics",  label:"∑ Mathematics" },
  { id:"astronomy",    label:"🔭 Astronomy" },
  { id:"geology",      label:"🌍 Geology" },
  { id:"neuroscience", label:"🧠 Neuroscience" },
  { id:"philosophy",   label:"∞ Philosophy" },
  { id:"history",      label:"📜 History" },
  { id:"literature",   label:"✍ Literature" },
  { id:"linguistics",  label:"💬 Linguistics" },
  { id:"psychology",   label:"🪞 Psychology" },
  { id:"sociology",    label:"🏛 Sociology" },
  { id:"economics",    label:"📈 Economics" },
  { id:"music",        label:"♩ Music" },
  { id:"visual-arts",  label:"🎨 Visual Arts" },
  { id:"architecture", label:"⬡ Architecture" },
  { id:"technology",   label:"⚡ Technology" },
  { id:"medicine",     label:"⚕ Medicine" },
  { id:"anthropology", label:"🏺 Anthropology" },
  { id:"politics",     label:"⚖ Political Sci" },
  { id:"environment",  label:"🌿 Environment" },
  { id:"cinema",       label:"🎬 Cinema" },
  { id:"free",         label:"✦ Free Choice" },
];

const LENGTH_MAP = {
  short:  { label:"Short (~400w)",  words:"350–450" },
  medium: { label:"Medium (~800w)", words:"750–900" },
  long:   { label:"Long (~1400w)",  words:"1300–1500" },
};

// Simple markdown → JSX renderer
function renderMD(text) {
  const lines = text.split("\n");
  const elements = [];
  let key = 0;
  let pBuf = [];

  const flushP = () => {
    if (pBuf.length) {
      elements.push(
        <p key={key++} style={styles.p}>
          {pBuf.map((line, i) => <span key={i}>{inlineRender(line)}{i < pBuf.length-1 ? " " : ""}</span>)}
        </p>
      );
      pBuf = [];
    }
  };

  for (const raw of lines) {
    const line = raw.trim();
    if (!line) { flushP(); continue; }
    if (line.startsWith("## ")) {
      flushP();
      elements.push(<h2 key={key++} style={styles.h2}>{line.slice(3)}</h2>);
    } else if (line.startsWith("### ")) {
      flushP();
      elements.push(<h3 key={key++} style={styles.h3}>{line.slice(4)}</h3>);
    } else if (line.startsWith("> ")) {
      flushP();
      elements.push(<blockquote key={key++} style={styles.bq}>{inlineRender(line.slice(2))}</blockquote>);
    } else {
      pBuf.push(line);
    }
  }
  flushP();
  return elements;
}

function inlineRender(text) {
  const parts = [];
  let remaining = text;
  let key = 0;
  while (remaining.length) {
    const boldMatch = remaining.match(/\*\*(.+?)\*\*/);
    const emMatch   = remaining.match(/\*([^*]+?)\*/);
    const first = [boldMatch, emMatch]
      .filter(Boolean)
      .sort((a,b) => a.index - b.index)[0];
    if (!first) { parts.push(<span key={key++}>{remaining}</span>); break; }
    if (first.index > 0) parts.push(<span key={key++}>{remaining.slice(0, first.index)}</span>);
    if (first === boldMatch) parts.push(<strong key={key++} style={{color:"#5c3bff",fontWeight:700}}>{first[1]}</strong>);
    else parts.push(<em key={key++} style={{color:"#6b6b9a",fontStyle:"italic"}}>{first[1]}</em>);
    remaining = remaining.slice(first.index + first[0].length);
  }
  return parts;
}

const NEU = "8px 8px 20px rgba(160,160,200,0.5),-8px -8px 20px rgba(255,255,255,0.85)";
const NEU_IN = "inset 5px 5px 12px rgba(160,160,200,0.45),inset -5px -5px 12px rgba(255,255,255,0.85)";

const styles = {
  root: {
    minHeight:"100vh",
    background:"#e8e8f0",
    fontFamily:"'Segoe UI',system-ui,sans-serif",
    color:"#1a1a2e",
    padding:"2.5rem 1.25rem",
    position:"relative",
    overflowX:"hidden",
  },
  // Orbs via pseudo — we'll do real divs
  orb1: {
    position:"fixed",width:500,height:500,borderRadius:"50%",
    background:"radial-gradient(circle,rgba(92,59,255,0.13) 0%,transparent 70%)",
    top:-120,left:-80,pointerEvents:"none",zIndex:0,
  },
  orb2: {
    position:"fixed",width:420,height:420,borderRadius:"50%",
    background:"radial-gradient(circle,rgba(255,59,138,0.11) 0%,transparent 70%)",
    bottom:-100,right:-80,pointerEvents:"none",zIndex:0,
  },
  content: { maxWidth:900,margin:"0 auto",position:"relative",zIndex:1 },
  badge: {
    display:"inline-block",
    background:"rgba(255,255,255,0.3)",
    backdropFilter:"blur(16px)",
    WebkitBackdropFilter:"blur(16px)",
    border:"1px solid rgba(255,255,255,0.5)",
    borderRadius:40,padding:"6px 20px",
    fontSize:11,fontWeight:700,letterSpacing:"0.22em",textTransform:"uppercase",
    color:"#5c3bff",boxShadow:NEU,marginBottom:"1.25rem",
  },
  heroTitle: {
    fontSize:"clamp(3.5rem,9vw,7.5rem)",lineHeight:0.9,
    fontWeight:900,letterSpacing:"0.02em",
    background:"linear-gradient(135deg,#1a1a2e 0%,#5c3bff 50%,#ff3b8a 100%)",
    WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",
    backgroundClip:"text",marginBottom:"0.6rem",
  },
  heroSub: {
    fontSize:"1.05rem",fontStyle:"italic",color:"#6b6b9a",letterSpacing:"0.03em",marginBottom:"3rem",
  },
  sectionLabel: {
    fontSize:"0.7rem",fontWeight:700,letterSpacing:"0.25em",textTransform:"uppercase",
    color:"#6b6b9a",marginBottom:"0.9rem",
  },
  fieldsGrid: {
    display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(135px,1fr))",
    gap:10,marginBottom:"2rem",
  },
  chip: (active) => ({
    padding:"9px 10px",borderRadius:14,border:"1px solid",textAlign:"center",
    fontSize:12,fontWeight:600,letterSpacing:"0.04em",cursor:"pointer",
    transition:"all 0.2s ease",userSelect:"none",
    background: active
      ? "linear-gradient(135deg,#5c3bff,#ff3b8a)"
      : "rgba(255,255,255,0.25)",
    backdropFilter:"blur(12px)",WebkitBackdropFilter:"blur(12px)",
    borderColor: active ? "transparent" : "rgba(255,255,255,0.45)",
    color: active ? "#fff" : "#2d2d4a",
    boxShadow: active ? "4px 4px 14px rgba(92,59,255,0.35)" : NEU,
  }),
  inputCard: {
    background:"rgba(255,255,255,0.22)",backdropFilter:"blur(24px)",
    WebkitBackdropFilter:"blur(24px)",border:"1px solid rgba(255,255,255,0.45)",
    borderRadius:24,padding:"2rem",boxShadow:NEU,marginBottom:"1.5rem",
  },
  inputRow: { display:"flex",gap:12,alignItems:"stretch",flexWrap:"wrap" },
  input: {
    flex:1,minWidth:200,
    background:"rgba(255,255,255,0.4)",border:"1px solid rgba(255,255,255,0.5)",
    borderRadius:14,padding:"0.9rem 1.2rem",
    fontFamily:"inherit",fontSize:"1rem",fontWeight:500,color:"#1a1a2e",
    outline:"none",boxShadow:NEU_IN,
  },
  select: {
    background:"rgba(255,255,255,0.4)",border:"1px solid rgba(255,255,255,0.5)",
    borderRadius:14,padding:"0.9rem 1.1rem",
    fontFamily:"inherit",fontSize:"0.85rem",fontWeight:600,color:"#2d2d4a",
    outline:"none",boxShadow:NEU_IN,cursor:"pointer",
  },
  btn: (disabled) => ({
    background: disabled
      ? "rgba(160,160,200,0.3)"
      : "linear-gradient(135deg,#5c3bff 0%,#ff3b8a 100%)",
    border:"none",borderRadius:14,
    padding:"0.9rem 1.8rem",
    fontFamily:"inherit",fontSize:"0.95rem",fontWeight:800,
    letterSpacing:"0.1em",textTransform:"uppercase",
    color:"#fff",cursor: disabled ? "not-allowed" : "pointer",
    boxShadow: disabled ? "none" : "6px 6px 18px rgba(92,59,255,0.35),-3px -3px 10px rgba(255,255,255,0.5)",
    whiteSpace:"nowrap",transition:"all 0.2s",opacity: disabled ? 0.7 : 1,
  }),
  error: {
    marginTop:"0.8rem",background:"rgba(255,59,138,0.1)",
    border:"1px solid rgba(255,59,138,0.3)",borderRadius:12,
    padding:"0.75rem 1rem",color:"#b01050",fontSize:14,fontWeight:500,
  },
  loadingWrap: { textAlign:"center",padding:"3rem 0" },
  spinner: {
    width:52,height:52,border:"4px solid rgba(92,59,255,0.15)",
    borderTopColor:"#5c3bff",borderRadius:"50%",
    animation:"spin 0.85s linear infinite",margin:"0 auto 1.25rem",
    boxShadow:NEU,
  },
  loadingText: { color:"#6b6b9a",fontSize:"1rem",fontStyle:"italic" },
  essayCard: {
    background:"rgba(255,255,255,0.28)",backdropFilter:"blur(28px)",
    WebkitBackdropFilter:"blur(28px)",border:"1px solid rgba(255,255,255,0.45)",
    borderRadius:28,padding:"2.5rem",boxShadow:NEU,marginTop:"1.5rem",
  },
  metaRow: { display:"flex",alignItems:"center",gap:10,marginBottom:"1.5rem",flexWrap:"wrap" },
  fieldTag: {
    background:"linear-gradient(135deg,#5c3bff,#ff3b8a)",color:"#fff",
    fontSize:11,fontWeight:700,letterSpacing:"0.14em",textTransform:"uppercase",
    padding:"5px 14px",borderRadius:20,boxShadow:"4px 4px 12px rgba(92,59,255,0.3)",
  },
  wCount: {
    fontSize:12,color:"#6b6b9a",fontWeight:500,letterSpacing:"0.04em",
    background:"rgba(255,255,255,0.35)",backdropFilter:"blur(8px)",
    border:"1px solid rgba(255,255,255,0.45)",borderRadius:20,padding:"4px 12px",
    boxShadow:NEU,
  },
  essayTitle: {
    fontSize:"clamp(1.6rem,3.5vw,2.6rem)",fontWeight:900,lineHeight:1.15,
    color:"#1a1a2e",marginBottom:"1.75rem",letterSpacing:"-0.01em",
    fontStyle:"italic",
  },
  p: { marginBottom:"1.2rem",lineHeight:1.85,fontSize:"1.02rem",color:"#2d2d4a" },
  h2: {
    fontSize:"1.6rem",fontWeight:800,letterSpacing:"0.06em",textTransform:"uppercase",
    color:"#1a1a2e",margin:"2rem 0 0.6rem",
  },
  h3: { fontSize:"1.25rem",fontWeight:700,color:"#2d2d4a",margin:"1.5rem 0 0.5rem" },
  bq: {
    borderLeft:"4px solid #5c3bff",padding:"0.7rem 1.2rem",margin:"1.5rem 0",
    background:"rgba(92,59,255,0.06)",borderRadius:"0 12px 12px 0",
    fontStyle:"italic",color:"#6b6b9a",fontSize:"1rem",
  },
  actionsRow: {
    display:"flex",gap:10,marginTop:"2rem",paddingTop:"1.5rem",
    borderTop:"1px solid rgba(255,255,255,0.3)",flexWrap:"wrap",
  },
  actBtn: {
    background:"rgba(255,255,255,0.3)",backdropFilter:"blur(12px)",
    border:"1px solid rgba(255,255,255,0.45)",borderRadius:12,
    padding:"9px 18px",fontFamily:"inherit",fontSize:13,fontWeight:600,
    color:"#2d2d4a",cursor:"pointer",boxShadow:NEU,transition:"all 0.18s",
  },
  hint: { textAlign:"center",fontSize:12,color:"#6b6b9a",opacity:0.55,marginTop:"2.5rem" },
};

export default function EssayForge() {
  const [field, setField]       = useState("free");
  const [topic, setTopic]       = useState("");
  const [length, setLength]     = useState("medium");
  const [loading, setLoading]   = useState(false);
  const [error, setError]       = useState("");
  const [essay, setEssay]       = useState(null); // {title, body, fieldLabel, wordCount}
  const [copied, setCopied]     = useState(false);

  const fieldObj = FIELDS.find(f => f.id === field);

  async function generate() {
    if (!topic.trim()) { setError("Please enter a topic!"); return; }
    setError(""); setEssay(null); setLoading(true);

    const wordTarget = LENGTH_MAP[length].words;
    const fieldLabel = fieldObj?.label.replace(/[^\w\s]/g,"").trim() || "General";

    const systemPrompt = `You are a world-class essayist with mastery across all fields of human knowledge. Write essays that are intellectually rigorous, beautifully structured, and deeply engaging.

FORMAT RULES (follow exactly):
1. First line must be: TITLE: [Your Essay Title]
2. Then write the full essay body
3. Use ## for major section headings
4. Use **bold** for key terms and important concepts  
5. Use *italics* for technical terms or subtle emphasis
6. Include at least one blockquote using > prefix
7. Write exactly ${wordTarget} words for the body
8. Honor the vocabulary, methods, and intellectual traditions of ${fieldLabel}`;

    const userPrompt = `Write a compelling, well-structured academic essay about: "${topic.trim()}"

Field: ${fieldLabel}
Target length: ${wordTarget} words

Make it intellectually stimulating, factually grounded, and beautifully written with clear sections.`;

    try {
      const res = await fetch("https://api.anthropic.com/v1/messages", {
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body: JSON.stringify({
          model:"claude-sonnet-4-20250514",
          max_tokens:2048,
          system: systemPrompt,
          messages:[{ role:"user", content: userPrompt }],
        }),
      });

      if (!res.ok) {
        const e = await res.json().catch(()=>({}));
        throw new Error(e?.error?.message || `API error ${res.status}`);
      }

      const data = await res.json();
      const raw = data.content?.map(b => b.text||"").join("") || "";

      let title = topic.trim();
      let body  = raw;
      const m = raw.match(/^TITLE:\s*(.+)/m);
      if (m) { title = m[1].trim(); body = raw.replace(/^TITLE:\s*.+\n?/m,"").trim(); }

      const wc = body.replace(/[#>*_]/g,"").split(/\s+/).filter(Boolean).length;
      setEssay({ title, body, fieldLabel, wordCount: wc });
    } catch(e) {
      setError("Something went wrong: " + (e.message||"Please try again."));
    }
    setLoading(false);
  }

  function copyText() {
    if (!essay) return;
    navigator.clipboard.writeText(essay.title + "\n\n" + essay.body.replace(/[#>*_]/g,""));
    setCopied(true);
    setTimeout(()=>setCopied(false), 2000);
  }

  return (
    <div style={styles.root}>
      <style>{`@keyframes spin{to{transform:rotate(360deg)}}`}</style>
      <div style={styles.orb1}/>
      <div style={styles.orb2}/>

      <div style={styles.content}>
        {/* Header */}
        <div style={{textAlign:"center",marginBottom:"3rem"}}>
          <div style={styles.badge}>✦ Intellectual Writing Engine ✦</div>
          <div style={styles.heroTitle}>ESSAY<br/>FORGE</div>
          <div style={styles.heroSub}>From Physics to Philosophy — Every Discipline, One Engine</div>
        </div>

        {/* Field Selector */}
        <div style={styles.sectionLabel}>Choose a Field of Study</div>
        <div style={styles.fieldsGrid}>
          {FIELDS.map(f => (
            <div
              key={f.id}
              style={styles.chip(field===f.id)}
              onClick={()=>setField(f.id)}
            >
              {f.label}
            </div>
          ))}
        </div>

        {/* Input */}
        <div style={styles.inputCard}>
          <div style={{...styles.sectionLabel, marginBottom:"1rem"}}>Enter Your Essay Topic</div>
          <div style={styles.inputRow}>
            <input
              style={styles.input}
              value={topic}
              onChange={e=>setTopic(e.target.value)}
              onKeyDown={e=>e.key==="Enter"&&!loading&&generate()}
              placeholder="e.g. The Quantum Nature of Consciousness…"
              maxLength={200}
            />
            <select
              style={styles.select}
              value={length}
              onChange={e=>setLength(e.target.value)}
            >
              {Object.entries(LENGTH_MAP).map(([k,v])=>(
                <option key={k} value={k}>{v.label}</option>
              ))}
            </select>
            <button
              style={styles.btn(loading)}
              disabled={loading}
              onClick={generate}
            >
              {loading ? "Forging…" : "✦ Forge Essay"}
            </button>
          </div>
          {error && <div style={styles.error}>⚠ {error}</div>}
        </div>

        {/* Loading */}
        {loading && (
          <div style={styles.loadingWrap}>
            <div style={styles.spinner}/>
            <p style={styles.loadingText}>Forging your essay, please wait…</p>
          </div>
        )}

        {/* Essay Output */}
        {essay && !loading && (
          <div style={styles.essayCard}>
            <div style={styles.metaRow}>
              <span style={styles.fieldTag}>{essay.fieldLabel}</span>
              <span style={styles.wCount}>{essay.wordCount} words</span>
            </div>
            <div style={styles.essayTitle}>{essay.title}</div>
            <div>{renderMD(essay.body)}</div>
            <div style={styles.actionsRow}>
              <button style={styles.actBtn} onClick={copyText}>
                {copied ? "✓ Copied!" : "📋 Copy Essay"}
              </button>
              <button style={styles.actBtn} onClick={()=>{ setEssay(null); setTopic(""); }}>
                ✦ New Essay
              </button>
            </div>
          </div>
        )}

        <p style={styles.hint}>Powered by Claude · Essays are generated fresh each time</p>
      </div>
    </div>
  );
}