/* v2 Client Dashboard. Assembles jurisdiction posture, matter overview,
   cause-of-action picker, evidence summary, readiness checklist, and handoff prompts.
   Replaces the v1 single-screen dashboard. */

const MATTER = {
  title: 'Chen v. Northbay Contracting',
  type: 'Small claims · Breach of contract',
  filed: 'Drafting · not yet filed',
  amount: '$8,420',
  daysToHearing: 18,
  parties: { plaintiff: 'Marcus Chen (you)', defendant: 'Northbay Contracting LLC' },
};

const DashboardV2 = ({ jx, onNav, onOpenHandoff }) => {
  const [selectedCauses, setSelectedCauses] = React.useState(['breach-contract']);
  const [predictiveOptIn, setPredictiveOptIn] = React.useState(false);
  const [section, setSection] = React.useState('overview');
  const j = JURISDICTIONS[jx];
  const isUtah = jx === 'utah';

  const sections = [
    { id: 'overview', label: 'Overview' },
    { id: 'theory', label: 'Legal theory' },
    { id: 'readiness', label: 'Readiness check' },
  ];

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {/* Top jurisdiction ribbon */}
      <JurisdictionRibbon jx={jx} onChange={() => {}}/>

      {/* Matter header */}
      <div style={{ padding: '20px 32px 14px', borderBottom: `1px solid ${THEME.line}`, display: 'flex', alignItems: 'flex-end', gap: 18 }}>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
            <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 600 }}>My matter</div>
            <div style={{ width: 3, height: 3, borderRadius: 2, background: THEME.textMute }}/>
            <div style={{ fontSize: 11, color: THEME.textMute }}>{MATTER.type}</div>
          </div>
          <div style={{ fontFamily: 'Fraunces', fontSize: 32, color: THEME.text, fontWeight: 500, letterSpacing: -0.6, lineHeight: 1.05 }}>
            {MATTER.title}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 8 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: THEME.textDim }}>
              <div style={{ width: 6, height: 6, borderRadius: 3, background: THEME.warning }}/>
              {MATTER.filed}
            </div>
            <div style={{ fontSize: 12, color: THEME.textDim }}>Claim · {MATTER.amount}</div>
            <div style={{ fontSize: 12, color: THEME.textDim }}>{j.smallClaimsForm}</div>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 8 }}>
          <div onClick={() => onOpenHandoff('review')} style={{
            padding: '9px 14px', borderRadius: 9, cursor: 'pointer',
            background: 'transparent', border: `1px solid ${THEME.line}`,
            color: THEME.text, fontSize: 12.5, fontWeight: 600,
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <Icon d={Icons.shield} size={14} stroke={THEME.textDim}/>
            Get attorney review
          </div>
          <div style={{
            padding: '9px 16px', borderRadius: 9, cursor: 'pointer',
            background: THEME.blue, color: '#fff', fontSize: 12.5, fontWeight: 600,
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <Icon d={Icons.download} size={14} stroke="#fff"/>
            Generate packet
          </div>
        </div>
      </div>

      {/* Section tabs */}
      <div style={{ padding: '0 32px', borderBottom: `1px solid ${THEME.line}`, display: 'flex', gap: 4 }}>
        {sections.map(s => {
          const a = section === s.id;
          return (
            <div key={s.id} onClick={() => setSection(s.id)} style={{
              padding: '12px 16px', cursor: 'pointer', fontSize: 13, fontWeight: 600,
              color: a ? THEME.text : THEME.textDim,
              borderBottom: `2px solid ${a ? THEME.blue : 'transparent'}`,
            }}>{s.label}</div>
          );
        })}
      </div>

      {/* Body */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '24px 32px' }}>
        {section === 'overview' && (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18, maxWidth: 920 }}>
            {/* 4-stat strip */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
              {[
                { label: 'Days to hearing', value: '18', tone: THEME.warning, sub: 'Apr 16, 9:30 AM' },
                { label: 'Evidence items', value: '14', tone: THEME.blue, sub: '4 elements covered' },
                { label: 'Readiness', value: '78%', tone: THEME.success, sub: '17 of 22 items' },
                { label: 'Damages claimed', value: '$8,420', tone: THEME.accent, sub: `Under ${j.smallClaimsCapLabel} cap` },
              ].map((s, i) => (
                <div key={i} style={{
                  padding: '14px 16px', borderRadius: 12,
                  background: THEME.surface, border: `1px solid ${THEME.line}`,
                }}>
                  <div style={{ fontSize: 10.5, color: THEME.textMute, letterSpacing: 1, textTransform: 'uppercase', fontWeight: 600 }}>{s.label}</div>
                  <div style={{ fontFamily: 'Fraunces', fontSize: 28, color: THEME.text, fontWeight: 500, letterSpacing: -0.5, marginTop: 6, lineHeight: 1 }}>{s.value}</div>
                  <div style={{ fontSize: 11.5, color: THEME.textDim, marginTop: 6 }}>{s.sub}</div>
                </div>
              ))}
            </div>

            {/* What's next */}
            <div style={{
              padding: '20px 22px', borderRadius: 14,
              background: `linear-gradient(135deg, ${THEME.blueSoft}, transparent)`,
              border: `1px solid ${THEME.blue}30`,
            }}>
              <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 1.2, textTransform: 'uppercase', fontWeight: 600, marginBottom: 4 }}>What's next</div>
              <div style={{ fontFamily: 'Fraunces', fontSize: 22, color: THEME.text, fontWeight: 500, letterSpacing: -0.3, marginBottom: 10 }}>
                Two readiness items to finish, then your packet is ready.
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                {[
                  { label: 'Add receipts for repair work you paid out-of-pocket', tone: THEME.warning },
                  { label: 'Choose service of process method (certified mail vs. process server)', tone: THEME.warning },
                ].map((item, i) => (
                  <div key={i} style={{
                    display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 9,
                    background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.04)' : 'rgba(255,255,255,0.6)',
                    border: `1px solid ${THEME.lineSoft}`,
                  }}>
                    <div style={{ width: 6, height: 6, borderRadius: 3, background: item.tone }}/>
                    <span style={{ flex: 1, fontSize: 13, color: THEME.text }}>{item.label}</span>
                    <Icon d={Icons.arrowRight} size={14} stroke={THEME.textDim}/>
                  </div>
                ))}
              </div>
            </div>

            {/* Inline summary of cause + evidence */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
              <div onClick={() => setSection('theory')} style={{
                padding: '16px 18px', borderRadius: 12, cursor: 'pointer',
                background: THEME.surface, border: `1px solid ${THEME.line}`,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                  <Icon d={Icons.scale} size={14} stroke={THEME.blue}/>
                  <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 1, textTransform: 'uppercase', fontWeight: 600 }}>Your legal theory</div>
                </div>
                <div style={{ fontFamily: 'Fraunces', fontSize: 17, color: THEME.text, fontWeight: 500, marginBottom: 6 }}>Breach of contract</div>
                <div style={{ fontSize: 11.5, color: THEME.textDim, lineHeight: 1.5 }}>You selected this from 4 available paths. 3 of 4 elements have evidence supporting them.</div>
              </div>
              <div onClick={() => onNav('evidence')} style={{
                padding: '16px 18px', borderRadius: 12, cursor: 'pointer',
                background: THEME.surface, border: `1px solid ${THEME.line}`,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                  <Icon d={Icons.paperclip} size={14} stroke={THEME.accent}/>
                  <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 1, textTransform: 'uppercase', fontWeight: 600 }}>Evidence organized</div>
                </div>
                <div style={{ fontFamily: 'Fraunces', fontSize: 17, color: THEME.text, fontWeight: 500, marginBottom: 6 }}>14 items · numbered exhibits</div>
                <div style={{ fontSize: 11.5, color: THEME.textDim, lineHeight: 1.5 }}>Photos, texts, bank records, contractor's quote. You affirmed each association. System suggested, you decided.</div>
              </div>
            </div>

            {/* UPL boundary card. Always visible on overview */}
            <div style={{
              padding: '14px 16px', borderRadius: 11,
              background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.55)',
              border: `1px dashed ${THEME.line}`,
              display: 'flex', gap: 12,
            }}>
              <Icon d={Icons.shield} size={15} stroke={THEME.textMute}/>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 12, color: THEME.text, fontWeight: 600, marginBottom: 3 }}>How AllLaw operates in {j.name}</div>
                <div style={{ fontSize: 11.5, color: THEME.textDim, lineHeight: 1.55 }}>
                  {isUtah
                    ? 'Authorized under Utah Supreme Court Standing Order 15. We can offer expanded features (predictive case strength, auto-affirmed evidence matches, judge simulation) under sandbox conditions including methodology disclosure and accuracy reporting.'
                    : 'We provide legal information and tools, not legal advice. We are not a law firm. You select your cause of action, you characterize your evidence, you finalize every document. For legal advice, consult a licensed New York attorney.'}
                </div>
              </div>
            </div>
          </div>
        )}

        {section === 'theory' && (
          <div style={{ maxWidth: 920 }}>
            <CauseOfActionPicker
              jx={jx}
              selected={selectedCauses}
              onToggle={(id) => setSelectedCauses(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id])}
              onConsult={() => onOpenHandoff('consult')}
            />
          </div>
        )}

        {section === 'readiness' && (
          <div style={{ maxWidth: 820 }}>
            <ReadinessChecklist
              jx={jx}
              predictiveOptIn={predictiveOptIn}
              onTogglePredictive={() => setPredictiveOptIn(v => !v)}
              onConsult={() => onOpenHandoff('review')}
            />
          </div>
        )}
      </div>
    </div>
  );
};

window.DashboardV2 = DashboardV2;
window.MATTER = MATTER;