/* Reviewing Attorney experience. B.2 inbox + B.3/B.4/B.5 work surfaces.
   On-demand document review and consult work. Flat-fee per task.
   The "Reviewing Attorney" is distinct from "Operating Attorney" (full rep). */

const REVIEW_QUEUE = [
  {
    id: 'chen', tier: 'rush48', deadline: '14h 22m', tone: THEME.danger,
    client: 'Marcus Chen', matter: 'Small claims · contractor breach',
    docCount: 1, jurisdiction: 'NY', fee: 179,
    type: 'Document review', request: 'Review Statement of Claim before filing. I\'m concerned about the damages section. Please tell me if I\'ve been clear enough about what I lost.',
    docs: ['Statement of Claim · 4 pages', 'Exhibit Index · 14 items', 'Damages Calculation'],
    sla: 48,
  },
  {
    id: 'patel', tier: 'standard', deadline: '4d 12h', tone: THEME.success,
    client: 'Priya Patel', matter: 'Landlord-tenant · security deposit',
    docCount: 2, jurisdiction: 'NY', fee: 99,
    type: 'Document review',
    request: 'Demand letter to landlord for return of $2,400 security deposit. First time using the platform, want eyes on it.',
    docs: ['Demand letter · 2 pages', 'Lease (annotated)'],
    sla: 120,
  },
  {
    id: 'rios', tier: 'consult', deadline: 'Tue 2:30 PM', tone: THEME.blue,
    client: 'Daniel Rios', matter: 'Consumer fraud · auto repair',
    docCount: 0, jurisdiction: 'UT', fee: 79,
    type: '30-min consult', sandbox: true,
    request: 'I have receipts and texts but I\'m not sure if this rises to consumer fraud or just a contract dispute. Want a read before I commit to a theory.',
    docs: [],
    sla: 30,
  },
  {
    id: 'nguyen', tier: 'rush24', deadline: '6h 15m', tone: THEME.danger,
    client: 'Lin Nguyen', matter: 'Small business · vendor breach',
    docCount: 3, jurisdiction: 'NY', fee: 249,
    type: 'Document review',
    request: 'Complaint draft, willing to pay rush. Hearing scheduled in 9 days. Please flag any procedural gaps.',
    docs: ['Complaint draft', 'Vendor contract', 'Email log (47 messages)'],
    sla: 24,
  },
];

const ReviewingAttorneyInbox = ({ onOpen }) => {
  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {/* Header */}
      <div style={{ padding: '24px 32px 16px', borderBottom: `1px solid ${THEME.line}` }}>
        <div style={{ display: 'flex', alignItems: 'flex-end', gap: 14 }}>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 11, color: THEME.textMute, letterSpacing: 1.4, textTransform: 'uppercase', fontWeight: 600 }}>
              Section B · Reviewing attorney
            </div>
            <div style={{ fontFamily: 'Fraunces', fontSize: 28, color: THEME.text, fontWeight: 500, letterSpacing: -0.5, lineHeight: 1.1, marginTop: 4 }}>
              Review inbox
            </div>
            <div style={{ fontSize: 12.5, color: THEME.textDim, marginTop: 6, maxWidth: 580, lineHeight: 1.5 }}>
              On-demand document review and consult requests. Each request includes the client's intake, evidence, and specific question. Accept, decline, or refer.
            </div>
          </div>
          <div style={{ display: 'flex', gap: 24, alignItems: 'flex-end' }}>
            {[
              { label: 'This week', value: '12', sub: 'reviews completed' },
              { label: 'Earnings', value: '$1,847', sub: 'after platform fee' },
              { label: 'Avg rating', value: '4.92', sub: '52 reviews' },
            ].map((s, i) => (
              <div key={i}>
                <div style={{ fontSize: 10, color: THEME.textMute, letterSpacing: 1.2, fontWeight: 600, textTransform: 'uppercase' }}>{s.label}</div>
                <div style={{ fontFamily: 'Fraunces', fontSize: 22, color: THEME.text, fontWeight: 500, letterSpacing: -0.4, marginTop: 3 }}>{s.value}</div>
                <div style={{ fontSize: 10.5, color: THEME.textMute, marginTop: 1 }}>{s.sub}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Filter chips */}
        <div style={{ display: 'flex', gap: 6, marginTop: 14 }}>
          {['All requests · 4', 'Rush 24h · 1', 'Rush 48h · 1', 'Standard · 1', 'Consults · 1', 'Utah sandbox · 1'].map((c, i) => (
            <div key={i} style={{
              padding: '5px 11px', borderRadius: 7, fontSize: 11.5, fontWeight: 500,
              background: i === 0 ? THEME.blue : THEME.surface,
              color: i === 0 ? '#fff' : THEME.textDim,
              border: `1px solid ${i === 0 ? THEME.blue : THEME.line}`,
              cursor: 'pointer',
            }}>{c}</div>
          ))}
        </div>
      </div>

      {/* Queue */}
      <div style={{ flex: 1, overflowY: 'auto', padding: '18px 32px', display: 'flex', flexDirection: 'column', gap: 10 }}>
        {REVIEW_QUEUE.map(req => {
          const tierLabel = req.tier === 'rush24' ? '24h rush' : req.tier === 'rush48' ? '48h rush' : req.tier === 'consult' ? 'Consult' : 'Standard';
          return (
            <div key={req.id} onClick={() => onOpen && onOpen(req.id)} style={{
              padding: '16px 18px', borderRadius: 13, cursor: 'pointer',
              background: THEME.surface, border: `1px solid ${THEME.line}`,
              borderLeft: `3px solid ${req.tone}`,
              display: 'flex', alignItems: 'flex-start', gap: 14,
            }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 5 }}>
                  <div style={{
                    fontSize: 9.5, fontWeight: 700, padding: '2px 7px', borderRadius: 4, letterSpacing: 0.5,
                    background: req.tone + '20', color: req.tone, border: `1px solid ${req.tone}40`,
                  }}>{tierLabel.toUpperCase()}</div>
                  <div style={{
                    fontSize: 9.5, fontWeight: 700, padding: '2px 7px', borderRadius: 4, letterSpacing: 0.4,
                    background: req.jurisdiction === 'UT' ? 'rgba(91,167,115,0.18)' : THEME.blueSoft,
                    color: req.jurisdiction === 'UT' ? THEME.success : THEME.blue,
                    border: `1px solid ${req.jurisdiction === 'UT' ? 'rgba(91,167,115,0.3)' : THEME.blue + '30'}`,
                  }}>{req.jurisdiction}</div>
                  {req.sandbox && (
                    <div style={{ fontSize: 9.5, padding: '2px 7px', borderRadius: 4, background: 'rgba(91,167,115,0.18)', color: THEME.success, fontWeight: 700, letterSpacing: 0.4 }}>
                      SANDBOX
                    </div>
                  )}
                  <div style={{ fontSize: 11, color: THEME.textMute }}>· {req.type}</div>
                  <div style={{ flex: 1 }}/>
                  <div style={{ fontFamily: 'Fraunces', fontSize: 16, color: THEME.text, fontWeight: 500 }}>${req.fee}</div>
                </div>
                <div style={{ fontFamily: 'Fraunces', fontSize: 17, color: THEME.text, fontWeight: 500, letterSpacing: -0.2, marginBottom: 3 }}>
                  {req.client} · {req.matter}
                </div>
                <div style={{ fontSize: 12, color: THEME.textDim, lineHeight: 1.5, marginBottom: 8 }}>
                  "{req.request}"
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 11, color: THEME.textMute }}>
                  {req.docs.length > 0 && (
                    <>
                      <Icon d={Icons.paperclip} size={11} stroke={THEME.textMute}/>
                      <span>{req.docs.length} attachment{req.docs.length > 1 ? 's' : ''}: {req.docs.join(' · ')}</span>
                    </>
                  )}
                  {req.docs.length === 0 && (
                    <>
                      <Icon d={Icons.user} size={11} stroke={THEME.textMute}/>
                      <span>Scheduled video consult · {req.sla} min</span>
                    </>
                  )}
                </div>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, alignItems: 'flex-end' }}>
                <div style={{
                  fontSize: 10.5, color: THEME.textMute, letterSpacing: 0.6, fontWeight: 600, textTransform: 'uppercase',
                }}>SLA remaining</div>
                <div style={{ fontFamily: 'Fraunces', fontSize: 18, color: req.tone, fontWeight: 600 }}>{req.deadline}</div>
                <div style={{ display: 'flex', gap: 5, marginTop: 4 }}>
                  <div style={{ padding: '5px 10px', borderRadius: 6, fontSize: 11, fontWeight: 600, background: THEME.success, color: '#fff' }}>Accept</div>
                  <div style={{ padding: '5px 10px', borderRadius: 6, fontSize: 11, fontWeight: 500, background: 'transparent', color: THEME.textDim, border: `1px solid ${THEME.line}` }}>Decline</div>
                </div>
              </div>
            </div>
          );
        })}

        {/* Conflicts auto-check note */}
        <div style={{
          marginTop: 6, padding: '10px 14px', borderRadius: 9,
          background: THEME.mode === 'dark' ? 'rgba(255,255,255,0.025)' : 'rgba(255,255,255,0.5)',
          border: `1px dashed ${THEME.line}`,
          display: 'flex', alignItems: 'center', gap: 9,
          fontSize: 11.5, color: THEME.textDim,
        }}>
          <Icon d={Icons.shield} size={13} stroke={THEME.textMute}/>
          <span>Conflicts check auto-runs against your firm database for each new request. None flagged in this batch.</span>
        </div>
      </div>
    </div>
  );
};

window.REVIEW_QUEUE = REVIEW_QUEUE;
window.ReviewingAttorneyInbox = ReviewingAttorneyInbox;