/* 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: '#D7DEE2', fontSize: 12.5, fontWeight: 600,
            display: 'flex', alignItems: 'center', gap: 6,
          }}>
            <Icon d={Icons.download} size={14} stroke="#D7DEE2"/>
            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 }}>
                  {/* Evidence paperclip -> honey (warn), matching the locked mobile
                      decision (2026-06-30): paperclips are yellow + actionable. This
                      card already navigates to Evidence on click. */}
                  <Icon d={Icons.paperclip} size={14} stroke={THEME.warn}/>
                  <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 Hello Court operates in {j.name}</div>
                <div style={{ fontSize: 11.5, color: THEME.textDim, lineHeight: 1.55 }}>
                  {isUtah
                    ? 'We provide legal information and tools, not legal advice. We are not a law firm, and we are not authorized under any state legal services sandbox. You select your cause of action, you characterize your evidence, you finalize every document. For legal advice, consult a licensed Utah attorney.'
                    : '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;