// Operator profile, the money page
const OperatorProfile = ({ nav, route }) => {
  const D = window.__DSC_DATA;
  const op = D.operators.find(o => o.id === route.id) || D.operators[0];
  const [tab, setTab] = React.useState('Overview');
  const [favorited, setFavorited] = React.useState(false);
  const [contactOpen, setContactOpen] = React.useState(false);

  return (
    <div className="page">
      {/* Breadcrumb */}
      <div className="container" style={{ padding: '16px 32px 0' }}>
        <div className="mono muted" style={{ fontSize: 11 }}>
          <a onClick={() => nav({ page: 'home' })} style={{ cursor: 'pointer' }}>Home</a> /{' '}
          <a onClick={() => nav({ page: 'directory' })} style={{ cursor: 'pointer' }}>Operators</a> /{' '}
          <span style={{ color: 'var(--ink)' }}>{op.name}</span>
        </div>
      </div>

      {/* Claim banner, only if profile is unclaimed */}
      {!op.claimed && (
        <div className="container" style={{ padding: '16px 32px 0' }}>
          <div className="card" style={{ padding: '14px 18px', background: 'var(--bg-2)', display: 'flex', alignItems: 'center', gap: 16, justifyContent: 'space-between', flexWrap: 'wrap' }}>
            <div>
              <div className="mono muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 2 }}>Unclaimed profile</div>
              <div style={{ fontSize: 14 }}>Are you {op.name}? Claim this profile to manage your listing and respond to leads.</div>
            </div>
            <ClaimButton entityType="operator" entity={op} size="md" variant="primary" />
          </div>
        </div>
      )}

      {/* Hero */}
      <section>
        <div className="container" style={{ padding: '20px 32px 0' }}>
          <DotFormation variant="arc" color={op.hex || '#4a6fff'} density={120} size="wide" label={op.name.toUpperCase()} subtitle={[op.fleet ? `${op.fleet} drones` : null, op.city].filter(Boolean).join(' · ')} />

          <div style={{ display: 'grid', gridTemplateColumns: '1fr 360px', gap: 40, marginTop: 28, marginBottom: 24 }}>
            <div>
              <div style={{ display: 'flex', gap: 8, marginBottom: 12 }}>
                {op.verified && <span className="chip accent" style={{ fontSize: 10 }}><VerifiedIcon /> Verified</span>}
                {op.skyrender && <SkyRenderBadge />}
              </div>
              <h1 style={{ fontFamily: 'var(--ff-display)', fontSize: 56, margin: '0 0 8px', letterSpacing: '-0.03em', fontWeight: 400 }}>{op.name}</h1>
              <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 20, color: 'var(--ink-2)', fontSize: 14, flexWrap: 'wrap' }}>
                {op.city && <span>{op.city}</span>}
                {op.fleet && <><span className="mono">·</span><span>{op.fleet.toLocaleString()} drone fleet</span></>}
                {op.founded && <><span className="mono">·</span><span>Est. {op.founded}</span></>}
                {op.rating > 0 && <><span className="mono">·</span><span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Stars filled={Math.round(op.rating)} size={13} /> <strong style={{ color: 'var(--ink)' }}>{op.rating}</strong></span></>}
              </div>
              <p style={{ fontSize: 18, color: 'var(--ink-2)', maxWidth: 640, lineHeight: 1.5, margin: 0 }}>{op.headline}</p>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <button className="btn btn-primary btn-lg" onClick={() => setContactOpen(true)}>Request a quote</button>
              <div style={{ display: 'flex', gap: 10 }}>
                <button className="btn" style={{ flex: 1 }} onClick={() => setFavorited(!favorited)}>{favorited ? '♥ Saved' : '♡ Save'}</button>
                <button className="btn" style={{ flex: 1 }}>Share</button>
              </div>
              <div className="card" style={{ padding: 16, marginTop: 8, background: 'var(--bg-2)' }}>
                <div className="mono muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8 }}>Typical response time</div>
                <div style={{ fontFamily: 'var(--ff-display)', fontSize: 28, lineHeight: 1 }}>2h 40m</div>
                <div className="mono muted" style={{ fontSize: 11, marginTop: 6 }}>Last inquiry · 34 min ago</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Tabs */}
      <div style={{ borderBottom: '1px solid var(--line)', position: 'sticky', top: 64, background: 'var(--bg)', zIndex: 20 }}>
        <div className="container" style={{ padding: '0 32px', display: 'flex', gap: 28 }}>
          {['Overview', 'Portfolio', 'Fleet & Capabilities'].map(t => (
            <button key={t} onClick={() => setTab(t)} style={{
              padding: '14px 0',
              borderBottom: tab === t ? '2px solid var(--ink)' : '2px solid transparent',
              fontSize: 13, fontWeight: tab === t ? 600 : 400,
              color: tab === t ? 'var(--ink)' : 'var(--ink-3)',
            }}>{t}</button>
          ))}
        </div>
      </div>

      <div className="container" style={{ padding: '40px 32px 80px', display: 'grid', gridTemplateColumns: '1fr 320px', gap: 48 }}>
        <div>
          {tab === 'Overview' && (
            <div>
              <h2 style={{ fontFamily: 'var(--ff-display)', fontSize: 28, margin: '0 0 16px', fontWeight: 400, letterSpacing: '-0.02em' }}>About {op.name}</h2>
              <p style={{ fontSize: 15, color: 'var(--ink-2)', lineHeight: 1.7, marginBottom: 32 }}>
                {op.headline}
              </p>

              <div className="grid grid-2" style={{ marginBottom: 32 }}>
                <div className="card" style={{ padding: 16 }}>
                  <div className="mono muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8 }}>Location</div>
                  <div style={{ fontSize: 14 }}>{op.city}</div>
                  {(op.region || op.country) && <div className="mono muted" style={{ fontSize: 11, marginTop: 2 }}>{[op.region, op.country].filter(Boolean).join(' · ')}</div>}
                </div>
                <div className="card" style={{ padding: 16 }}>
                  <div className="mono muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8 }}>Founded</div>
                  <div style={{ fontSize: 14 }}>{op.founded || '—'}</div>
                </div>
              </div>

              <h3 style={{ fontFamily: 'var(--ff-display)', fontSize: 22, margin: '0 0 16px', fontWeight: 400 }}>Specialties</h3>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 32 }}>
                {op.specialties.length
                  ? op.specialties.map(s => <span key={s} className="chip">{s}</span>)
                  : <span className="muted" style={{ fontSize: 13 }}>No specialties listed.</span>}
              </div>

              <h3 style={{ fontFamily: 'var(--ff-display)', fontSize: 22, margin: '0 0 12px', fontWeight: 400 }}>Certifications</h3>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {op.certs.length
                  ? op.certs.map(c => <span key={c} className="chip accent">{c}</span>)
                  : <span className="muted" style={{ fontSize: 13 }}>No certifications on file.</span>}
              </div>
            </div>
          )}

          {tab === 'Portfolio' && (
            <div>
              <h2 style={{ fontFamily: 'var(--ff-display)', fontSize: 28, margin: '0 0 16px', fontWeight: 400, letterSpacing: '-0.02em' }}>Portfolio</h2>
              {op.video ? (
                <p style={{ color: 'var(--ink-2)', fontSize: 14, marginBottom: 16 }}>This operator has portfolio video on file. Full gallery upload is coming soon.</p>
              ) : (
                <p style={{ color: 'var(--ink-2)', fontSize: 14, marginBottom: 16 }}>No portfolio has been uploaded yet.</p>
              )}
              {!op.claimed && (
                <div className="card" style={{ padding: 16, background: 'var(--bg-2)' }}>
                  <div className="mono muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 6 }}>Unclaimed</div>
                  <div style={{ fontSize: 14, color: 'var(--ink-2)' }}>Claim this profile to upload shows, cover photos, and a reel.</div>
                </div>
              )}
            </div>
          )}

          {tab === 'Fleet & Capabilities' && (
            <div>
              <h2 style={{ fontFamily: 'var(--ff-display)', fontSize: 28, margin: '0 0 24px', fontWeight: 400, letterSpacing: '-0.02em' }}>Fleet &amp; Capabilities</h2>

              <div className="grid grid-2" style={{ marginBottom: 32 }}>
                <div className="card" style={{ padding: 20 }}>
                  <div className="mono muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8 }}>Fleet size</div>
                  <div style={{ fontFamily: 'var(--ff-display)', fontSize: 36, lineHeight: 1, marginBottom: 4 }}>{op.fleet ? op.fleet.toLocaleString() : '—'}</div>
                  <div className="mono muted" style={{ fontSize: 11 }}>max drones</div>
                </div>
                {op.platform && (
                  <div className="card" style={{ padding: 20 }}>
                    <div className="mono muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8 }}>Technology / platform</div>
                    <div style={{ fontFamily: 'var(--ff-display)', fontSize: 22, lineHeight: 1.2, marginBottom: 4 }}>{op.platform}</div>
                  </div>
                )}
                {op.insurance > 0 && (
                  <div className="card" style={{ padding: 20 }}>
                    <div className="mono muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8 }}>General insurance</div>
                    <div style={{ fontFamily: 'var(--ff-display)', fontSize: 36, lineHeight: 1, marginBottom: 4 }}>${op.insurance}M</div>
                    <div className="mono muted" style={{ fontSize: 11 }}>coverage</div>
                  </div>
                )}
                <div className="card" style={{ padding: 20 }}>
                  <div className="mono muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 8 }}>SkyRender</div>
                  <div style={{ fontFamily: 'var(--ff-display)', fontSize: 22, lineHeight: 1.2, marginBottom: 4 }}>{op.skyrender ? 'Available' : 'Not available'}</div>
                </div>
              </div>

              <h3 style={{ fontFamily: 'var(--ff-display)', fontSize: 22, margin: '0 0 12px', fontWeight: 400 }}>Certifications</h3>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {op.certs.length
                  ? op.certs.map(c => <span key={c} className="chip accent">{c}</span>)
                  : <span className="muted" style={{ fontSize: 13 }}>No certifications on file.</span>}
              </div>
            </div>
          )}

        </div>

        {/* Right rail */}
        <aside style={{ position: 'sticky', top: 140, alignSelf: 'start' }}>
          <div className="card" style={{ padding: 20, marginBottom: 16 }}>
            <div className="mono muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 12 }}>At a glance</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13 }}>
              {op.rating > 0 && <div style={{ display: 'flex', justifyContent: 'space-between' }}><span className="muted">Rating</span><span>{op.rating}</span></div>}
              {op.fleet && <div style={{ display: 'flex', justifyContent: 'space-between' }}><span className="muted">Fleet</span><span>{op.fleet.toLocaleString()} drones</span></div>}
              {op.founded && <div style={{ display: 'flex', justifyContent: 'space-between' }}><span className="muted">Founded</span><span>{op.founded}</span></div>}
              {op.insurance > 0 && <div style={{ display: 'flex', justifyContent: 'space-between' }}><span className="muted">Insurance</span><span>${op.insurance}M</span></div>}
              {op.platform && <div style={{ display: 'flex', justifyContent: 'space-between' }}><span className="muted">Platform</span><span>{op.platform}</span></div>}
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span className="muted">SkyRender</span><span>{op.skyrender ? 'Yes' : 'No'}</span></div>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}><span className="muted">Verified</span><span>{op.verified ? 'Yes' : 'No'}</span></div>
            </div>
          </div>

          <div className="card" style={{ padding: 20, background: 'var(--bg-2)' }}>
            <div className="mono muted" style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em', marginBottom: 10 }}>Also consider</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {D.operators.filter(o => o.id !== op.id).slice(0, 3).map(o => (
                <a key={o.id} onClick={() => nav({ page: 'operator', id: o.id })} style={{ cursor: 'pointer', display: 'flex', gap: 10, padding: 8, borderRadius: 4 }}>
                  <span style={{ width: 32, height: 32, background: o.hex, borderRadius: 4, flexShrink: 0 }} />
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 500 }}>{o.name}</div>
                    <div className="mono muted" style={{ fontSize: 10 }}>{o.city}</div>
                  </div>
                </a>
              ))}
            </div>
          </div>
        </aside>
      </div>

      {contactOpen && <QuoteModal op={op} onClose={() => setContactOpen(false)} />}
    </div>
  );
};

// Quote request modal — POSTs to /api/quotes with assigned_operator_id
const QuoteModal = ({ op, onClose }) => {
  const [form, setForm] = React.useState({ name: '', email: '', date: '', budget: '', message: '' });
  const [submitting, setSubmitting] = React.useState(false);
  const [err, setErr] = React.useState('');
  const [done, setDone] = React.useState(null);

  const submit = async (e) => {
    e.preventDefault();
    setErr(''); setSubmitting(true);
    try {
      const res = await fetch((window.__API_BASE||'') + '/api/quotes', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          client_name: form.name,
          client_email: form.email,
          event_date: form.date,
          budget: form.budget,
          message: form.message,
          assigned_operator_id: op.id,
        }),
      });
      const body = await res.json();
      if (!res.ok) throw new Error(body.error || 'Submission failed');
      setDone(body);
      window.__toast?.('Quote sent to ' + op.name + ' · ' + (body.ref || `#${body.id}`));
    } catch (ex) {
      setErr(ex.message);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 200 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: 'var(--bg)', width: 520, padding: 32, borderRadius: 4 }}>
        {done ? (
          <>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Sent · {done.ref || `#${done.id}`}</div>
            <h3 style={{ fontFamily: 'var(--ff-display)', fontSize: 24, margin: '0 0 14px', fontWeight: 400 }}>Quote request on the way.</h3>
            <p style={{ color: 'var(--ink-2)', fontSize: 14, marginBottom: 20 }}>{op.name} has been notified. You'll hear back at <strong>{form.email}</strong>.</p>
            <button className="btn btn-primary" onClick={onClose}>Close</button>
          </>
        ) : (
          <form onSubmit={submit}>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Contact {op.name}</div>
            <h3 style={{ fontFamily: 'var(--ff-display)', fontSize: 24, margin: '0 0 20px', fontWeight: 400 }}>Request a quote</h3>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <input className="input" required placeholder="Your name" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
              <input className="input" required type="email" placeholder="Email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
              <div style={{ display: 'flex', gap: 8 }}>
                <input className="input" placeholder="Event date (e.g. June 14, 2026)" style={{ flex: 1 }} value={form.date} onChange={(e) => setForm({ ...form, date: e.target.value })} />
                <select className="select" style={{ flex: 1 }} value={form.budget} onChange={(e) => setForm({ ...form, budget: e.target.value })}>
                  <option value="">Est. budget</option>
                  <option>Under $50k</option>
                  <option>$50k–$100k</option>
                  <option>$100k–$250k</option>
                  <option>$250k–$500k</option>
                  <option>$500k+</option>
                </select>
              </div>
              <textarea className="textarea" placeholder="Describe your event, location, crowd size, anything special…" value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} />
              {err && <div style={{ color: 'oklch(55% 0.2 25)', fontSize: 13 }}>{err}</div>}
              <button type="submit" className="btn btn-primary btn-lg" disabled={submitting}>{submitting ? 'Sending…' : 'Send request'}</button>
              <button type="button" className="btn" onClick={onClose}>Cancel</button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { OperatorProfile, QuoteModal });