// HomePage.jsx — full-page assembly of the CVE Dashboard Home view.
// Rebuilt 1:1 from frontend/src/App.js (currentPage === 'home').
//
// Layout: top stat row (4 metric cards) → 12-col grid below
//   • col-span-9 (left): Quick CVE Lookup → Search/Filter → CVE list
//   • col-span-3 (right): Calendar → Open Tickets → Archer → Ivanti

const {
  COLORS: HC, StatCard, HomeCard, CardTitle, HomeButton, SeverityBadge, StatusBadge,
  HomeInput, HomeSelect, FieldLabel, ResultBanner,
  BigStat, MiniTicket, CVERow, VendorEntry,
  HomeIcon: HI, CalendarMini, ArchiveSummary, ScrollList, EmptyState,
  withAlpha: hAlpha,
} = window.HOME;

const { useState: useHomePageState } = React;

/* ── Sample data — close to what App.js renders against ──────── */
const SAMPLE_CVES = [
  {
    id: 'CVE-2025-1014',
    severity: 'Critical',
    description: 'Heap-based buffer overflow in the libnetfilter_queue user-space packet handler permits a remote attacker to execute arbitrary code via crafted ICMP traffic.',
    statuses: ['Open', 'In Progress'],
    vendors: [
      { vendor: 'Red Hat', severity: 'Critical', status: 'Open',        docCount: 4 },
      { vendor: 'Ubuntu',  severity: 'Critical', status: 'In Progress', docCount: 2 },
      { vendor: 'SUSE',    severity: 'High',     status: 'Resolved',    docCount: 3 },
    ],
    tickets: [
      { key: 'SEC-4821', summary: 'Patch netfilter on prod ingress fleet', status: 'In Progress' },
    ],
  },
  {
    id: 'CVE-2025-0944',
    severity: 'High',
    description: 'Authentication bypass in admin console allows unauthenticated access to telemetry exports.',
    statuses: ['Addressed'],
    vendors: [
      { vendor: 'Cisco', severity: 'High', status: 'Addressed', docCount: 2 },
    ],
  },
  {
    id: 'CVE-2024-9912',
    severity: 'Medium',
    description: 'Improper cert validation in the JIRA Server REST client could lead to MITM under attacker-controlled DNS.',
    statuses: ['Resolved'],
    vendors: [
      { vendor: 'Atlassian', severity: 'Medium', status: 'Resolved', docCount: 1 },
    ],
  },
];

const SAMPLE_OPEN_TICKETS = [
  { key: 'SEC-4821', cveId: 'CVE-2025-1014', vendor: 'Red Hat',   status: 'In Progress', summary: 'Patch netfilter ingress' },
  { key: 'SEC-4794', cveId: 'CVE-2025-0944', vendor: 'Cisco',     status: 'Open',        summary: 'Roll admin-console hotfix' },
  { key: 'SEC-4760', cveId: 'CVE-2024-9912', vendor: 'Atlassian', status: 'Open',        summary: 'Validate cert chain' },
];

const SAMPLE_ARCHER = [
  { key: 'EXC-08291', cveId: 'CVE-2025-1014', vendor: 'SUSE',  status: 'Pending Review' },
  { key: 'EXC-08214', cveId: 'CVE-2024-9912', vendor: 'Adobe', status: 'Draft' },
];

const SAMPLE_IVANTI = [
  { id: 'WF-1042', name: 'Quarterly compliance scan', state: 'In Review', type: 'compliance audit', when: 'Apr 24' },
  { id: 'WF-1038', name: 'Endpoint patch rollout — Linux fleet', state: 'In Progress', type: 'patch deploy', when: 'Apr 22' },
  { id: 'WF-1034', name: 'Identity provider rotation', state: 'Approved', type: 'access change', when: 'Apr 21' },
];

const ARCHIVE_SUMMARY = [
  { label: 'In Review',    count: 12, tone: 'amber' },
  { label: 'In Progress',  count:  8, tone: 'sky' },
  { label: 'Approved',     count: 17, tone: 'green' },
  { label: 'Closed',       count: 41, tone: 'neutral' },
];

/* ── Page ────────────────────────────────────────────────────── */
function HomePage() {
  const [expanded, setExpanded] = useHomePageState(SAMPLE_CVES[0].id);
  const [scanResult, setScanResult] = useHomePageState({ tone: 'success', text: 'CVE-2025-1014 addressed (3 vendors)' });
  const [search, setSearch] = useHomePageState('');
  const [vendor, setVendor] = useHomePageState('All Vendors');
  const [severity, setSeverity] = useHomePageState('All Severities');

  return (
    <div data-screen-label="01 Home" style={{
      padding: 32, minHeight: '100vh', background: 'var(--bg-page)',
      fontFamily: 'var(--font-display)',
    }}>
      {/* ── Top: 4-up stats ── */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 24 }}>
        <StatCard label="Total CVEs"     value="247" tone="sky" />
        <StatCard label="Vendor Entries" value="412" tone="neutral" />
        <StatCard label="Open Tickets"   value="18"  tone="amber" />
        <StatCard label="Critical"       value="6"   tone="red" />
      </div>

      {/* ── 12-col body ── */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 24 }}>

        {/* LEFT (col-span-9) */}
        <div style={{ gridColumn: 'span 9', display: 'flex', flexDirection: 'column', gap: 16 }}>

          {/* Quick CVE Lookup */}
          <HomeCard>
            <CardTitle color={HC.sky} icon="search">Quick CVE Lookup</CardTitle>
            <div style={{ display: 'flex', gap: 12 }}>
              <HomeInput placeholder="Enter CVE ID (e.g., CVE-2025-1014)" />
              <HomeButton variant="primary" icon="search" onClick={() => setScanResult({ tone: 'success', text: 'CVE-2025-1014 addressed (3 vendors)' })}>
                Scan
              </HomeButton>
            </div>
            {scanResult && (
              <div style={{ marginTop: 16 }}>
                <ResultBanner tone={scanResult.tone} title={scanResult.text}>
                  <div style={{ display: 'grid', gap: 10, marginTop: 8 }}>
                    {SAMPLE_CVES[0].vendors.map(v => (
                      <div key={v.vendor} style={{
                        padding: 12, background: 'rgba(15,23,42,0.7)',
                        border: '1px solid rgba(14,165,233,0.30)', borderRadius: 6,
                        boxShadow: '0 4px 8px rgba(0,0,0,0.3)',
                      }}>
                        <div style={{ fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 600, color: 'var(--fg-1)', marginBottom: 6 }}>{v.vendor}</div>
                        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 6, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-2)' }}>
                          <span><strong style={{ color: 'var(--fg-1)' }}>Sev:</strong> {v.severity}</span>
                          <span><strong style={{ color: 'var(--fg-1)' }}>Status:</strong> {v.status}</span>
                          <span><strong style={{ color: 'var(--fg-1)' }}>Docs:</strong> {v.docCount}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </ResultBanner>
              </div>
            )}
          </HomeCard>

          {/* Search + Filter */}
          <HomeCard>
            <div style={{ display: 'grid', gap: 16 }}>
              <div>
                <FieldLabel icon="search">Search CVEs</FieldLabel>
                <HomeInput value={search} onChange={e => setSearch(e.target.value)} placeholder="CVE ID or description…" />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                <div>
                  <FieldLabel icon="filter">Vendor</FieldLabel>
                  <HomeSelect value={vendor} onChange={e => setVendor(e.target.value)} options={['All Vendors', 'Red Hat', 'Cisco', 'Ubuntu', 'SUSE', 'Atlassian', 'Adobe']} />
                </div>
                <div>
                  <FieldLabel icon="alert">Severity</FieldLabel>
                  <HomeSelect value={severity} onChange={e => setSeverity(e.target.value)} options={['All Severities', 'Critical', 'High', 'Medium', 'Low']} />
                </div>
              </div>
            </div>
          </HomeCard>

          {/* Results summary */}
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <p style={{ margin: 0, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-2)' }}>
              <strong style={{ color: HC.sky, fontWeight: 700 }}>{SAMPLE_CVES.length}</strong> CVEs
              <span style={{ color: 'var(--fg-disabled)', margin: '0 8px' }}>•</span>
              <span style={{ color: 'var(--fg-1)' }}>{SAMPLE_CVES.reduce((n, c) => n + c.vendors.length, 0)}</span> vendor entries
            </p>
            <HomeButton variant="primary" icon="download">Export 2 Docs</HomeButton>
          </div>

          {/* CVE list */}
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {SAMPLE_CVES.map(cve => (
              <CVERow
                key={cve.id}
                cveId={cve.id}
                severity={cve.severity}
                description={cve.description}
                vendorCount={cve.vendors.length}
                docCount={cve.vendors.reduce((s, v) => s + v.docCount, 0)}
                statuses={cve.statuses}
                expanded={expanded === cve.id}
                onToggle={() => setExpanded(expanded === cve.id ? null : cve.id)}
              >
                {/* meta row */}
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 16, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-2)' }}>
                  <span>Published: 2025-03-12</span>
                  <span style={{ color: HC.sky }}>•</span>
                  <span>{cve.vendors.length} affected vendor{cve.vendors.length !== 1 ? 's' : ''}</span>
                  {cve.vendors.length >= 2 && (
                    <HomeButton variant="danger" icon="trash" size="sm" style={{ marginLeft: 8 }}>Delete All</HomeButton>
                  )}
                </div>
                {/* vendor sub-cards */}
                {cve.vendors.map((v, i) => (
                  <VendorEntry
                    key={`${cve.id}-${v.vendor}`}
                    vendor={v.vendor}
                    severity={v.severity}
                    status={v.status}
                    docCount={v.docCount}
                    onView={() => {}}
                    onEdit={() => {}}
                    onDelete={() => {}}
                  >
                    {/* For the first vendor of the first CVE, demonstrate the doc + ticket inset */}
                    {i === 0 && cve.id === SAMPLE_CVES[0].id && (
                      <>
                        <DocInset />
                        {cve.tickets && <TicketInset tickets={cve.tickets} />}
                      </>
                    )}
                  </VendorEntry>
                ))}
              </CVERow>
            ))}
          </div>
        </div>

        {/* RIGHT (col-span-3) */}
        <div style={{ gridColumn: 'span 3', display: 'flex', flexDirection: 'column', gap: 16 }}>
          {/* Calendar */}
          <HomeCard padding={20} leftRail={HC.sky}>
            <CardTitle color={HC.sky} icon="calendar">Calendar</CardTitle>
            <CalendarMini today={26} markedDays={{ 14: 'red', 18: 'amber', 22: 'sky', 24: 'amber' }} />
          </HomeCard>

          {/* Open Tickets */}
          <HomeCard padding={20} leftRail={HC.amber}>
            <CardTitle
              color={HC.amber}
              icon="alert"
              action={<HomeButton variant="warning" icon="plus" size="sm" />}
            >Open Tickets</CardTitle>
            <BigStat value={SAMPLE_OPEN_TICKETS.length} label="Active" color={HC.amber} />
            <ScrollList maxHeight={280}>
              {SAMPLE_OPEN_TICKETS.map(t => (
                <MiniTicket key={t.key} keyText={t.key} cveId={t.cveId} vendor={t.vendor} summary={t.summary} status={t.status} tone="amber" onEdit={() => {}} onDelete={() => {}} />
              ))}
            </ScrollList>
          </HomeCard>

          {/* Archer Risk */}
          <HomeCard padding={20} leftRail={HC.purple}>
            <CardTitle
              color={HC.purple}
              icon="shield"
              action={<button style={{ background: hAlpha(HC.purple, 0.18), border: `1px solid ${HC.purple}`, color: HC.purple, padding: '4px 8px', borderRadius: 4, fontFamily: 'var(--font-mono)', fontSize: 11, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4 }}><HI name="plus" size={12} color={HC.purple} /></button>}
            >Archer Risk Tickets</CardTitle>
            <BigStat value={SAMPLE_ARCHER.length} label="Active" color={HC.purple} />
            <ScrollList maxHeight={220}>
              {SAMPLE_ARCHER.map(t => (
                <MiniTicket key={t.key} keyText={t.key} cveId={t.cveId} vendor={t.vendor} status={t.status} tone="purple" onEdit={() => {}} onDelete={() => {}} />
              ))}
            </ScrollList>
          </HomeCard>

          {/* Ivanti Workflows */}
          <HomeCard padding={20} leftRail={HC.teal}>
            <CardTitle
              color={HC.teal}
              icon="activity"
              action={<button style={{ background: hAlpha(HC.teal, 0.18), border: `1px solid ${HC.teal}`, color: HC.teal, padding: '4px 8px', borderRadius: 4, fontFamily: 'var(--font-mono)', fontSize: 11, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4 }}><HI name="refresh" size={12} color={HC.teal} /> Sync</button>}
            >Ivanti Workflows</CardTitle>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-disabled)', marginBottom: 12 }}>
              Synced Apr 26 · 9:42 AM
            </div>
            <ArchiveSummary items={ARCHIVE_SUMMARY} />
            <BigStat value="78" label="Total Workflows" color={HC.teal} />
            <ScrollList maxHeight={240}>
              {SAMPLE_IVANTI.map(wf => (
                <div key={wf.id} style={{
                  background: 'linear-gradient(135deg, rgba(30,41,59,0.85), rgba(51,65,85,0.75))',
                  border: `1px solid ${hAlpha(HC.teal, 0.25)}`, borderRadius: 6,
                  padding: 10,
                  boxShadow: '0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.03)',
                }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 6, marginBottom: 4 }}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, color: '#5EEAD4' }}>{wf.id}</span>
                    <StatusBadge tone="teal" size="sm">{wf.state}</StatusBadge>
                  </div>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 12, color: 'var(--fg-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginBottom: 4 }}>{wf.name}</div>
                  <div style={{ display: 'flex', justifyContent: 'space-between', fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-2)' }}>
                    <span>{wf.type}</span>
                    <span style={{ color: 'var(--fg-disabled)' }}>{wf.when}</span>
                  </div>
                </div>
              ))}
            </ScrollList>
          </HomeCard>
        </div>
      </div>
    </div>
  );
}

/* ── Insets used inside the first VendorEntry ────────────────── */
function DocInset() {
  return (
    <div>
      <h5 style={{
        margin: '0 0 12px 0', display: 'flex', alignItems: 'center', gap: 6,
        fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
        color: 'var(--fg-1)', textTransform: 'uppercase', letterSpacing: '0.08em',
      }}>
        <HI name="doc" size={13} color={HC.sky} />
        Documents (4)
      </h5>
      <div style={{ display: 'grid', gap: 8 }}>
        {[
          { name: 'rh-advisory-2025-1014.pdf', meta: 'advisory · 220 KB' },
          { name: 'patch-notes-rhel9.pdf',     meta: 'patch · 85 KB · approved by sec-eng' },
        ].map(d => (
          <div key={d.name} style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '10px 12px', borderRadius: 4,
            background: 'rgba(15,23,42,0.6)', border: '1px solid rgba(14,165,233,0.15)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, flex: 1, minWidth: 0 }}>
              <input type="checkbox" style={{ accentColor: HC.sky }} />
              <HI name="doc" size={16} color={HC.sky} />
              <div style={{ minWidth: 0 }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-1)', fontWeight: 500 }}>{d.name}</div>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-2)' }}>{d.meta}</div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <HomeButton variant="neutral" size="sm">View</HomeButton>
              <HomeButton variant="danger" size="sm">Del</HomeButton>
            </div>
          </div>
        ))}
      </div>
      <HomeButton variant="neutral" icon="upload" size="sm" style={{ marginTop: 12 }}>Upload Doc</HomeButton>
    </div>
  );
}

function TicketInset({ tickets }) {
  return (
    <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid rgba(245,158,11,0.30)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
        <h5 style={{
          margin: 0, display: 'flex', alignItems: 'center', gap: 6,
          fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
          color: 'var(--fg-1)', textTransform: 'uppercase', letterSpacing: '0.08em',
        }}>
          <HI name="alert" size={13} color={HC.amber} />
          JIRA Tickets ({tickets.length})
        </h5>
        <HomeButton variant="primary" icon="plus" size="sm">Add Ticket</HomeButton>
      </div>
      <div style={{ display: 'grid', gap: 8 }}>
        {tickets.map(t => (
          <div key={t.key} style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '10px 12px', borderRadius: 6,
            background: 'linear-gradient(135deg, rgba(19,25,55,0.85), rgba(30,39,73,0.75))',
            border: '1px solid rgba(255,184,0,0.30)',
            boxShadow: '0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.04)',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, flex: 1, minWidth: 0 }}>
              <a href="#" onClick={e => e.preventDefault()} style={{ fontFamily: 'var(--font-mono)', fontSize: 12, fontWeight: 600, color: HC.sky, textDecoration: 'none' }}>{t.key}</a>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 12, color: 'var(--fg-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.summary}</span>
              <StatusBadge tone="amber" size="sm">{t.status}</StatusBadge>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.HOME_PAGE = { HomePage };