/* NextStep Writers — interactive price calculator */
const { useState, useMemo, useEffect, useRef } = React;

/* ── EPS Payment Modal ─────────────────────────────────────── */
function EpsModal({ onClose, totalBDT, advanceBDT, service }) {
  const [name,    setName]    = useState('');
  const [phone,   setPhone]   = useState('');
  const [loading, setLoading] = useState(false);
  const [error,   setError]   = useState('');

  const apiBase = (window.BRANCH_CONFIG && window.BRANCH_CONFIG.apiBase) || '';

  async function handlePay() {
    if (!name.trim())  { setError('Please enter your name.');         return; }
    if (!phone.trim()) { setError('Please enter your phone number.'); return; }
    setLoading(true);
    setError('');
    try {
      const res = await fetch(apiBase + '/api/eps/initiate', {
        method:  'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          customerName:  name.trim(),
          customerPhone: phone.trim(),
          amount:        advanceBDT,
          serviceType:   service,
        }),
      });
      const data = await res.json();
      if (!res.ok || !data.paymentUrl) throw new Error(data.error || 'Payment initiation failed');
      window.location.href = data.paymentUrl;
    } catch (e) {
      setError(e.message || 'Something went wrong. Please try again.');
      setLoading(false);
    }
  }

  return (
    <div className="eps-overlay" onClick={e => { if (e.target === e.currentTarget) onClose(); }}>
      <div className="eps-modal">
        <button className="eps-close" onClick={onClose} aria-label="Close">×</button>
        <div className="eps-title">Pay Advance via EPS</div>
        <div className="eps-amount-row">
          <span>Amount due now (50% advance)</span>
          <strong className="mono">৳{advanceBDT.toLocaleString()}</strong>
        </div>
        <div className="eps-field">
          <label>Your name</label>
          <input
            className="eps-input"
            type="text"
            placeholder="Full name"
            value={name}
            onChange={e => setName(e.target.value)}
            disabled={loading}
          />
        </div>
        <div className="eps-field">
          <label>Phone number</label>
          <input
            className="eps-input"
            type="tel"
            placeholder="e.g. 01842699630"
            value={phone}
            onChange={e => setPhone(e.target.value)}
            disabled={loading}
            onKeyDown={e => e.key === 'Enter' && handlePay()}
          />
        </div>
        {error && <div className="eps-error">{error}</div>}
        <button className="eps-pay-btn" onClick={handlePay} disabled={loading}>
          {loading ? 'Redirecting…' : `Pay ৳${advanceBDT.toLocaleString()} via EPS`}
        </button>
        <p className="eps-fine">🔒 Secure payment · You will be redirected to EPS gateway</p>
      </div>
    </div>
  );
}

function Segmented({ options, value, onChange }) {
  return (
    <div className="seg" role="tablist">
      {options.map(o => (
        <button key={o.id} role="tab" aria-selected={value === o.id}
          className={"seg-btn" + (value === o.id ? " on" : "")}
          onClick={() => onChange(o.id)}>{o.label}</button>
      ))}
    </div>
  );
}

function Stepper({ value, setValue, min, max, step, unit }) {
  const clamp = v => Math.max(min, Math.min(max, v));
  return (
    <div className="count-control">
      <input type="range" min={min} max={max} step={step} value={value}
        onChange={e => setValue(+e.target.value)} className="count-range" />
      <div className="count-box">
        <button className="count-pm" onClick={() => setValue(clamp(value - step))} aria-label="decrease">–</button>
        <input className="count-num mono tabular" type="number" value={value}
          onChange={e => setValue(clamp(+e.target.value || min))} />
        <span className="count-unit mono">{unit}</span>
        <button className="count-pm" onClick={() => setValue(clamp(value + step))} aria-label="increase">+</button>
      </div>
    </div>
  );
}

function NSWCalculator() {
  const N = window.NSW;
  const availCurrencies = N.BRANCH_CURRENCIES || ['BDT','USD'];
  const [level, setLevel]       = useState("masters");
  const [service, setService]   = useState("thesis");
  const [countUnit, setUnit]    = useState("word");
  const [count, setCount]       = useState(12000);
  const [method, setMethod]     = useState("regression");
  const [dataset, setDataset]   = useState("provided");
  const [deadline, setDeadline] = useState("d14");
  const [addons, setAddons]     = useState(["turnitin"]);
  const [cur, setCur]           = useState(availCurrencies[0]);
  const [bump, setBump]         = useState(false);
  const [epsOpen, setEpsOpen]   = useState(false);

  const svc = N.SERVICES.find(s => s.id === service);
  const isFormatting = svc.unit === "page";

  // When switching service, snap count + unit to sensible defaults
  function pickService(id) {
    const s = N.SERVICES.find(x => x.id === id);
    setService(id);
    setUnit(s.unit === "page" ? "page" : "word");
    setCount(s.defaultCount);
    if (!s.needsData && dataset !== "na") setDataset("na");
    if (s.needsData && dataset === "na") setDataset("provided");
    window.NSWTrack?.("calc_service", { service: id });
  }

  const q = useMemo(() => N.quote({ level, service, count, countUnit, method, dataset, deadline, addons }),
    [level, service, count, countUnit, method, dataset, deadline, addons]);

  // little "tick" animation when total changes
  const prev = useRef(q.totalBDT);
  useEffect(() => {
    if (prev.current !== q.totalBDT) { setBump(true); const t = setTimeout(() => setBump(false), 360); prev.current = q.totalBDT; return () => clearTimeout(t); }
  }, [q.totalBDT]);

  const toggleAddon = id => setAddons(a => a.includes(id) ? a.filter(x => x !== id) : [...a, id]);

  // group methods for the select
  const methodGroups = useMemo(() => {
    const g = {};
    N.METHODS.forEach(m => { (g[m.group] = g[m.group] || []).push(m); });
    return g;
  }, []);

  const countMax = isFormatting ? 400 : (countUnit === "page" ? 600 : 60000);
  const countStep = isFormatting ? 5 : (countUnit === "page" ? 5 : 250);

  // ----- order summary text for WhatsApp -----
  const summary = useMemo(() => {
    const L = N.LEVELS.find(l => l.id === level).label;
    const M = N.METHODS.find(m => m.id === method).name;
    const D = N.DEADLINES.find(d => d.id === deadline).label;
    const DS = N.DATASET.find(d => d.id === dataset).label;
    const add = addons.map(id => N.ADDONS.find(a => a.id === id)?.label).filter(Boolean);
    return [
      `Hi NextStep Writers! I'd like to order:`,
      `• Service: ${svc.name}`,
      `• Level: ${L}`,
      `• Size: ${count.toLocaleString()} ${countUnit === "page" ? "pages" : "words"}`,
      !isFormatting ? `• Analysis: ${M}` : null,
      svc.needsData ? `• Dataset: ${DS}` : null,
      `• Deadline: ${D}`,
      add.length ? `• Add-ons: ${add.join(", ")}` : null,
      `• Estimated total: ${N.fmt(q.totalBDT, cur)} (advance ${N.fmt(q.advanceBDT, cur)})`,
      `Please confirm the final quote.`,
    ].filter(Boolean).join("\n");
  }, [level, service, count, countUnit, method, dataset, deadline, addons, q, cur]);

  const waLink = `https://wa.me/${N.WHATSAPP_NUMBER}?text=${encodeURIComponent(summary)}`;
  const handleWA = () => window.NSWTrack?.("whatsapp_click", { service, level, count, countUnit, method, totalBDT: q.totalBDT });

  return (
    <div className="calc">
      {/* ---------------- controls ---------------- */}
      <div className="calc-controls">

        <div className="field">
          <label className="field-label"><span className="fnum mono">01</span> Academic level</label>
          <Segmented options={N.LEVELS} value={level} onChange={setLevel} />
        </div>

        <div className="field">
          <label className="field-label"><span className="fnum mono">02</span> What do you need?</label>
          <div className="svc-grid">
            {N.SERVICES.map(s => (
              <button key={s.id} className={"svc-card" + (service === s.id ? " on" : "")}
                onClick={() => pickService(s.id)}>
                <span className="svc-ico" aria-hidden="true">{s.icon}</span>
                <span className="svc-name">{s.name}</span>
                <span className="svc-blurb">{s.blurb}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="field">
          <label className="field-label">
            <span className="fnum mono">03</span> {isFormatting ? "Length" : "Length"}
            {!isFormatting && (
              <span className="unit-toggle">
                <button className={countUnit === "word" ? "on" : ""} onClick={() => setUnit("word")}>Words</button>
                <button className={countUnit === "page" ? "on" : ""} onClick={() => setUnit("page")}>Pages</button>
              </span>
            )}
          </label>
          <Stepper value={count} setValue={setCount} min={isFormatting ? 10 : (countUnit === "page" ? 1 : 500)}
            max={countMax} step={countStep} unit={countUnit === "page" ? "pages" : "words"} />
          {!isFormatting && (
            <p className="field-hint mono">≈ {countUnit === "word"
              ? `${Math.ceil(count / N.WORDS_PER_PAGE)} pages`
              : `${(count * N.WORDS_PER_PAGE).toLocaleString()} words`} · {N.WORDS_PER_PAGE} words/page</p>
          )}
        </div>

        {!isFormatting && (
          <div className="field">
            <label className="field-label"><span className="fnum mono">04</span> Analysis / methodology</label>
            <div className="select-wrap">
              <select className="select" value={method} onChange={e => setMethod(e.target.value)}>
                {Object.entries(methodGroups).map(([g, list]) => (
                  g === "—"
                    ? list.map(m => <option key={m.id} value={m.id}>{m.name}</option>)
                    : <optgroup key={g} label={g}>
                        {list.map(m => <option key={m.id} value={m.id}>{m.name}{m.fee ? `  (+৳${m.fee.toLocaleString()})` : ""}</option>)}
                      </optgroup>
                ))}
              </select>
            </div>
          </div>
        )}

        {svc.needsData && (
          <div className="field">
            <label className="field-label"><span className="fnum mono">05</span> Dataset</label>
            <div className="opt-row">
              {N.DATASET.filter(d => d.id !== "na").map(d => (
                <button key={d.id} className={"opt-tile" + (dataset === d.id ? " on" : "")} onClick={() => setDataset(d.id)}>
                  <span className="opt-title">{d.label}</span>
                  <span className="opt-note">{d.note}</span>
                  {d.mult !== 1 && <span className="opt-delta mono">+{Math.round((d.mult - 1) * 100)}%</span>}
                </button>
              ))}
            </div>
          </div>
        )}

        <div className="field">
          <label className="field-label"><span className="fnum mono">{svc.needsData && !isFormatting ? "06" : "05"}</span> Deadline</label>
          <div className="dl-row">
            {N.DEADLINES.map(d => (
              <button key={d.id} className={"dl-chip" + (deadline === d.id ? " on" : "")} onClick={() => setDeadline(d.id)}>
                <span>{d.label}</span>
                {d.tag && <em className="dl-tag">{d.tag}</em>}
                {d.mult !== 1 && <span className="dl-mult mono">×{d.mult}</span>}
              </button>
            ))}
          </div>
        </div>

        <div className="field">
          <label className="field-label"><span className="fnum mono">{svc.needsData && !isFormatting ? "07" : "06"}</span> Add-ons</label>
          <div className="addon-list">
            {N.ADDONS.map(a => (
              <label key={a.id} className={"addon" + (addons.includes(a.id) ? " on" : "")}>
                <input type="checkbox" checked={addons.includes(a.id)} onChange={() => toggleAddon(a.id)} />
                <span className="addon-check" aria-hidden="true"></span>
                <span className="addon-label">{a.label}</span>
                <span className="addon-fee mono">+{N.fmt(a.fee, cur)}</span>
              </label>
            ))}
          </div>
        </div>
      </div>

      {/* ---------------- summary ---------------- */}
      <aside className="calc-summary">
        <div className="sum-card">
          <div className="sum-head">
            <span className="eyebrow">Live estimate</span>
            <div className="cur-toggle">
              {availCurrencies.map(k => (
                <button key={k} className={cur === k ? "on" : ""} onClick={() => setCur(k)}>{k}</button>
              ))}
            </div>
          </div>

          <div className={"sum-total" + (bump ? " bump" : "")}>
            <span className="sum-total-num tabular">{N.fmt(q.totalBDT, cur)}</span>
            <span className="sum-total-cap">estimated total</span>
          </div>

          <div className="sum-lines">
            {q.lines.map((l, i) => (
              <div className="sum-line" key={i}>
                <span className="sum-line-k">{l.k}<em>{l.sub}</em></span>
                <span className="sum-line-v mono tabular">{N.fmt(l.v, cur)}</span>
              </div>
            ))}
          </div>

          <div className="sum-advance">
            <span>Pay <strong>{Math.round(N.ADVANCE_PCT * 100)}%</strong> advance to start</span>
            <span className="mono tabular">{N.fmt(q.advanceBDT, cur)}</span>
          </div>

          <div className="sum-actions">
            <a className="btn btn-wa btn-lg" href={waLink} target="_blank" rel="noopener" onClick={handleWA}>
              <span className="wa-ico" aria-hidden="true">✆</span> Order on WhatsApp
            </a>
            <button className="btn btn-ghost" onClick={() => setEpsOpen(true)}>Pay advance via EPS</button>
          </div>

          <p className="sum-fine mono">Indicative price · final quote confirmed by your expert · {N.REVISIONS_FREE} free revisions</p>
        </div>

        <div className="sum-trust">
          <span>🔒 Confidential</span><span>✓ Plagiarism-free</span><span>✓ On-time</span>
        </div>
      </aside>

      {epsOpen && (
        <EpsModal
          onClose={() => setEpsOpen(false)}
          totalBDT={q.totalBDT}
          advanceBDT={q.advanceBDT}
          service={service}
        />
      )}
    </div>
  );
}

window.NSWCalculator = NSWCalculator;