// Pipeline - the kanban board (screen 01)

function Pipeline({ state, setState, onOpenJob, onOpenAI, view = 'board' }) {
  const trade = TRADES[state.tradeId];
  const jobs = JOBS_BY_TRADE[state.tradeId];
  const [filter, setFilter] = React.useState('all');

  const jobsByStage = {};
  STAGES.forEach(s => jobsByStage[s.id] = []);
  jobs.forEach(j => { if (jobsByStage[j.stage]) jobsByStage[j.stage].push(j); });

  const total = jobs.reduce((a, j) => a + (j.value || 0), 0);
  const approved = jobs.filter(j => ['approved', 'scheduled', 'in-progress', 'invoiced'].includes(j.stage)).reduce((a, j) => a + (j.value || 0), 0);
  const invoiced = jobs.filter(j => j.stage === 'invoiced').reduce((a, j) => a + (j.value || 0), 0);
  const overdue = 2;

  return (
    <div style={{ padding: '22px 22px 40px', display: 'flex', flexDirection: 'column', gap: 18 }}>
      {/* KPI strip */}
      <div data-tour="kpis" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
        <KPI label="Pipeline value (ex-GST)" value={fmtAUD(total)} sub={`${jobs.length} live jobs`} />
        <KPI label="Approved - this month" value={fmtAUD(approved)} sub="+$18,400 vs last month" tone="accent" />
        <KPI label="Awaiting payment" value={fmtAUD(invoiced)} sub={`${jobs.filter(j=>j.stage==='invoiced').length} invoices`} />
        <KPI label="Overdue" value={`${overdue} invoices`} sub="One is 11 days late" tone="warn" />
      </div>

      {/* Toolbar */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
        <div data-tour="new-job"><Btn variant="primary" size="md" icon="plus" onClick={onOpenAI}>New job</Btn></div>
        <div style={{ width: 1, height: 24, background: 'var(--border)', margin: '0 4px' }} />
        <Btn variant="secondary" size="md" icon="filter">All trades</Btn>
        <Btn variant="secondary" size="md" icon="user">Any tech</Btn>
        <Btn variant="secondary" size="md" icon="calendar">This week</Btn>
        <div style={{ flex: 1 }} />
        <div style={{ display: 'inline-flex', border: '1px solid var(--border)', borderRadius: 7, padding: 2, gap: 2, background: 'var(--surface)' }}>
          {[{ v: 'board', i: 'dash' }, { v: 'list', i: 'list' }, { v: 'calendar', i: 'calendar' }].map(o => (
            <button key={o.v} onClick={() => setState(s => ({ ...s, screen: o.v === 'list' ? 'jobs' : 'pipeline' }))} style={{
              display: 'inline-flex', alignItems: 'center', gap: 5, padding: '4px 10px', borderRadius: 5, border: 'none',
              background: ((o.v === 'list' && view === 'list') || (o.v === 'board' && view !== 'list')) ? 'var(--ink)' : 'transparent',
              color: ((o.v === 'list' && view === 'list') || (o.v === 'board' && view !== 'list')) ? 'var(--paper)' : 'var(--ink-60)',
              cursor: 'pointer', fontSize: 12, fontFamily: 'var(--sans)', fontWeight: 500,
            }}>
              <Icon name={o.i} size={12} /> {o.v}
            </button>
          ))}
        </div>
      </div>

      {view === 'list' ? <JobsListView jobs={jobs} onOpen={onOpenJob} trade={trade} />
        : <div data-tour="board"><Board jobsByStage={jobsByStage} onOpenJob={onOpenJob} onOpenAI={onOpenAI} trade={trade} /></div>}
    </div>
  );
}

function KPI({ label, value, sub, tone = 'neutral' }) {
  const styles = {
    neutral: { bg: 'var(--surface)', bd: 'var(--border)', fg: 'var(--ink)' },
    accent: { bg: 'var(--accent-tint)', bd: 'var(--accent-border)', fg: 'var(--ink)' },
    warn: { bg: '#FBF1E4', bd: '#F0D8B6', fg: 'var(--ink)' },
  }[tone];
  return (
    <div style={{ padding: '14px 16px', border: `1px solid ${styles.bd}`, borderRadius: 10, background: styles.bg }}>
      <div style={{ fontSize: 11, color: 'var(--ink-60)', fontFamily: 'var(--mono)', letterSpacing: 0.3, textTransform: 'uppercase' }}>{label}</div>
      <div style={{ fontSize: 22, fontWeight: 500, letterSpacing: -0.5, margin: '4px 0 2px', fontFamily: 'var(--display)', color: styles.fg }}>{value}</div>
      <div style={{ fontSize: 11.5, color: 'var(--ink-60)' }}>{sub}</div>
    </div>
  );
}

function Board({ jobsByStage, onOpenJob, onOpenAI, trade }) {
  return (
    <div style={{ display: 'flex', gap: 12, overflowX: 'auto', paddingBottom: 10, scrollbarWidth: 'thin' }}>
      {STAGES.map(stage => {
        const stageJobs = jobsByStage[stage.id] || [];
        return (
          <div key={stage.id} data-tour={`stage-${stage.id}`} style={{ minWidth: 248, width: 248, flexShrink: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 2px 8px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <span style={{ width: 7, height: 7, borderRadius: 4, background: stage.dot }} />
                <span style={{ fontSize: 11, fontFamily: 'var(--mono)', textTransform: 'uppercase', letterSpacing: 0.6, color: 'var(--ink-70)' }}>{stage.label}</span>
                <span style={{ fontSize: 11, fontFamily: 'var(--mono)', color: 'var(--ink-50)' }}>{stageJobs.length}</span>
              </div>
              <button style={{ padding: 3, border: 'none', background: 'transparent', cursor: 'pointer', color: 'var(--ink-50)', borderRadius: 4 }}>
                <Icon name="more" size={13} />
              </button>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {stageJobs.map((j, i) => <div key={j.id} data-tour={stage.id === 'enquiry' && i === 0 ? 'hot-card' : undefined}><JobCard job={j} onOpen={j.stage === 'quoting' && j.id === FOCUS_JOB[trade.id].id ? onOpenAI : onOpenJob} trade={trade} /></div>)}
              <button onClick={onOpenAI} style={{
                padding: '10px 12px', border: '1px dashed var(--border-strong)', borderRadius: 8,
                background: 'transparent', cursor: 'pointer', color: 'var(--ink-50)',
                fontSize: 11.5, fontFamily: 'var(--mono)', letterSpacing: 0.3,
                display: 'flex', alignItems: 'center', gap: 6, justifyContent: 'center',
              }}>
                <Icon name="plus" size={11} /> drop here
              </button>
            </div>
          </div>
        );
      })}
    </div>
  );
}

function JobCard({ job, onOpen, trade }) {
  const [hover, setHover] = React.useState(false);
  const isFocus = job.id === FOCUS_JOB[trade.id].id;
  return (
    <button onClick={onOpen}
      onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      style={{
        display: 'block', width: '100%', textAlign: 'left', padding: 12,
        background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 9,
        cursor: 'pointer', boxShadow: hover ? '0 4px 12px -4px rgba(20,18,12,0.12)' : 'none',
        transform: hover ? 'translateY(-1px)' : 'none',
        transition: 'all 140ms ease',
        position: 'relative', fontFamily: 'var(--sans)',
      }}>
      {isFocus && <span style={{ position: 'absolute', top: 8, right: 8, width: 6, height: 6, borderRadius: 3, background: 'var(--accent-deep)' }} />}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, color: 'var(--ink-50)', letterSpacing: 0.2 }}>{job.id}</span>
        <div style={{ flex: 1 }} />
        {job.hot && <Chip tone="warn" icon="flag" style={{ padding: '1px 6px', fontSize: 10 }}>Hot</Chip>}
        {job.flagged && <Chip tone="warn" style={{ padding: '1px 6px', fontSize: 10 }}>{job.flagged}</Chip>}
        <Chip tone="ghost" style={{ padding: '1px 6px', fontSize: 10 }}>{trade.label}</Chip>
      </div>
      <div style={{ fontSize: 13, fontWeight: 500, letterSpacing: -0.1, color: 'var(--ink)', marginBottom: 3, textWrap: 'pretty' }}>{job.title}</div>
      <div style={{ fontSize: 11.5, color: 'var(--ink-60)', marginBottom: 10 }}>{job.customer} · {job.address}</div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--ink)', fontWeight: 500 }}>{fmtAUD(job.value)}</span>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 10.5, color: 'var(--ink-50)' }}>{job.age}</span>
          {job.tech && <Avatar initials={job.tech} size={18} />}
        </div>
      </div>
      {job.progress != null && (
        <div style={{ marginTop: 8, height: 3, background: 'var(--surface-3)', borderRadius: 2, overflow: 'hidden' }}>
          <div style={{ width: `${job.progress * 100}%`, height: '100%', background: 'var(--accent)' }} />
        </div>
      )}
      {job.scheduledFor && (
        <div style={{ marginTop: 8, fontSize: 10.5, fontFamily: 'var(--mono)', color: 'var(--ink-60)', display: 'flex', alignItems: 'center', gap: 4 }}>
          <Icon name="calendar" size={11} /> {job.scheduledFor}
        </div>
      )}
    </button>
  );
}

function JobsListView({ jobs, onOpen, trade }) {
  return (
    <div style={{ border: '1px solid var(--border)', borderRadius: 10, background: 'var(--surface)', overflow: 'hidden' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: '90px 1fr 200px 120px 100px 80px 100px',
        padding: '10px 16px', background: 'var(--surface-2)', borderBottom: '1px solid var(--border)',
        fontSize: 10, fontFamily: 'var(--mono)', color: 'var(--ink-60)', textTransform: 'uppercase', letterSpacing: 0.6,
      }}>
        <div>Job</div><div>Title</div><div>Customer</div><div>Stage</div><div>Value</div><div>Age</div><div>Tech</div>
      </div>
      {jobs.map((j, i) => (
        <button key={j.id} onClick={onOpen} style={{
          display: 'grid', gridTemplateColumns: '90px 1fr 200px 120px 100px 80px 100px',
          padding: '12px 16px', borderBottom: i < jobs.length - 1 ? '1px solid var(--border)' : 'none',
          background: 'transparent', border: 'none', width: '100%', textAlign: 'left',
          cursor: 'pointer', fontFamily: 'var(--sans)', fontSize: 13, alignItems: 'center',
        }}
          onMouseEnter={e => e.currentTarget.style.background = 'var(--surface-2)'}
          onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11.5, color: 'var(--ink-60)' }}>{j.id}</span>
          <span style={{ fontWeight: 500 }}>{j.title} {j.hot && <Chip tone="warn" style={{ marginLeft: 6, fontSize: 10 }}>Hot</Chip>}</span>
          <span style={{ color: 'var(--ink-70)' }}>{j.customer}</span>
          <span><Chip tone={j.stage === 'paid' ? 'sage' : (j.stage === 'quoting' ? 'accent' : 'neutral')}>{STAGES.find(s => s.id === j.stage).label}</Chip></span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 12 }}>{fmtAUD(j.value)}</span>
          <span style={{ fontFamily: 'var(--mono)', fontSize: 11.5, color: 'var(--ink-60)' }}>{j.age}</span>
          <span>{j.tech && <Avatar initials={j.tech} size={22} />}</span>
        </button>
      ))}
    </div>
  );
}

Object.assign(window, { Pipeline });