const { useState, useRef, useEffect } = React;
const T = window.ArbiterTokens;

const RESEARCH_HISTORY = [
  { id: 1, query: 'Breach of fiduciary duty — elements under Delaware law', time: '2h ago', results: 47, matter: 'Redstone v. Meridian' },
  { id: 2, query: 'Antitrust price-fixing damages calculation methods', time: '1d ago', results: 83, matter: 'Pacific Shipping' },
  { id: 3, query: 'Expert witness Daubert challenge standards — 9th Circuit', time: '2d ago', results: 31, matter: 'Thornton Estate' },
  { id: 4, query: 'Patent claim construction — means-plus-function', time: '3d ago', results: 56, matter: 'Blackwell IP' },
  { id: 5, query: 'Securities fraud scienter pleading requirements', time: '4d ago', results: 92, matter: 'Chen v. Atlas' },
];

const SAVED_RESEARCH = [
  { id: 1, title: 'Delaware Fiduciary Standards — Compiled Authorities', notes: '14 cases, 3 treatise sections', matter: 'Redstone v. Meridian', date: 'Apr 18' },
  { id: 2, title: 'Sherman Act §1 — Per Se vs. Rule of Reason', notes: '22 cases, annotated', matter: 'Pacific Shipping', date: 'Apr 12' },
  { id: 3, title: 'FCPA Enforcement Trends 2020–2025', notes: '8 DOJ opinions, 5 SEC actions', matter: 'Sterling Pharma', date: 'Apr 08' },
  { id: 4, title: 'Eminent Domain Just Compensation — State Survey', notes: '12 jurisdictions compared', matter: 'Harbor District', date: 'Apr 02' },
];

const AI_SUGGESTIONS = [
  'Recent 9th Circuit decisions on discovery scope in antitrust cases',
  'Comparable settlement amounts in securities fraud class actions 2024–2026',
  'Patent obviousness standard post-KSR — Federal Circuit trends',
];

const rStyles = {
  container: { flex: 1, overflow: 'auto', background: T.color.bg.primary, padding: '20px' },
  title: { fontSize: T.font.size.xl, fontWeight: T.font.weight.bold, color: T.color.text.primary, letterSpacing: T.font.tracking.tight, marginBottom: '20px' },
  searchBox: {
    background: T.color.bg.card, border: `1px solid ${T.color.border.light}`, borderRadius: T.radius.lg,
    padding: '20px', marginBottom: '20px',
  },
  searchInput: {
    width: '100%', height: '44px', border: `1px solid ${T.color.border.medium}`, borderRadius: T.radius.md,
    padding: '0 16px', fontSize: T.font.size.md, fontFamily: T.font.family,
    background: T.color.bg.primary, color: T.color.text.primary, outline: 'none',
  },
  suggestionsRow: { display: 'flex', gap: '8px', marginTop: '12px', flexWrap: 'wrap' },
  suggestion: {
    padding: '5px 12px', borderRadius: '14px', border: `1px solid ${T.color.border.light}`,
    background: T.color.bg.secondary, fontSize: T.font.size.xs, color: T.color.text.secondary,
    cursor: 'pointer', fontFamily: T.font.family, transition: 'all 0.1s',
  },
  aiLabel: {
    fontSize: T.font.size.xs, fontWeight: T.font.weight.semibold, color: T.color.accent.blue,
    textTransform: 'uppercase', letterSpacing: T.font.tracking.caps, marginBottom: '8px',
    display: 'flex', alignItems: 'center', gap: '4px',
  },
  grid: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '16px' },
  section: { background: T.color.bg.card, border: `1px solid ${T.color.border.light}`, borderRadius: T.radius.lg, overflow: 'hidden' },
  sectionHeader: { padding: '12px 16px', borderBottom: `1px solid ${T.color.border.light}`, fontSize: T.font.size.sm, fontWeight: T.font.weight.semibold, color: T.color.text.primary },
  item: { padding: '10px 16px', borderBottom: `1px solid ${T.color.border.light}`, cursor: 'pointer', transition: 'background 0.1s' },
};

function ResearchView() {
  const [query, setQuery] = useState('');
  const [hoveredItem, setHoveredItem] = useState(null);

  return (
    <div style={rStyles.container}>
      <div style={rStyles.title}>Research</div>

      {/* Search */}
      <div style={rStyles.searchBox}>
        <input
          style={rStyles.searchInput}
          placeholder="Search case law, statutes, regulations, secondary sources..."
          value={query}
          onChange={e => setQuery(e.target.value)}
        />
        <div style={rStyles.aiLabel}>
          <span>◆</span> AI-suggested queries based on your active matters
        </div>
        <div style={rStyles.suggestionsRow}>
          {AI_SUGGESTIONS.map((s, i) => (
            <button key={i} style={rStyles.suggestion}
              onMouseEnter={e => { e.currentTarget.style.background = T.color.accent.blueBg; e.currentTarget.style.borderColor = T.color.accent.blue; e.currentTarget.style.color = T.color.accent.blue; }}
              onMouseLeave={e => { e.currentTarget.style.background = T.color.bg.secondary; e.currentTarget.style.borderColor = T.color.border.light; e.currentTarget.style.color = T.color.text.secondary; }}
              onClick={() => setQuery(s)}
            >{s}</button>
          ))}
        </div>
      </div>

      <div style={rStyles.grid}>
        {/* Recent searches */}
        <div style={rStyles.section}>
          <div style={rStyles.sectionHeader}>Recent Searches</div>
          {RESEARCH_HISTORY.map(r => (
            <div key={r.id} style={{...rStyles.item, background: hoveredItem === `h${r.id}` ? T.color.bg.hover : 'transparent'}}
              onMouseEnter={() => setHoveredItem(`h${r.id}`)} onMouseLeave={() => setHoveredItem(null)}>
              <div style={{ fontWeight: T.font.weight.medium, fontSize: T.font.size.sm, color: T.color.text.primary, marginBottom: '3px' }}>{r.query}</div>
              <div style={{ display: 'flex', gap: '12px', fontSize: T.font.size.xs, color: T.color.text.tertiary }}>
                <span>{r.results} results</span>
                <span>{r.matter}</span>
                <span>{r.time}</span>
              </div>
            </div>
          ))}
        </div>

        {/* Saved research */}
        <div style={rStyles.section}>
          <div style={rStyles.sectionHeader}>Saved Research</div>
          {SAVED_RESEARCH.map(r => (
            <div key={r.id} style={{...rStyles.item, background: hoveredItem === `s${r.id}` ? T.color.bg.hover : 'transparent'}}
              onMouseEnter={() => setHoveredItem(`s${r.id}`)} onMouseLeave={() => setHoveredItem(null)}>
              <div style={{ fontWeight: T.font.weight.medium, fontSize: T.font.size.sm, color: T.color.text.primary, marginBottom: '3px' }}>{r.title}</div>
              <div style={{ display: 'flex', gap: '12px', fontSize: T.font.size.xs, color: T.color.text.tertiary }}>
                <span>{r.notes}</span>
                <span>{r.matter}</span>
                <span>{r.date}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.ResearchView = ResearchView;