/* Case Workspace. Document editor + AI coach side panel */

const Workspace = ({ onBack }) => {
  const [activeTab, setActiveTab] = React.useState('document');

  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
      {/* Top bar */}
      <div style={{
        padding: '16px 28px', borderBottom: `1px solid ${THEME.line}`,
        display: 'flex', alignItems: 'center', gap: 16,
      }}>
        <div onClick={onBack} style={{
          display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: THEME.textDim, cursor: 'pointer',
        }}>
          <Icon d="m15 6-6 6 6 6" size={16} stroke={THEME.textDim}/> Chen v. Northbay
        </div>
        <div style={{ width: 1, height: 18, background: THEME.line }}/>
        <div style={{ fontSize: 13, color: THEME.text, fontWeight: 550 }}>SC-100 Plaintiff's Claim</div>
        <Pill color={THEME.blue} bg="rgba(91,123,255,0.12)" dot>Draft v3</Pill>
        <Pill>Auto-saved · 2m ago</Pill>
        <div style={{ flex: 1 }}/>
        <div style={{ display: 'flex', gap: 6, padding: 3, background: 'rgba(255,255,255,0.04)', borderRadius: 8, border: `1px solid ${THEME.line}` }}>
          {['document', 'facts', 'exhibits'].map(t => (
            <div key={t} onClick={() => setActiveTab(t)} style={{
              padding: '5px 12px', borderRadius: 6, fontSize: 12, fontWeight: 500, cursor: 'pointer',
              background: activeTab === t ? THEME.blue : 'transparent',
              color: activeTab === t ? '#fff' : THEME.textDim,
              textTransform: 'capitalize',
            }}>{t}</div>
          ))}
        </div>
        <button style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 14px', borderRadius: 8, fontSize: 12.5, fontFamily: 'Inter', fontWeight: 500, cursor: 'pointer', background: 'transparent', color: THEME.text, border: `1px solid ${THEME.line}` }}><Icon d={Icons.eye} size={14} stroke={THEME.text}/> Preview</button>
        <button style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '8px 14px', borderRadius: 8, fontSize: 12.5, fontFamily: 'Inter', fontWeight: 600, cursor: 'pointer', background: THEME.blue, color: '#fff', border: 'none' }}><Icon d={Icons.download} size={14} stroke="#fff"/> Export PDF</button>
      </div>

      <div style={{ flex: 1, display: 'grid', gridTemplateColumns: '1fr 340px', overflow: 'hidden' }}>
        {/* Document canvas */}
        <div style={{ overflow: 'auto', padding: '32px 40px', background: THEME.bg }}>
          <div style={{
            maxWidth: 680, margin: '0 auto', background: '#FAFAF7',
            borderRadius: 4, padding: '56px 72px', color: '#1a1a1a',
            fontFamily: 'ui-serif, Georgia, "Times New Roman", serif',
            boxShadow: '0 16px 40px rgba(0,0,0,0.3)',
            minHeight: 860, position: 'relative',
          }}>
            <div style={{ textAlign: 'center', fontSize: 10, letterSpacing: 2, color: '#666', textTransform: 'uppercase', marginBottom: 18 }}>
              Form SC-100 · California Judicial Council
            </div>
            <h2 style={{ textAlign: 'center', fontSize: 17, fontWeight: 700, margin: '0 0 4px', textTransform: 'uppercase', letterSpacing: 0.5 }}>Plaintiff's Claim and ORDER</h2>
            <h3 style={{ textAlign: 'center', fontSize: 15, fontWeight: 600, margin: '0 0 22px', color: '#444' }}>to Go to Small Claims Court</h3>

            <div style={{ fontSize: 12, lineHeight: 1.8, borderTop: '1px solid #ccc', borderBottom: '1px solid #ccc', padding: '10px 0', marginBottom: 20 }}>
              <div><strong>Superior Court of California, County of</strong> Alameda</div>
              <div><strong>Court address:</strong> 24405 Amador Street, Hayward, CA 94544</div>
            </div>

            <div style={{ marginBottom: 18 }}>
              <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: '#888', marginBottom: 6 }}>1 · Plaintiff</div>
              <div style={{ fontSize: 13, lineHeight: 1.7 }}>
                <strong>Marcus J. Chen</strong>, an individual<br/>
                1847 Telegraph Avenue, Apt 3B, Oakland, CA 94612<br/>
                (510) 555-0143 · marcus.chen@email.com
              </div>
            </div>

            <div style={{ marginBottom: 18 }}>
              <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: '#888', marginBottom: 6 }}>2 · Defendant</div>
              <div style={{ fontSize: 13, lineHeight: 1.7 }}>
                <strong>Northbay Contracting, LLC</strong>, a California limited liability company<br/>
                Registered agent: David R. Morrison, 2100 Franklin St, Oakland, CA 94612<br/>
                License: CSLB #1094872
              </div>
            </div>

            <div style={{ marginBottom: 18 }}>
              <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: '#888', marginBottom: 6 }}>3 · Amount and reason plaintiff claims defendant owes</div>
              <div style={{ fontSize: 13, lineHeight: 1.75, position: 'relative' }}>
                <div>Plaintiff claims damages in the amount of <strong>$7,400.00</strong>, plus court costs. Defendant owes this money because:</div>
                <div style={{ marginTop: 10, padding: '12px 14px', background: 'rgba(91,123,255,0.06)', borderLeft: '3px solid #5B7BFF', borderRadius: 2 }}>
                  On January 8, 2026, Plaintiff and Defendant entered into a written contract (attached as <strong>Exhibit A</strong>) for a kitchen remodel at Plaintiff's residence. Plaintiff paid Defendant <strong>$12,400</strong> as an initial deposit. Defendant commenced work on January 22, 2026 but <span style={{ background: 'rgba(245,184,76,0.3)', padding: '1px 3px' }}>ceased all work on or about March 11, 2026</span> after completing approximately 40% of the scope.
                </div>
                <div style={{ marginTop: 10 }}>Despite multiple written demands (Exhibits E, F), Defendant has refused to either complete the work or refund the unearned portion of the deposit. Plaintiff engaged a successor contractor at an additional cost of <strong>$7,400</strong> to complete equivalent work.</div>
              </div>
            </div>

            {/* AI suggestion inline */}
            <div style={{
              margin: '14px 0', padding: '12px 14px', background: 'rgba(91,123,255,0.08)',
              border: '1px dashed #5B7BFF', borderRadius: 6, fontFamily: 'Inter, system-ui',
              fontSize: 11.5, color: '#1a2556', display: 'flex', gap: 10, alignItems: 'flex-start',
            }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="#5B7BFF"><path d="M12 3l1.8 4.7L18 9.5l-4.2 1.8L12 16l-1.8-4.7L6 9.5l4.2-1.8z"/></svg>
              <div style={{ flex: 1 }}>
                <strong>Coach suggestion:</strong> Add a sentence citing Cal. Civ. Code §1689(b)(2) to strengthen rescission grounds. <span style={{ color: '#5B7BFF', fontWeight: 600, cursor: 'pointer' }}>Accept</span> · <span style={{ color: '#888', cursor: 'pointer' }}>Dismiss</span>
              </div>
            </div>

            <div style={{ marginBottom: 18 }}>
              <div style={{ fontSize: 11, fontWeight: 700, textTransform: 'uppercase', color: '#888', marginBottom: 6 }}>4 · Why plaintiff is filing in this court</div>
              <div style={{ fontSize: 13, lineHeight: 1.7 }}>
                The contract was performed in Alameda County, the Defendant does business in Alameda County, and the injury occurred in Alameda County. (CCP §395)
              </div>
            </div>

            <div style={{ textAlign: 'center', color: '#aaa', fontSize: 10, marginTop: 40, paddingTop: 20, borderTop: '1px solid #eee' }}>
              Page 1 of 3 · Continue to §5 Demand & §6 Declaration
            </div>
          </div>
        </div>

        {/* Right rail. AI coach + linked elements */}
        <div style={{ borderLeft: `1px solid ${THEME.line}`, background: THEME.panel, display: 'flex', flexDirection: 'column' }}>
          <div style={{ padding: 16, borderBottom: `1px solid ${THEME.line}` }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
              <div style={{ width: 22, height: 22, borderRadius: 11, background: `linear-gradient(135deg, ${THEME.blue}, ${THEME.accent})`, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <Icon d={Icons.sparkle} size={12} stroke="#fff" fill="#fff"/>
              </div>
              <span style={{ fontSize: 12.5, color: THEME.text, fontWeight: 600 }}>Document Coach</span>
            </div>
            <div style={{ fontSize: 12, color: THEME.textDim, lineHeight: 1.5 }}>
              Analyzing against <strong style={{ color: THEME.text }}>Cal. Code Civ. Proc.</strong> and <strong style={{ color: THEME.text }}>Alameda Co. Small Claims rules</strong>.
            </div>
          </div>

          <div style={{ padding: 16, borderBottom: `1px solid ${THEME.line}` }}>
            <div style={{ fontSize: 10.5, fontWeight: 600, color: THEME.textMute, letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 10 }}>Document Health</div>
            {[
              { label: 'Jurisdiction', score: 'Correct', color: THEME.success },
              { label: 'Formatting', score: 'Court-compliant', color: THEME.success },
              { label: 'Damages math', score: 'Verified ($7,400)', color: THEME.success },
              { label: 'Case law citations', score: '1 suggested', color: THEME.warn },
              { label: 'Exhibit references', score: '6 of 8 linked', color: THEME.warn },
            ].map((h, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '6px 0' }}>
                <span style={{ fontSize: 12, color: THEME.textDim }}>{h.label}</span>
                <span style={{ fontSize: 11.5, color: h.color, fontWeight: 500 }}>{h.score}</span>
              </div>
            ))}
          </div>

          <div style={{ padding: 16, borderBottom: `1px solid ${THEME.line}`, flex: 1, overflow: 'auto' }}>
            <div style={{ fontSize: 10.5, fontWeight: 600, color: THEME.textMute, letterSpacing: 1.2, textTransform: 'uppercase', marginBottom: 10 }}>Linked Evidence</div>
            {[
              { ref: 'Exhibit A', desc: 'Kitchen Remodel Contract', cited: 'Cited in §3' },
              { ref: 'Exhibit E', desc: 'Demand letter · Mar 22', cited: 'Cited in §3' },
              { ref: 'Exhibit F', desc: 'Email thread (7 msgs)', cited: 'Cited in §3' },
            ].map((e, i) => (
              <div key={i} style={{
                padding: 10, borderRadius: 8, background: 'rgba(255,255,255,0.03)',
                border: `1px solid ${THEME.line}`, marginBottom: 6,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  <Icon d={Icons.link} size={12} stroke={THEME.blue}/>
                  <span style={{ fontSize: 12, color: THEME.text, fontWeight: 550 }}>{e.ref}</span>
                </div>
                <div style={{ fontSize: 11.5, color: THEME.textDim, marginTop: 3 }}>{e.desc}</div>
                <div style={{ fontSize: 10.5, color: THEME.textMute, marginTop: 2 }}>{e.cited}</div>
              </div>
            ))}
          </div>

          <div style={{ padding: 16 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, border: `1px solid ${THEME.line}`, borderRadius: 10, padding: '8px 10px', background: THEME.bg }}>
              <input placeholder="Ask about this document…" style={{
                flex: 1, background: 'transparent', border: 'none', outline: 'none',
                color: THEME.text, fontSize: 12.5, fontFamily: 'Inter',
              }}/>
              <Icon d={Icons.send} size={13} stroke={THEME.blue} fill={THEME.blue}/>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

window.Workspace = Workspace;