// VisiO Tech — Interactive AI calculator (click-through prototype)
const { useState: useStateCalc, useMemo } = React;

const EXAMPLES = [
  'Počítám kolik materiálu nařezat, aby zbylo co nejméně odpadu',
  'Ručně kontroluji kvalitu výrobků na fotkách',
  'Přepisuji data z faktur do systému',
  'Odpovídám stále na stejné dotazy zákazníků',
];

const FREQ = [
  { id: 'daily',   label: 'Denně',   multiplier: 22 },
  { id: 'weekly',  label: 'Týdně',   multiplier: 4.3 },
  { id: 'monthly', label: 'Měsíčně', multiplier: 1 },
];

function Calculator({ prefillTask }) {
  const [step, setStep] = useStateCalc(1);
  const [task, setTask] = useStateCalc(prefillTask || 'Ručně kontroluji kvalitu výrobků na fotkách');
  const [rate, setRate] = useStateCalc(800);
  const [freq, setFreq] = useStateCalc('daily');
  const [hours, setHours] = useStateCalc(3);
  const [done, setDone] = useStateCalc(false);
  const [streaming, setStreaming] = useStateCalc(false);
  const [analysisText, setAnalysisText] = useStateCalc('');
  const [serverPricing, setServerPricing] = useStateCalc(null);
  const [streamError, setStreamError] = useStateCalc(null);
  const [clarifyingQuestions, setClarifyingQuestions] = useStateCalc([]);
  const [refined, setRefined] = useStateCalc(false);

  async function submitToBackend(clarifications) {
    setStreaming(true);
    setAnalysisText('');
    setStreamError(null);
    // Don't clear pricing/questions on refine — keeps prior result visible while streaming
    if (!clarifications) {
      setServerPricing(null);
      setClarifyingQuestions([]);
      setRefined(false);
    }
    setDone(true);

    try {
      const resp = await fetch('/api/calculate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ task, rate, hours, frequency: freq, clarifications }),
      });
      if (!resp.ok || !resp.body) throw new Error('network');

      const reader = resp.body.getReader();
      const decoder = new TextDecoder();
      let buf = '';
      while (true) {
        const { value, done: rdone } = await reader.read();
        if (rdone) break;
        buf += decoder.decode(value, { stream: true });
        const events = buf.split('\n\n');
        buf = events.pop() || '';
        for (const raw of events) {
          if (!raw.trim()) continue;
          const lines = raw.split('\n');
          let eventName = 'message';
          const dataLines = [];
          for (const line of lines) {
            if (line.startsWith('event: ')) eventName = line.slice(7);
            else if (line.startsWith('data: ')) dataLines.push(line.slice(6));
          }
          const dataStr = dataLines.join('\n');
          if (eventName === 'analysis') {
            try { setAnalysisText(JSON.parse(dataStr).text || ''); } catch {}
          } else if (eventName === 'pricing') {
            try {
              const p = JSON.parse(dataStr);
              setServerPricing(p);
              if (p.refined) setRefined(true);
            } catch {}
          } else if (eventName === 'questions') {
            try {
              const q = JSON.parse(dataStr).questions;
              if (Array.isArray(q)) setClarifyingQuestions(q);
            } catch {}
          } else if (eventName === 'error') {
            setStreamError('Spojení s AI nedostupné. Zkuste to za chvíli, nebo nás kontaktujte.');
          }
        }
      }
    } catch (err) {
      setStreamError('Něco se pokazilo. Zkuste to za chvíli, nebo nás kontaktujte.');
    } finally {
      setStreaming(false);
    }
  }

  React.useEffect(() => {
    if (prefillTask) {
      setTask(prefillTask);
      setStep(1);
      setDone(false);
    }
  }, [prefillTask]);

  // Client-side fallback pricing — MUST match shape of server/lib/pricing.js
  // (used only if SSE stream errors before pricing event arrives).
  // Defaults to 'medium' complexity profile.
  const results = useMemo(() => {
    const freqEntry = FREQ.find(f => f.id === freq) || FREQ[0];
    const freqMult = freqEntry.multiplier;
    const monthlyHours = +(hours * freqMult).toFixed(1);
    const monthlyCost = Math.round(monthlyHours * rate);
    const yearlyCost = monthlyCost * 12;
    const savePercent = 85;
    const newMonthlyCost = Math.round(monthlyCost * (1 - savePercent / 100));
    const monthlySavings = monthlyCost - newMonthlyCost;
    const yearlySavings = monthlySavings * 12;
    // Mirror COMPLEXITY_PROFILES.medium from server/lib/pricing.js
    const devHours = 65;
    const setupPrice = 19000;
    const monthlyFee = 5900;
    const year1Total = setupPrice + monthlyFee * 12;
    const netMonthlySavings = Math.max(1, monthlySavings - monthlyFee);
    const roiMonths = Math.max(1, Math.round(setupPrice / netMonthlySavings));
    const year1NetGain = yearlySavings - year1Total;
    return {
      monthlyHours, monthlyCost, yearlyCost,
      newMonthlyCost, monthlySavings, yearlySavings,
      hourlyRate: 1000, devHours, setupPrice, monthlyFee, year1Total, year1NetGain,
      recommended: year1NetGain > 0,
      roiMonths, savePercent, complexity: 'medium',
    };
  }, [rate, freq, hours]);

  const fmt = (n) => n.toLocaleString('cs-CZ');
  const canAdvance = step !== 1 || task.trim().length >= 10;

  function next() {
    if (!canAdvance) return;
    if (step < 3) {
      setStep(step + 1);
    } else {
      submitToBackend();
    }
  }
  function back() {
    if (done) { setDone(false); return; }
    if (step > 1) setStep(step - 1);
  }

  if (done) return (
    <CalcResults
      results={serverPricing || results}
      task={task} rate={rate} freq={freq} hours={hours}
      analysisText={analysisText}
      streaming={streaming}
      streamError={streamError}
      clarifyingQuestions={clarifyingQuestions}
      refined={refined}
      onRefine={(answers) => submitToBackend(answers)}
      onBack={back}
    />
  );

  return (
    <div className="calc-card" id="calculator">
      <div className="calc-progress">
        <div className="calc-progress-fill" style={{ width: `${(step - 1) / 2 * (520 - 72) }px` }}></div>
        {[1, 2, 3].map((n) => (
          <div className="calc-step-indicator" key={n}>
            <div className={`calc-circle ${step === n ? 'active' : ''} ${step > n ? 'done' : ''}`}>
              {step > n ? <Check size={16} /> : n}
            </div>
            <div className={`calc-step-label ${step === n ? 'active' : ''}`}>
              {['Úkol', 'Sazba', 'Frekvence'][n - 1]}
            </div>
          </div>
        ))}
      </div>

      {step === 1 && (
        <div className="calc-step">
          <h3>Popište úkol, který chcete automatizovat</h3>
          <textarea
            className="calc-textarea"
            value={task}
            onChange={(e) => setTask(e.target.value)}
            placeholder="Např. Každý den kopíruji data z e-mailů do tabulky..."
            rows={4}
          />
          <span className="calc-hint">Minimálně 10 znaků · {task.length}/10</span>
          <span className="calc-examples-label">Příklady:</span>
          <div className="calc-examples">
            {EXAMPLES.map((ex) => (
              <button key={ex} type="button" className="calc-pill" onClick={() => setTask(ex)}>{ex}</button>
            ))}
          </div>
        </div>
      )}

      {step === 2 && (
        <div className="calc-step">
          <h3>Jaká je vaše hodinová sazba?</h3>
          <div className="calc-rate-group">
            <input
              type="number" min="100" max="5000" step="50"
              value={rate} onChange={(e) => setRate(Number(e.target.value) || 0)}
              className="calc-rate-input"
            />
            <span className="calc-rate-currency">Kč / hod</span>
          </div>
          <input
            type="range" min="100" max="5000" step="50"
            value={rate} onChange={(e) => setRate(Number(e.target.value))}
            className="calc-slider"
          />
          <div className="calc-slider-labels">
            <span>100 Kč</span><span>5 000 Kč</span>
          </div>
          <p style={{ marginTop: 18, fontSize: 13, color: 'var(--fg-3)', lineHeight: 1.5 }}>
            Tip: použijte plně zatíženou sazbu (mzda + odvody + režie). Pro českou ekonomiku je medián 500–900 Kč/hod.
          </p>
        </div>
      )}

      {step === 3 && (
        <div className="calc-step">
          <h3>Jak často tento úkol děláte?</h3>
          <div className="calc-radio-group" role="radiogroup">
            {FREQ.map((f) => (
              <button
                key={f.id}
                role="radio"
                aria-checked={freq === f.id}
                className={`calc-radio ${freq === f.id ? 'selected' : ''}`}
                onClick={() => setFreq(f.id)}
              >
                <span className="calc-radio-dot"></span>
                {f.label}
              </button>
            ))}
          </div>
          <div className="calc-hours-group">
            <label htmlFor="calc-hours">Kolik hodin tím strávíte?</label>
            <input
              id="calc-hours"
              type="number" min="0.5" max="40" step="0.5"
              value={hours} onChange={(e) => setHours(Number(e.target.value) || 0)}
            />
            <span style={{ color: 'var(--fg-3)', fontSize: 14 }}>hodin</span>
          </div>
        </div>
      )}

      <div className="calc-nav">
        <button className="btn btn-ghost" onClick={back} disabled={step === 1}>← Zpět</button>
        <button className="btn btn-primary" onClick={next} disabled={!canAdvance}>
          {step === 3 ? 'Spočítat úsporu' : 'Pokračovat'}
          <ArrowRight size={16} />
        </button>
      </div>
    </div>
  );
}

function CalcResults({ results: r, onBack, task, rate, hours, freq, analysisText, streaming, streamError, clarifyingQuestions = [], refined, onRefine }) {
  const fmt = (n) => Math.round(n).toLocaleString('cs-CZ');
  const freqLabel = FREQ.find(f => f.id === freq).label.toLowerCase();

  const [formName, setFormName] = React.useState('');
  const [formEmail, setFormEmail] = React.useState('');
  const [formPhone, setFormPhone] = React.useState('');
  const [submitState, setSubmitState] = React.useState('idle'); // idle | sending | sent | error

  // Clarifications: answers to follow-up questions from Qwen (round 2)
  const [clarifyExpanded, setClarifyExpanded] = React.useState(false);
  const [clarifyAnswers, setClarifyAnswers] = React.useState({});
  function submitClarifications(e) {
    e.preventDefault();
    const filled = Object.fromEntries(
      Object.entries(clarifyAnswers).filter(([, v]) => v && v.trim().length > 0)
    );
    if (Object.keys(filled).length === 0) return;
    setClarifyExpanded(false);
    onRefine && onRefine(filled);
  }

  async function submitContact(e) {
    e.preventDefault();
    if (!formEmail.includes('@')) return;
    setSubmitState('sending');
    try {
      const resp = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          name: formName, email: formEmail, phone: formPhone,
          task,
          summary: `${hours}h ${freq} @ ${rate} Kč/h → roční úspora ${fmt(r?.yearlySavings || 0)} Kč, návratnost ${r?.roiMonths || '?'} měsíců`,
          turnstileToken: window.__turnstileToken || null,
        }),
      });
      if (!resp.ok) throw new Error('fail');
      setSubmitState('sent');
    } catch (_) {
      setSubmitState('error');
    }
  }

  return (
    <div className="calc-results" id="calculator-results">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 14, marginBottom: 8 }}>
        <h3>Výsledky analýzy</h3>
        <button className="btn btn-ghost btn-small" onClick={onBack}>← Upravit</button>
      </div>
      <div className="calc-analysis">
        {streamError ? (
          <p className="calc-analysis-error">{streamError}</p>
        ) : (
          <p className="calc-analysis-text">
            {analysisText || (streaming ? 'Analyzuji…' : '')}
            {streaming && <span className="calc-cursor">▋</span>}
          </p>
        )}
      </div>

      <div className="calc-cost-breakdown">
        <h4>Vaše aktuální náklady</h4>
        <p>
          {hours} hod {freqLabel} × {fmt(rate)} Kč/hod = <b style={{ color: 'var(--fg-1)', fontFamily: 'var(--font-mono)' }}>{fmt(r.monthlyCost)} Kč/měsíc</b> · {fmt(r.monthlyHours)} hod měsíčně
        </p>
      </div>

      <div className="calc-savings-grid">
        <div className="calc-savings-item">
          <span className="calc-savings-label">Úspora času</span>
          <span className="calc-savings-value green">−{r.savePercent}%</span>
        </div>
        <div className="calc-savings-item">
          <span className="calc-savings-label">Nové náklady</span>
          <span className="calc-savings-value">{fmt(r.newMonthlyCost)} Kč</span>
        </div>
        <div className="calc-savings-item">
          <span className="calc-savings-label">Měsíční úspora</span>
          <span className="calc-savings-value green">{fmt(r.monthlySavings)} Kč</span>
        </div>
        <div className="calc-savings-item">
          <span className="calc-savings-label">Roční úspora</span>
          <span className="calc-savings-value green">{fmt(r.yearlySavings)} Kč</span>
        </div>
      </div>

      <div className="calc-offer">
        <div className="calc-offer-header">
          <span className="calc-offer-eyebrow">NAŠE NABÍDKA</span>
          <h4>Automatizace běží v naší web aplikaci v ČR</h4>
          <p className="calc-offer-sub">Žádná instalace u vás, žádný vlastní hardware. Pouze přihlášení, používání, a my se staráme o provoz 24/7. <strong>Tento odhad vygeneroval náš lokální AI model na našem serveru v ČR</strong> — žádný cloud OpenAI/Azure.</p>
        </div>

        <div className="calc-offer-pricing">
          <div className="calc-offer-row">
            <div className="calc-offer-line">
              <span className="calc-offer-label">Setup (jednorázově)</span>
              <span className="calc-offer-value calc-offer-value--small">{fmt(r.setupPrice)} Kč</span>
            </div>
            <span className="calc-offer-hint">Pokrytí ~{r.devHours} h vývoje, testování a nasazení</span>
          </div>

          <div className="calc-offer-row">
            <div className="calc-offer-line">
              <span className="calc-offer-label">Přístup k web aplikaci</span>
              <span className="calc-offer-value">{fmt(r.monthlyFee)} Kč<span className="calc-offer-period">/měsíc</span></span>
            </div>
            <span className="calc-offer-hint">Hosting, monitoring, aktualizace, podpora</span>
          </div>

          <div className="calc-offer-divider"></div>

          <div className="calc-offer-row">
            <div className="calc-offer-line">
              <span className="calc-offer-label">Celkem 1. rok</span>
              <span className="calc-offer-value calc-offer-value--total">{fmt(r.year1Total)} Kč</span>
            </div>
            <span className="calc-offer-hint">Setup + 12× měsíční. Od roku 2 jen {fmt(r.monthlyFee * 12)} Kč/rok.</span>
          </div>
        </div>
      </div>

      <div className={`calc-roi ${r.recommended ? '' : 'calc-roi--warning'}`}>
        <div className="calc-roi-header">
          <span className="calc-roi-label">{r.recommended ? 'Návratnost vaší investice' : 'Upozornění na rentabilitu'}</span>
          <span className="calc-roi-value">
            {r.recommended ? `${r.roiMonths} ${r.roiMonths === 1 ? 'měsíc' : r.roiMonths < 5 ? 'měsíce' : 'měsíců'}` : '⚠ Není rentabilní'}
          </span>
        </div>

        {r.recommended ? (
          <React.Fragment>
            <div className="calc-roi-bar">
              <div className="calc-roi-bar-fill" style={{ width: `${Math.min(100, (12 / r.roiMonths) * 100)}%` }}></div>
            </div>
            <p className="calc-roi-note">
              Roční úspora <b>{fmt(r.yearlySavings)} Kč</b> − naše roční náklady <b>{fmt(r.year1Total)} Kč</b> = <b style={{ color: 'var(--color-success)' }}>+{fmt(r.year1NetGain)} Kč</b> ve váš prospěch už v 1. roce.
            </p>
            <p className="calc-roi-tagline">
              Návratnost za <b>{r.roiMonths} {r.roiMonths === 1 ? 'měsíc' : r.roiMonths < 5 ? 'měsíce' : 'měsíců'}</b> — a vy se můžete věnovat tomu, co vás baví a v čem jste opravdu nejlepší.
            </p>
          </React.Fragment>
        ) : (
          <p className="calc-roi-note">
            U vašeho objemu práce ({fmt(r.monthlyHours)} h/měsíc při {fmt(rate)} Kč/h) by se vám automatizace v 1. roce nevyplatila — náklady na setup + měsíční přístup ({fmt(r.year1Total)} Kč) přesahují úsporu ({fmt(r.yearlySavings)} Kč/rok). Doporučujeme nejprve počkat na vyšší objem nebo se spojit s námi pro individuální nabídku.
          </p>
        )}
      </div>

      {refined && (
        <div className="calc-refined-badge">
          ✓ Upřesněná cena podle vašich odpovědí
        </div>
      )}

      {clarifyingQuestions.length > 0 && !refined && !streaming && (
        <div className="calc-clarify">
          <button
            type="button"
            className="calc-clarify-toggle"
            onClick={() => setClarifyExpanded(!clarifyExpanded)}
            aria-expanded={clarifyExpanded}
          >
            <div className="calc-clarify-toggle-content">
              <span className="calc-clarify-toggle-eyebrow">PŘESNĚJŠÍ CENA</span>
              <span className="calc-clarify-toggle-title">
                Chcete přesnější cenu? Odpovězte na {clarifyingQuestions.length} {clarifyingQuestions.length === 1 ? 'otázku' : clarifyingQuestions.length < 5 ? 'otázky' : 'otázek'} od naší AI
              </span>
              <span className="calc-clarify-toggle-sub">
                Zdarma, do 30 sekund. Cena se může upřesnit nahoru i dolů.
              </span>
            </div>
            <span className="calc-clarify-toggle-arrow">{clarifyExpanded ? '−' : '+'}</span>
          </button>

          {clarifyExpanded && (
            <form className="calc-clarify-form" onSubmit={submitClarifications}>
              {clarifyingQuestions.map((q) => (
                <div className="calc-clarify-field" key={q.id}>
                  <label htmlFor={`clarify-${q.id}`}>{q.label}</label>
                  <input
                    id={`clarify-${q.id}`}
                    type="text"
                    placeholder={q.hint || ''}
                    value={clarifyAnswers[q.id] || ''}
                    onChange={(e) => setClarifyAnswers({ ...clarifyAnswers, [q.id]: e.target.value })}
                  />
                </div>
              ))}
              <div className="calc-clarify-submit-row">
                <button
                  type="submit"
                  className="btn btn-primary"
                  disabled={Object.values(clarifyAnswers).filter((v) => v && v.trim().length > 0).length === 0}
                >
                  Upřesnit cenu →
                </button>
                <span className="calc-clarify-hint">Stačí odpovědět na ty, na které víte odpověď.</span>
              </div>
            </form>
          )}
        </div>
      )}

      {submitState === 'sent' ? (
        <div className="calc-form-success">
          <h4>Hotovo. Ozveme se do 24 hodin na {formEmail}.</h4>
        </div>
      ) : (
        <form className="calc-form" onSubmit={submitContact} aria-labelledby="contact-form-heading">
          <h4 id="contact-form-heading" style={{ fontSize: 18, fontWeight: 600, marginBottom: 14 }}>Zaujalo vás to? Nechte nám kontakt.</h4>
          <div className="calc-form-row">
            <div className="calc-field-group">
              <label htmlFor="contact-name">Vaše jméno <span aria-hidden="true">*</span></label>
              <input id="contact-name" type="text" placeholder="Jan Novák" autoComplete="name" value={formName} onChange={(e) => setFormName(e.target.value)} required aria-required="true" />
            </div>
            <div className="calc-field-group">
              <label htmlFor="contact-email">E-mail <span aria-hidden="true">*</span></label>
              <input id="contact-email" type="email" placeholder="vas@email.cz" autoComplete="email" value={formEmail} onChange={(e) => setFormEmail(e.target.value)} required aria-required="true" />
            </div>
          </div>
          <div className="calc-field-group calc-field-group--full">
            <label htmlFor="contact-phone">Telefon <span style={{ color: 'var(--fg-3)', fontWeight: 400 }}>(nepovinné)</span></label>
            <input id="contact-phone" type="tel" placeholder="+420 xxx xxx xxx" autoComplete="tel" value={formPhone} onChange={(e) => setFormPhone(e.target.value)} />
          </div>
          <div className="cf-turnstile" data-sitekey={window.TURNSTILE_SITE_KEY || '1x00000000000000000000AA'} data-theme={document.documentElement.getAttribute('data-theme') === 'light' ? 'light' : 'dark'} data-callback="onTurnstileSuccess"></div>
          <div className="checkbox-row">
            <input type="checkbox" id="gdpr" defaultChecked required />
            <label htmlFor="gdpr">Souhlasím se zpracováním osobních údajů dle <a style={{ color: 'var(--color-primary-400)' }} href="/privacy">GDPR</a> a chci dostat nezávaznou konzultaci do 24 hodin.</label>
          </div>
          <div className="calc-submit-row">
            <button type="submit" className="btn btn-primary btn-large" disabled={submitState === 'sending'}>
              {submitState === 'sending' ? 'Odesílám…' : 'Chci nezávaznou konzultaci'}
            </button>
            {submitState === 'error' && <span style={{ color: '#f87171', fontSize: 13 }}>Chyba odeslání — zkuste znovu nebo info@visiotech.cz</span>}
            <span style={{ fontSize: 13, color: 'var(--fg-3)' }}>Odpověď do 24 h · Bez závazků</span>
          </div>
        </form>
      )}
    </div>
  );
}

Object.assign(window, { Calculator });