/* global React, FieldLabel, TextField, TextArea, Chips, Segmented, Dropdown, YesNoToggle, SectionDivider, PrimaryButton, PAOS */
const { useState } = React;

// ─────────────────────────────────────────────────────────────
// STEP 2 — Quick info form (single long screen)
// ─────────────────────────────────────────────────────────────
function Step2QuickInfo({ t, onNext, data, setData }) {
  const set = (k, v) => setData({ ...data, [k]: v });

  // Minimum completeness — any answered field would do for a mock,
  // but we'll require name + email so the CTA isn't trivially clickable.
  const canContinue = !!(data.name?.trim() && data.email?.trim());

  return (
    <div style={{ padding: '8px 24px 24px', display: 'flex', flexDirection: 'column', gap: 22 }}>
      {/* header */}
      <div>
        <div style={{
          fontFamily: 'Geist Mono, monospace', fontSize: 11,
          letterSpacing: '0.12em', textTransform: 'uppercase', color: t.primary,
          marginBottom: 8,
        }}>About 2 minutes</div>
        <h1 style={{
          fontFamily: '"Instrument Serif", Georgia, serif',
          fontSize: 30, lineHeight: 1.08, margin: 0, color: t.ink,
          letterSpacing: '-0.02em', fontWeight: 400, textWrap: 'balance',
        }}>First, the basics.</h1>
        <div style={{
          fontFamily: 'Geist, system-ui, sans-serif', fontSize: 14,
          color: t.inkSoft, marginTop: 8, lineHeight: 1.5,
        }}>
          Fast-fire — short answers only. The real conversation comes later.
        </div>
      </div>

      {/* ── BASICS ─────────────────────────────────────── */}
      <SectionDivider label="01 · You" t={t} />

      <div>
        <FieldLabel index={1} label="Full name & role" t={t} />
        <TextField
          value={data.name} onChange={(v) => set('name', v)}
          placeholder="Jane Reyes — Founder & CEO" t={t}
        />
      </div>

      <div>
        <FieldLabel index={2} label="Email you check daily" t={t} />
        <TextField
          value={data.email} onChange={(v) => set('email', v)}
          placeholder="jane@company.com" t={t} type="email"
          icon={<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="3.5" width="12" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.4"/><path d="M2.5 4.5L8 9l5.5-4.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>}
        />
      </div>

      <div>
        <FieldLabel index={3} label="Phone (with country code)" t={t} />
        <TextField
          value={data.phone} onChange={(v) => set('phone', v)}
          placeholder="+1 555 123 4567" t={t} type="tel"
          icon={<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 2h2.5L8 5L6 6.5a8 8 0 003.5 3.5L11 8l3 1.5V12c0 1.1-.9 2-2 2A10 10 0 012 4c0-1.1.9-2 2-2z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" fill="none"/></svg>}
        />
      </div>

      <div>
        <FieldLabel index={4} label="Where are you based" t={t} hint="Country + city" />
        <TextField
          value={data.location} onChange={(v) => set('location', v)}
          placeholder="Germany — Berlin" t={t}
        />
      </div>

      <div>
        <FieldLabel index={5} label="Languages you speak fluently" t={t} />
        <Chips
          options={PAOS.LANGUAGES}
          value={data.languages || []} onChange={(v) => set('languages', v)}
          t={t} multi
        />
      </div>

      {/* ── BUSINESS ───────────────────────────────────── */}
      <SectionDivider label="02 · Business" t={t} />

      <div>
        <FieldLabel index={6} label="How long have you been in your current business" t={t} />
        <Segmented
          options={PAOS.TENURE}
          value={data.tenure} onChange={(v) => set('tenure', v)} t={t}
          columns={3}
        />
      </div>

      <div>
        <FieldLabel index={7} label="Current monthly revenue" t={t} />
        <Dropdown
          options={PAOS.REVENUE}
          value={data.revenueNow} onChange={(v) => set('revenueNow', v)}
          t={t} placeholder="Select a band"
        />
      </div>

      <div>
        <FieldLabel index={8} label="Is that revenue consistent?" t={t} />
        <Segmented
          options={PAOS.REVENUE_CONSISTENCY}
          value={data.revenueConsistency} onChange={(v) => set('revenueConsistency', v)}
          t={t} columns={1}
        />
      </div>

      <div>
        <FieldLabel index={9} label="Revenue target in 120 days" t={t} />
        <Dropdown
          options={PAOS.REVENUE}
          value={data.revenueTarget} onChange={(v) => set('revenueTarget', v)}
          t={t} placeholder="Select a band"
        />
      </div>

      <div>
        <FieldLabel index={10} label="Who runs marketing + sales?" t={t} />
        <Chips
          options={PAOS.MARKETING_OWNER}
          value={data.marketingOwner} onChange={(v) => set('marketingOwner', v)}
          t={t} multi={false}
        />
      </div>

      <div>
        <FieldLabel index={11} label="Team size" t={t} />
        <Chips
          options={PAOS.TEAM_SIZE}
          value={data.teamSize} onChange={(v) => set('teamSize', v)}
          t={t} multi={false}
        />
      </div>

      {/* ── OPERATIONS (yes/no with follow-ups) ────────── */}
      <SectionDivider label="03 · Operations" t={t} />

      <YesNoBlock
        index={12} label="Running paid ads?" t={t}
        value={data.paidAds} onChange={(v) => set('paidAds', v)}
      >
        <TextArea
          value={data.adSpend} onChange={(v) => set('adSpend', v)}
          placeholder="Monthly ad spend & platforms" t={t} rows={2}
        />
      </YesNoBlock>

      <YesNoBlock
        index={13} label="Have a sales funnel set up?" t={t}
        value={data.salesFunnel} onChange={(v) => set('salesFunnel', v)}
        hint="We’ll walk through it either way in your voice memos."
      />

      <YesNoBlock
        index={14} label="Have case studies or measurable past results?" t={t}
        value={data.caseStudies} onChange={(v) => set('caseStudies', v)}
      >
        <TextArea
          value={data.caseStudiesDetail} onChange={(v) => set('caseStudiesDetail', v)}
          placeholder="Link or describe" t={t} rows={2}
        />
      </YesNoBlock>

      {/* ── BRAND ──────────────────────────────────────── */}
      <SectionDivider label="04 · Brand presence" t={t} />

      <div>
        <FieldLabel index={14} label="Platforms you're active on" t={t} />
        <Chips
          options={PAOS.PLATFORMS}
          value={data.platforms || []} onChange={(v) => set('platforms', v)}
          t={t} multi
        />
      </div>

      <div>
        <FieldLabel index={15} label="Content formats you produce" t={t} />
        <Chips
          options={PAOS.FORMATS}
          value={data.formats || []} onChange={(v) => set('formats', v)}
          t={t} multi
        />
      </div>

      <div>
        <FieldLabel index={16} label="How should your brand be perceived?" t={t} />
        <Chips
          options={PAOS.BRAND_PERCEPTION}
          value={data.perception || []} onChange={(v) => set('perception', v)}
          t={t} multi
        />
      </div>

      <div style={{ marginTop: 8 }}>
        <PrimaryButton t={t} onClick={onNext} disabled={!canContinue}>
          Continue →
        </PrimaryButton>
        {!canContinue && (
          <div style={{
            textAlign: 'center', marginTop: 10,
            fontFamily: 'Geist, system-ui, sans-serif', fontSize: 12,
            color: t.inkFaint,
          }}>
            Name + email needed to continue
          </div>
        )}
      </div>
    </div>
  );
}

function YesNoBlock({ index, label, hint, value, onChange, t, children }) {
  return (
    <div>
      <FieldLabel index={index} label={label} hint={hint} t={t} />
      <YesNoToggle value={value} onChange={onChange} t={t} />
      {value === 'yes' && children && (
        <div style={{
          marginTop: 10,
          animation: 'fadeUp 280ms ease both',
        }}>
          {children}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Step2QuickInfo });