import { useState } from "react";

const STEPS = [
  {
    id: 1,
    label: "Your expertise",
    title: "What do you actually do?",
    subtitle: "Don't think about products yet — just describe your work honestly.",
    questions: [
      "What do you help people with in your 1:1 work?",
      "What transformation do clients have after working with you?",
      "What do people always ask you for help with — even informally?",
    ],
  },
  {
    id: 2,
    label: "Your client",
    title: "Who are you really talking to?",
    subtitle: "Be specific. The more precise, the better your offer ideas will be.",
    questions: [
      "Who is your ideal client — what do they do, what stage are they at?",
      "What keeps them up at night that you can actually solve?",
      "What have your best clients said after working with you?",
    ],
  },
  {
    id: 3,
    label: "Your constraints",
    title: "What does your life actually allow?",
    subtitle: "This shapes which offer format fits — there's no wrong answer.",
    questions: [
      "How many hours a week could you realistically give to a digital product?",
      "Do you prefer to be live with people or work more asynchronously?",
      "What price point feels right for a first digital offer — under £200, £200–£500, or £500+?",
    ],
  },
  {
    id: 4,
    label: "Your proof",
    title: "What have you already done that worked?",
    subtitle: "Your best offer is usually hiding in your track record.",
    questions: [
      "What's the best result a client has ever got from working with you?",
      "Is there a process or framework you use with almost every client?",
      "What do you know how to do that most people in your field don't teach?",
    ],
  },
];

const SYSTEM_PROMPT = `You are a digital product strategist helping coaches, consultants and freelancers identify their best digital offer ideas. You are direct, specific and practical. You never give generic advice.

Based on the answers provided, generate exactly 3 digital offer ideas. For each one:
- Give it a specific name (not generic like "online course")
- Describe exactly what it contains in 2 sentences
- Suggest a price point
- Explain in one sentence why this person is uniquely positioned to sell it
- Rate the speed to build: Fast (days), Medium (weeks), or Longer (months)

Format each offer clearly with these headings: Name, What it is, Price, Why you, Speed.

After the 3 offers, add a one-paragraph "Start here" recommendation — which of the three to build first and why.

Be specific to their answers. Do not suggest anything generic. Do not pad with encouragement. Just give them the three offers and the recommendation.`;

export default function DigitalOfferFinder() {
  const [step, setStep] = useState(0); // 0 = intro, 1-4 = questions, 5 = result
  const [answers, setAnswers] = useState({ 1: ["", "", ""], 2: ["", "", ""], 3: ["", "", ""], 4: ["", "", ""] });
  const [result, setResult] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  const currentStep = STEPS[step - 1];

  const updateAnswer = (stepId, qIdx, val) => {
    setAnswers(prev => ({
      ...prev,
      [stepId]: prev[stepId].map((a, i) => i === qIdx ? val : a)
    }));
  };

  const allAnswered = (stepId) => {
    return answers[stepId].every(a => a.trim().length > 10);
  };

  const buildPrompt = () => {
    let prompt = "Here are my answers:\n\n";
    STEPS.forEach(s => {
      prompt += `${s.title}\n`;
      s.questions.forEach((q, i) => {
        prompt += `Q: ${q}\nA: ${answers[s.id][i]}\n\n`;
      });
    });
    return prompt;
  };

  const generateOffers = async () => {
    setLoading(true);
    setError("");
    try {
      const response = await fetch("https://api.anthropic.com/v1/messages", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          model: "claude-sonnet-4-6",
          max_tokens: 1000,
          system: SYSTEM_PROMPT,
          messages: [{ role: "user", content: buildPrompt() }],
        }),
      });
      const data = await response.json();
      const text = data.content?.map(b => b.text || "").join("") || "";
      setResult(text);
      setStep(5);
    } catch (e) {
      setError("Something went wrong. Please try again.");
    }
    setLoading(false);
  };

  const progress = step === 0 ? 0 : step === 5 ? 100 : (step / 4) * 100;

  // Styles
  const s = {
    wrap: { maxWidth: 600, margin: "0 auto", fontFamily: "system-ui, sans-serif", padding: "24px 16px", color: "#1a1a1a" },
    progressBar: { height: 3, background: "#e5e5e5", borderRadius: 99, marginBottom: 32 },
    progressFill: { height: 3, background: "#1D9E75", borderRadius: 99, width: `${progress}%`, transition: "width 0.4s ease" },
    eyebrow: { fontSize: 11, color: "#888", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 8 },
    h1: { fontSize: 26, fontWeight: 600, lineHeight: 1.25, marginBottom: 8, color: "#0a0a0a" },
    sub: { fontSize: 15, color: "#555", lineHeight: 1.7, marginBottom: 28 },
    questionBlock: { marginBottom: 20 },
    qLabel: { fontSize: 14, fontWeight: 500, color: "#1a1a1a", marginBottom: 8, lineHeight: 1.4 },
    textarea: { width: "100%", minHeight: 80, padding: "10px 14px", fontSize: 14, color: "#1a1a1a", background: "#f9f9f9", border: "1px solid #e0e0e0", borderRadius: 10, resize: "vertical", fontFamily: "system-ui, sans-serif", lineHeight: 1.6, boxSizing: "border-box" },
    btnPrimary: { background: "#1D9E75", color: "#fff", border: "none", borderRadius: 10, padding: "12px 24px", fontSize: 15, fontWeight: 600, cursor: "pointer", display: "inline-block" },
    btnSecondary: { background: "transparent", color: "#555", border: "1px solid #ddd", borderRadius: 10, padding: "12px 20px", fontSize: 14, cursor: "pointer", marginRight: 10 },
    btnDisabled: { background: "#ccc", color: "#fff", border: "none", borderRadius: 10, padding: "12px 24px", fontSize: 15, fontWeight: 600, cursor: "not-allowed" },
    stepChips: { display: "flex", gap: 8, marginBottom: 28, flexWrap: "wrap" },
    chip: (active, done) => ({ fontSize: 12, padding: "4px 12px", borderRadius: 99, background: done ? "#E1F5EE" : active ? "#0F2420" : "#f0f0f0", color: done ? "#085041" : active ? "#fff" : "#999", fontWeight: active ? 600 : 400 }),
    resultCard: { background: "#f9f9f9", border: "1px solid #e8e8e8", borderRadius: 14, padding: "24px", marginTop: 8 },
    resultText: { fontSize: 14, color: "#333", lineHeight: 1.8, whiteSpace: "pre-wrap" },
    tag: (color) => ({ display: "inline-block", fontSize: 11, padding: "3px 10px", borderRadius: 99, background: color === "green" ? "#E1F5EE" : "#EEEDFE", color: color === "green" ? "#085041" : "#3C3489", marginBottom: 16 }),
    restartBtn: { background: "transparent", color: "#1D9E75", border: "1px solid #1D9E75", borderRadius: 10, padding: "10px 20px", fontSize: 14, cursor: "pointer", marginTop: 20 },
    introHero: { background: "#0F2420", borderRadius: 16, padding: "32px", marginBottom: 8 },
    introH: { fontSize: 24, fontWeight: 600, color: "#fff", lineHeight: 1.25, marginBottom: 12 },
    introSub: { fontSize: 14, color: "#9DC9BC", lineHeight: 1.7, marginBottom: 24 },
    introList: { listStyle: "none", padding: 0, margin: "0 0 24px" },
    introItem: { fontSize: 14, color: "#9DC9BC", padding: "6px 0", borderBottom: "1px solid rgba(255,255,255,0.06)", display: "flex", gap: 10 },
    dot: { color: "#1D9E75", flexShrink: 0 },
    error: { color: "#c0392b", fontSize: 13, marginTop: 8 },
    loadingWrap: { textAlign: "center", padding: "48px 0" },
    spinner: { width: 36, height: 36, border: "3px solid #e0e0e0", borderTop: "3px solid #1D9E75", borderRadius: "50%", margin: "0 auto 16px", animation: "spin 0.8s linear infinite" },
  };

  if (step === 0) return (
    <div style={s.wrap}>
      <div style={s.introHero}>
        <p style={s.eyebrow}>Free tool</p>
        <h1 style={s.introH}>Find your digital offer in 10 minutes</h1>
        <p style={s.introSub}>Answer 12 questions about your expertise, your client and your life — and get 3 personalised digital offer ideas generated for you.</p>
        <ul style={s.introList}>
          <li style={s.introItem}><span style={s.dot}>→</span><span>4 short sections, 3 questions each</span></li>
          <li style={s.introItem}><span style={s.dot}>→</span><span>AI analyses your answers and generates 3 specific offer ideas</span></li>
          <li style={s.introItem}><span style={s.dot}>→</span><span>Each idea includes a name, description, price and speed to build</span></li>
          <li style={s.introItem}><span style={s.dot}>→</span><span>Plus a "start here" recommendation at the end</span></li>
        </ul>
        <button style={s.btnPrimary} onClick={() => setStep(1)}>Start the finder →</button>
      </div>
      <p style={{ fontSize: 12, color: "#aaa", marginTop: 12, textAlign: "center" }}>Built by Sue Parker · sueparker.net</p>
    </div>
  );

  if (loading) return (
    <div style={s.wrap}>
      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
      <div style={s.loadingWrap}>
        <div style={s.spinner}></div>
        <p style={{ fontSize: 15, color: "#555" }}>Analysing your answers...</p>
        <p style={{ fontSize: 13, color: "#aaa", marginTop: 6 }}>Generating your 3 personalised offer ideas</p>
      </div>
    </div>
  );

  if (step === 5) return (
    <div style={s.wrap}>
      <div style={s.progressBar}><div style={s.progressFill}></div></div>
      <span style={s.tag("green")}>Your results</span>
      <h1 style={s.h1}>Your 3 digital offer ideas</h1>
      <p style={s.sub}>Based on your answers — specific to you, not a generic list.</p>
      <div style={s.resultCard}>
        <p style={s.resultText}>{result}</p>
      </div>
      <div style={{ marginTop: 28, background: "#E1F5EE", borderRadius: 12, padding: "20px 24px" }}>
        <p style={{ fontSize: 14, fontWeight: 600, color: "#04342C", marginBottom: 6 }}>Ready to build one of these?</p>
        <p style={{ fontSize: 14, color: "#085041", lineHeight: 1.6 }}>I have 2 Done With You spots open right now. We build your offer, funnel and system together — in weeks, not months. <a href="https://sueparker.net" style={{ color: "#04342C", fontWeight: 600 }}>DM me "France" to start the conversation →</a></p>
      </div>
      <button style={s.restartBtn} onClick={() => { setStep(0); setAnswers({ 1: ["","",""], 2: ["","",""], 3: ["","",""], 4: ["","",""] }); setResult(""); }}>Start again</button>
    </div>
  );

  return (
    <div style={s.wrap}>
      <style>{`@keyframes spin { to { transform: rotate(360deg); } } textarea:focus { outline: none; border-color: #1D9E75; background: #fff; }`}</style>
      <div style={s.progressBar}><div style={s.progressFill}></div></div>
      <div style={s.stepChips}>
        {STEPS.map(s2 => (
          <span key={s2.id} style={s.chip(step === s2.id, step > s2.id)}>{s2.label}</span>
        ))}
      </div>
      <p style={s.eyebrow}>Section {step} of 4</p>
      <h1 style={s.h1}>{currentStep.title}</h1>
      <p style={s.sub}>{currentStep.subtitle}</p>

      {currentStep.questions.map((q, i) => (
        <div key={i} style={s.questionBlock}>
          <p style={s.qLabel}>{q}</p>
          <textarea
            style={s.textarea}
            placeholder="Write as much or as little as feels right..."
            value={answers[step][i]}
            onChange={e => updateAnswer(step, i, e.target.value)}
          />
        </div>
      ))}

      {error && <p style={s.error}>{error}</p>}

      <div style={{ marginTop: 8, display: "flex", alignItems: "center" }}>
        {step > 1 && <button style={s.btnSecondary} onClick={() => setStep(step - 1)}>← Back</button>}
        {step < 4 ? (
          <button
            style={allAnswered(step) ? s.btnPrimary : s.btnDisabled}
            onClick={() => allAnswered(step) && setStep(step + 1)}
          >
            Next →
          </button>
        ) : (
          <button
            style={allAnswered(step) ? s.btnPrimary : s.btnDisabled}
            onClick={() => allAnswered(step) && generateOffers()}
          >
            Generate my 3 offers →
          </button>
        )}
      </div>
      {!allAnswered(step) && <p style={{ fontSize: 12, color: "#aaa", marginTop: 10 }}>Answer all 3 questions to continue</p>}
    </div>
  );
}