/* Lawyer Caseload. All active clients, deadlines, statuses */

const CASELOAD = [
  { id: 'chen', name: 'Chen v. Northbay Contracting', client: 'Marcus Chen', type: 'Small Claims', stage: 'Filing prep', pct: 72, nextDeadline: 'Apr 14 · Complaint filing', urgent: true, unread: 2, feeModel: '$850 flat', earned: 510, days: 12 },
  { id: 'park', name: 'Park · Motion to Dismiss', client: 'Jae-won Park', type: 'Civil', stage: 'Hearing prep', pct: 88, nextDeadline: 'Apr 18 · Oral argument', urgent: true, unread: 0, feeModel: '$240/hr', earned: 3840, days: 34 },
  { id: 'alvarez', name: 'Alvarez Lease Response', client: 'Camila Alvarez', type: 'Housing', stage: 'Discovery', pct: 45, nextDeadline: 'Apr 22 · Interrog. due', urgent: false, unread: 1, feeModel: '$180 review', earned: 180, days: 7 },
  { id: 'kim', name: 'Kim LLC v. Vendor', client: 'Soo-jin Kim', type: 'Business', stage: 'Trial prep', pct: 62, nextDeadline: 'May 3 · Jury selection', urgent: false, unread: 5, feeModel: '30% contingency', earned: 0, days: 61 },
  { id: 'rivera', name: 'Rivera Wage Dispute', client: 'Tomás Rivera', type: 'Employment', stage: 'Settlement talks', pct: 90, nextDeadline: 'Apr 11 · Mediation', urgent: true, unread: 3, feeModel: 'Hybrid', earned: 1800, days: 45 },
  { id: 'obrien', name: 'O\'Brien Injury Claim', client: 'Niamh O\'Brien', type: 'Personal Injury', stage: 'Investigation', pct: 28, nextDeadline: 'Apr 30 · Medical records', urgent: false, unread: 0, feeModel: '33% contingency', earned: 0, days: 19 },
  { id: 'haque', name: 'Haque Family Estate', client: 'Tariq Haque', type: 'Probate', stage: 'Filing prep', pct: 55, nextDeadline: 'May 12 · Petition', urgent: false, unread: 0, feeModel: '$3,200 flat', earned: 1600, days: 22 },
];

const LawyerCaseload = ({ onOpenCase }) => {
  const [view, setView] = React.useState('board'); // board | table

  const byStage = {};
  CASELOAD.forEach(c => {
    if (!byStage[c.stage]) byStage[c.stage] = [];
    byStage[c.stage].push(c);
  });
  const stages = ['Filing prep', 'Discovery', 'Hearing prep', 'Trial prep', 'Settlement talks', 'Investigation'];

  return (
    <div style={{ height: '100%', overflow: 'auto', padding: '28px 32px' }}>
      {/* Header */}
      <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 24 }}>
        <div>
          <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 2.2, textTransform: 'uppercase', fontWeight: 600, marginBottom: 6 }}>My Caseload</div>
          <div style={{ fontFamily: 'Fraunces, serif', fontSize: 30, color: THEME.text, fontWeight: 500, lineHeight: 1.1, letterSpacing: -0.5 }}>
            7 active cases · <span style={{ color: THEME.textDim }}>3 need attention</span>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          <div style={{ display: 'flex', background: 'rgba(255,255,255,0.03)', border: `1px solid ${THEME.lineSoft}`, borderRadius: 8, padding: 2 }}>
            {['board', 'table'].map(v => (
              <span key={v} onClick={() => setView(v)} style={{
                padding: '5px 12px', fontSize: 11.5, borderRadius: 6, cursor: 'pointer',
                background: view === v ? THEME.blueSoft : 'transparent',
                color: view === v ? THEME.accent : THEME.textDim,
                fontWeight: view === v ? 600 : 450, textTransform: 'capitalize',
              }}>{v}</span>
            ))}
          </div>
          <button style={lawBtn('ghost')}><Icon d={Icons.plus} size={13} stroke={THEME.text}/> Add case</button>
        </div>
      </div>

      {/* Summary strip */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 10, marginBottom: 24 }}>
        <SummaryStat label="Open cases" value="7" delta="+2 this month" color={THEME.text}/>
        <SummaryStat label="Imminent deadlines" value="3" delta="within 7 days" color={THEME.danger}/>
        <SummaryStat label="Unread messages" value="11" delta="from 4 clients" color={THEME.blue}/>
        <SummaryStat label="Earned · 30d" value="$7,930" delta="+18% vs last" color={THEME.success}/>
        <SummaryStat label="Utilization" value="68%" delta="billable hours" color={THEME.accent}/>
      </div>

      {view === 'board' ? (
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
          {stages.filter(s => byStage[s]).map(stage => (
            <div key={stage} style={{ background: 'rgba(255,255,255,0.02)', border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, padding: 12, minHeight: 200 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
                <div style={{ fontSize: 11.5, color: THEME.text, fontWeight: 600, letterSpacing: 0.3, textTransform: 'uppercase' }}>{stage}</div>
                <span style={{ fontSize: 11, color: THEME.textMute, background: 'rgba(255,255,255,0.04)', padding: '1px 7px', borderRadius: 10 }}>{byStage[stage].length}</span>
              </div>
              {byStage[stage].map(c => (
                <div key={c.id} onClick={() => onOpenCase(c.id)} style={{
                  background: THEME.bgElev, border: `1px solid ${THEME.line}`, borderRadius: 10,
                  padding: 12, marginBottom: 8, cursor: 'pointer',
                }}>
                  <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', marginBottom: 6 }}>
                    <div style={{ fontSize: 12.5, color: THEME.text, fontWeight: 600, lineHeight: 1.3, flex: 1 }}>{c.name}</div>
                    {c.unread > 0 && <span style={{ fontSize: 10, padding: '1px 5px', borderRadius: 8, background: THEME.blue, color: '#fff', fontWeight: 600, marginLeft: 6 }}>{c.unread}</span>}
                  </div>
                  <div style={{ fontSize: 11, color: THEME.textMute, marginBottom: 10 }}>{c.client} · {c.type}</div>
                  <div style={{ height: 4, borderRadius: 2, background: 'rgba(255,255,255,0.06)', marginBottom: 8, overflow: 'hidden' }}>
                    <div style={{ width: `${c.pct}%`, height: '100%', background: c.urgent ? THEME.danger : THEME.blue }}/>
                  </div>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                    <Icon d={Icons.clock} size={11} stroke={c.urgent ? THEME.danger : THEME.textMute}/>
                    <span style={{ fontSize: 11, color: c.urgent ? THEME.danger : THEME.textDim, flex: 1 }}>{c.nextDeadline}</span>
                  </div>
                </div>
              ))}
            </div>
          ))}
        </div>
      ) : (
        <div style={{ background: 'rgba(255,255,255,0.02)', border: `1px solid ${THEME.lineSoft}`, borderRadius: 12, overflow: 'hidden' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '2.2fr 1.2fr 1fr 1fr 1fr 0.7fr', padding: '12px 16px', borderBottom: `1px solid ${THEME.line}`, background: 'rgba(255,255,255,0.02)' }}>
            {['Case', 'Client', 'Stage', 'Next deadline', 'Fee', 'Earned'].map(h => (
              <div key={h} style={{ fontSize: 10.5, color: THEME.textMute, letterSpacing: 1.2, textTransform: 'uppercase', fontWeight: 600 }}>{h}</div>
            ))}
          </div>
          {CASELOAD.map(c => (
            <div key={c.id} onClick={() => onOpenCase(c.id)} style={{
              display: 'grid', gridTemplateColumns: '2.2fr 1.2fr 1fr 1fr 1fr 0.7fr',
              padding: '14px 16px', borderBottom: `1px solid ${THEME.lineSoft}`,
              cursor: 'pointer', alignItems: 'center',
            }}>
              <div>
                <div style={{ fontSize: 13, color: THEME.text, fontWeight: 550, marginBottom: 3 }}>{c.name}</div>
                <div style={{ fontSize: 11, color: THEME.textMute }}>{c.type} · {c.days}d active</div>
              </div>
              <div style={{ fontSize: 12.5, color: THEME.textDim }}>{c.client}</div>
              <div>
                <LawPill color={THEME.accent} bg={THEME.blueSoft}>{c.stage}</LawPill>
              </div>
              <div style={{ fontSize: 12, color: c.urgent ? THEME.danger : THEME.textDim, fontWeight: c.urgent ? 600 : 450 }}>
                {c.urgent && <span style={{ marginRight: 5 }}>●</span>}
                {c.nextDeadline}
              </div>
              <div style={{ fontSize: 12, color: THEME.textDim }}>{c.feeModel}</div>
              <div style={{ fontSize: 13, color: c.earned > 0 ? THEME.success : THEME.textMute, fontWeight: 600, fontVariantNumeric: 'tabular-nums' }}>
                {c.earned > 0 ? `$${c.earned.toLocaleString()}` : '-'}
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

const SummaryStat = ({ label, value, delta, color }) => (
  <div style={{ padding: 14, background: 'rgba(255,255,255,0.02)', border: `1px solid ${THEME.lineSoft}`, borderRadius: 10 }}>
    <div style={{ fontSize: 10.5, color: THEME.textMute, letterSpacing: 1.2, textTransform: 'uppercase', fontWeight: 600, marginBottom: 8 }}>{label}</div>
    <div style={{ fontFamily: 'Fraunces, serif', fontSize: 24, color, fontWeight: 500, letterSpacing: -0.3, marginBottom: 2 }}>{value}</div>
    <div style={{ fontSize: 11, color: THEME.textMute }}>{delta}</div>
  </div>
);

window.LawyerCaseload = LawyerCaseload;
window.CASELOAD = CASELOAD;
window.SummaryStat = SummaryStat;