// Dossier — main page · hacker palette, dark terminal-paper feel.
// Mobile-responsive: stacks on narrow screens.

const dossierStyles = {
  page: {
    width: '100%', minHeight: '100vh',
    color: 'var(--ink)',
    fontFamily: "'JetBrains Mono', ui-monospace, monospace",
    padding: '40px 24px 64px',
  },
  paper: {
    background: 'var(--paper)',
    border: '1px solid var(--line-2)',
    boxShadow: '8px 8px 0 var(--green-dark), 8px 8px 0 1px var(--line-2)',
    padding: '40px 48px 60px',
    maxWidth: 1120,
    margin: '0 auto',
    position: 'relative',
  },
  classBar: {
    background: '#000',
    color: 'var(--green)',
    margin: '-40px -48px 32px',
    padding: '10px 48px',
    fontSize: 11,
    letterSpacing: 2.4,
    display: 'flex',
    justifyContent: 'space-between',
    flexWrap: 'wrap',
    gap: 8,
    borderBottom: '1px solid var(--green)',
  },
  docHead: {
    display: 'grid',
    gridTemplateColumns: '1fr 280px',
    gap: 40,
    paddingBottom: 24,
    borderBottom: '2px solid var(--line-2)',
    marginBottom: 28,
  },
  docNo: { fontSize: 11, letterSpacing: 1.4, color: 'var(--green)', marginBottom: 10 },
  docTitle: {
    fontFamily: "'Inter', sans-serif", fontSize: 52, fontWeight: 700,
    letterSpacing: -1.6, margin: 0, lineHeight: 1.02, color: '#fff',
  },
  docSub: {
    fontSize: 15, color: 'var(--ink-2)', marginTop: 16, lineHeight: 1.65,
    fontFamily: "'Inter', sans-serif", maxWidth: 640,
  },
  metaTable: { fontSize: 12, lineHeight: 2, color: 'var(--ink)' },
  metaRow: { display: 'grid', gridTemplateColumns: '92px 1fr', gap: 8 },
  metaKey: { color: 'var(--dim)', textTransform: 'uppercase', letterSpacing: 0.6, fontSize: 10 },

  exec: {
    fontFamily: "'Inter', sans-serif", fontSize: 16, lineHeight: 1.7,
    color: 'var(--ink)',
    background: 'var(--paper-2)',
    padding: '18px 22px',
    border: '1px solid var(--line-2)',
    borderLeft: '3px solid var(--green)',
  },
  execAccent: { color: 'var(--green)', fontWeight: 600 },

  table: { width: '100%', borderCollapse: 'collapse', fontSize: 13, overflowX: 'auto', display: 'block' },
  th: {
    textAlign: 'left', padding: '10px 12px',
    background: '#000', color: 'var(--green)',
    fontWeight: 500, letterSpacing: 1, fontSize: 10,
    borderBottom: '1px solid var(--green)',
  },
  td: {
    padding: '12px 12px',
    borderBottom: '1px solid var(--line)',
    verticalAlign: 'top', fontSize: 13, lineHeight: 1.55,
    fontFamily: "'Inter', sans-serif",
    color: 'var(--ink)',
  },
  tdMono: { fontFamily: "'JetBrains Mono', monospace", color: 'var(--ink-2)' },

  matrix: {
    display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)',
    gap: 0, border: '1px solid var(--line-2)',
    background: 'var(--paper-2)',
  },
  matCol: { borderRight: '1px solid var(--line-2)', padding: '14px 16px' },
  matLast: { borderRight: 'none' },
  matLabel: {
    fontSize: 11, letterSpacing: 1, color: 'var(--green)',
    marginBottom: 10, textTransform: 'uppercase',
  },
  matItem: { fontSize: 13, color: 'var(--ink)', padding: '3px 0' },

  signoff: {
    marginTop: 48, paddingTop: 24, borderTop: '2px solid var(--line-2)',
    display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24, fontSize: 12,
  },
};

// Mobile overrides applied inline via window.innerWidth check
// useIsMobile() hook defined in project-detail.jsx (loaded before this file)

const CATEGORY_CONFIG = {
  red:  { label: 'RED · OFFENSE',            accent: 'var(--red)' },
  blue: { label: 'BLUE · DEFENSE',           accent: 'var(--blue)' },
  grey: { label: 'GREY · REVERSE / SYSTEMS', accent: 'var(--grey)' },
};

function CompactFindingRow({ project, idx, onOpen, accent }) {
  const open = () => onOpen(project.id);
  const cross = project.crossTag;
  const crossAccent = cross && CATEGORY_CONFIG[cross] ? CATEGORY_CONFIG[cross].accent : 'var(--ink-2)';
  const crossLabel = cross ? CATEGORY_CONFIG[cross].label.split(' · ')[1] : null;

  return (
    <div
      className="finding-card"
      style={{
        border: '1px solid var(--line-2)',
        background: 'var(--paper-2)',
        cursor: 'pointer',
        marginBottom: 12,
        display: 'flex',
        flexDirection: 'column',
      }}
      onClick={open}
      role="button"
      tabIndex={0}
      onKeyDown={(e) => { if (e.key === 'Enter') open(); }}
    >
      <div style={{
        background: '#000',
        padding: '8px 12px',
        borderBottom: '1px solid var(--line-2)',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        fontSize: 10,
        letterSpacing: 1,
      }}>
        <span style={{ color: accent, fontWeight: 500 }}>TW-{String(idx + 1).padStart(3, '0')}</span>
        <span style={{ color: 'var(--dim)', textTransform: 'uppercase', fontSize: 9, letterSpacing: 0.8 }}>{project.kind}</span>
      </div>
      <div style={{ padding: '14px 14px 12px', flex: 1, display: 'flex', flexDirection: 'column' }}>
        <h3 style={{
          fontFamily: "'Inter', sans-serif",
          fontSize: 15,
          fontWeight: 600,
          color: '#fff',
          margin: '0 0 8px',
          lineHeight: 1.3,
        }}>{project.title}</h3>
        <p style={{
          fontFamily: "'Inter', sans-serif",
          fontSize: 13,
          lineHeight: 1.55,
          color: 'var(--ink-2)',
          margin: '0 0 12px',
          flex: 1,
        }}>{project.blurb}</p>
        <div style={{ marginBottom: 10 }}>
          {project.tags.slice(0, 4).map(t => (
            <span key={t} style={{
              fontSize: 10,
              letterSpacing: 0.4,
              color: 'var(--green)',
              border: '1px solid var(--line-2)',
              background: '#000',
              padding: '2px 6px',
              borderRadius: 2,
              marginRight: 4,
              marginBottom: 4,
              display: 'inline-block',
              fontFamily: "'JetBrains Mono', monospace",
            }}>{t}</span>
          ))}
        </div>
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          fontSize: 11,
          gap: 8,
        }}>
          <span style={{
            color: project.wip ? 'var(--amber)' : 'var(--green)',
            fontFamily: "'JetBrains Mono', monospace",
            fontSize: 11,
          }}>
            {project.wip ? '◐ IN PROGRESS' : '● PUBLISHED'}
          </span>
          {cross && (
            <span style={{
              fontSize: 9,
              letterSpacing: 1,
              color: crossAccent,
              border: `1px solid ${crossAccent}`,
              padding: '2px 6px',
              borderRadius: 2,
              fontFamily: "'JetBrains Mono', monospace",
            }}>+ {crossLabel}</span>
          )}
        </div>
      </div>
      <div style={{
        background: '#000',
        borderTop: '1px solid var(--line-2)',
        padding: '8px 14px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        fontSize: 11,
      }}>
        <span style={{ color: 'var(--dim)', fontSize: 10 }}>$ open</span>
        <span className="read-link finding-arrow" style={{ fontSize: 11 }}>Open →</span>
      </div>
    </div>
  );
}

function CategoryColumn({ catKey, projects, onOpenProject }) {
  const cfg = CATEGORY_CONFIG[catKey];
  return (
    <div style={{
      borderTop: `2px solid ${cfg.accent}`,
      paddingTop: 14,
      display: 'flex',
      flexDirection: 'column',
    }}>
      <div style={{
        fontSize: 11,
        letterSpacing: 1.4,
        color: cfg.accent,
        marginBottom: 14,
        textTransform: 'uppercase',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'baseline',
        paddingBottom: 8,
        borderBottom: '1px solid var(--line-2)',
      }}>
        <span>// {cfg.label}</span>
        <span style={{ color: 'var(--dim)', fontSize: 10, letterSpacing: 0.8 }}>
          {projects.length} {projects.length === 1 ? 'entry' : 'entries'}
        </span>
      </div>
      {projects.map(({ project, idx }) => (
        <CompactFindingRow
          key={project.id}
          project={project}
          idx={idx}
          onOpen={onOpenProject}
          accent={cfg.accent}
        />
      ))}
    </div>
  );
}

function DossierMain({ onOpenProject }) {
  const r = window.RESUME;
  const d = dossierStyles;
  const projects = r.projects.filter(p => !p.disabled);
  const mobile = useIsMobile();

  return (
    <div style={d.page}>
      <div style={{
        ...d.paper,
        padding: mobile ? '24px 20px 40px' : '40px 48px 60px',
        boxShadow: mobile ? '4px 4px 0 var(--green-dark), 4px 4px 0 1px var(--line-2)' : '8px 8px 0 var(--green-dark), 8px 8px 0 1px var(--line-2)',
      }}>
        <div style={{
          ...d.classBar,
          margin: mobile ? '-24px -20px 24px' : '-40px -48px 32px',
          padding: mobile ? '8px 20px' : '10px 48px',
          fontSize: mobile ? 9 : 11,
        }}>
          <span>// PORTFOLIO · UNCLASSIFIED</span>
          <span>REV 2026.04</span>
        </div>

        <header style={{
          ...d.docHead,
          gridTemplateColumns: mobile ? '1fr' : '1fr 280px',
          gap: mobile ? 24 : 40,
        }}>
          <div>
            <div style={d.docNo}>$ whoami<span className="caret"></span></div>
            <h1 style={{ ...d.docTitle, fontSize: mobile ? 36 : 52 }}>{r.name}</h1>
            <p style={{ ...d.docSub, fontSize: mobile ? 14 : 15 }}>
              Cybersecurity student at the University of South Florida with a strong focus on
              problem-solving across systems, networks, and applications. Interests span malware
              analysis, detection engineering, and reverse engineering — with a preference for
              projects that close the loop between offense and defense.
            </p>
          </div>
          <div style={{ ...d.metaTable, fontSize: mobile ? 11 : 12 }}>
            <div style={d.metaRow}><span style={d.metaKey}>handle</span><span style={{ color: 'var(--green)' }}>{r.handle}</span></div>
            <div style={d.metaRow}><span style={d.metaKey}>status</span><span style={{ color: 'var(--green)' }}>● AVAILABLE · S26</span></div>
            <div style={d.metaRow}><span style={d.metaKey}>location</span><span>{r.location}</span></div>
            <div style={d.metaRow}><span style={d.metaKey}>edu</span><span>{r.education.school}</span></div>
            <div style={d.metaRow}><span style={d.metaKey}>degree</span><span>{r.education.degree}</span></div>
            <div style={d.metaRow}><span style={d.metaKey}>gpa</span><span style={{ color: 'var(--green)' }}>{r.education.gpa} / 4.00</span></div>
            <div style={d.metaRow}><span style={d.metaKey}>team</span><span>{r.team.name}</span></div>
            <div style={d.metaRow}><span style={d.metaKey}>email</span><span style={{ color: 'var(--blue)' }}>{r.email}</span></div>
            <div style={d.metaRow}><span style={d.metaKey}>linkedin</span><span style={{ color: 'var(--blue)' }}>{r.links.linkedin}</span></div>
          </div>
        </header>

        <div className="h-section"><span>§ 1 — Executive summary</span><span className="h-count">1 paragraph</span></div>
        <p style={{ ...d.exec, fontSize: mobile ? 14 : 16, padding: mobile ? '14px 16px' : '18px 22px' }}>
          Cybersecurity student at USF with hands-on experience building offensive tooling,
          reverse-engineering Windows systems, and designing defensive projects that test real
          detection gaps. Strongest in <span style={d.execAccent}>Windows internals</span>,
          <span style={d.execAccent}> reverse engineering</span>, and <span style={d.execAccent}>security tooling</span>,
          with practical experience across both red- and blue-team workflows. Seeking a
          <span style={d.execAccent}> Summer 2026 cybersecurity internship</span> in security engineering,
          detection, or offensive research.
        </p>

        <div className="h-section"><span>§ 2 — Competitions &amp; CTF</span><span className="h-count">{r.competitions.length} entries</span></div>
        <div style={{ overflowX: 'auto' }}>
          <table style={{ ...d.table, minWidth: mobile ? 600 : 'auto' }}>
            <thead>
              <tr>
                <th style={{ ...d.th, width: 50 }}>#</th>
                <th style={d.th}>EVENT</th>
                <th style={d.th}>TYPE</th>
                <th style={d.th}>ROLE</th>
                <th style={d.th}>RESULT</th>
              </tr>
            </thead>
            <tbody>
              {r.competitions.map((c, i) => (
                <tr key={i}>
                  <td style={{ ...d.td, ...d.tdMono }}>{String(i + 1).padStart(2, '0')}</td>
                  <td style={d.td}>{c.name}</td>
                  <td style={{ ...d.td, ...d.tdMono, color: 'var(--green)' }}>{c.category}</td>
                  <td style={d.td}>{c.role}</td>
                  <td style={d.td}>{c.result}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {r.upcomingCompetitions?.length ? (
          <div style={{ marginTop: 16 }}>
            <div style={{ overflowX: 'auto' }}>
              <table style={{ ...d.table, minWidth: mobile ? 600 : 'auto' }}>
                <thead>
                  <tr>
                    <th style={{ ...d.th, width: 50 }}>#</th>
                    <th style={d.th}>EVENT</th>
                    <th style={d.th}>TYPE</th>
                    <th style={d.th}>ROLE</th>
                  </tr>
                </thead>
                <tbody>
                  {r.upcomingCompetitions.map((c, i) => (
                    <tr key={i}>
                      <td style={{ ...d.td, ...d.tdMono }}>{String(i + 1).padStart(2, '0')}</td>
                      <td style={d.td}>{c.name}</td>
                      <td style={{ ...d.td, ...d.tdMono, color: 'var(--green)' }}>{c.category}</td>
                      <td style={d.td}>{c.role}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        ) : null}

        <div className="h-section">
          <span>§ 3 — Technical work</span>
          <span className="h-count">{projects.length} entries · 3 categories</span>
        </div>
        {(() => {
          const grouped = { red: [], blue: [], grey: [] };
          projects.forEach((p, idx) => {
            const cat = grouped[p.category] ? p.category : 'grey';
            grouped[cat].push({ project: p, idx });
          });
          return (
            <div style={{
              display: 'grid',
              gridTemplateColumns: mobile ? '1fr' : 'repeat(3, 1fr)',
              gap: mobile ? 28 : 16,
              marginBottom: 16,
              alignItems: 'start',
            }}>
              {['red', 'blue', 'grey'].map(key => (
                <CategoryColumn
                  key={key}
                  catKey={key}
                  projects={grouped[key]}
                  onOpenProject={onOpenProject}
                />
              ))}
            </div>
          );
        })()}

        <div className="h-section"><span>§ 4 — Experience</span><span className="h-count">2 entries</span></div>
        <div style={{ overflowX: 'auto' }}>
          <table style={{ ...d.table, minWidth: mobile ? 600 : 'auto' }}>
            <thead>
              <tr>
                <th style={d.th}>ROLE</th>
                <th style={d.th}>ORGANIZATION</th>
                <th style={d.th}>DATES</th>
                <th style={d.th}>NOTES</th>
              </tr>
            </thead>
            <tbody>
              {r.experience.map((e, i) => (
                <tr key={i}>
                  <td style={d.td}>{e.role}</td>
                  <td style={d.td}>{e.company}</td>
                  <td style={{ ...d.td, ...d.tdMono }}>{e.dates}</td>
                  <td style={d.td}>{e.notes.join(' ')}</td>
                </tr>
              ))}
              <tr>
                <td style={d.td}>{r.team.role}</td>
                <td style={d.td}>{r.team.name} · {r.team.org}</td>
                <td style={{ ...d.td, ...d.tdMono }}>2025 — Present</td>
                <td style={d.td}>{r.team.note}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <div className="h-section"><span>§ 5 — Skill matrix</span><span className="h-count">5 columns</span></div>
        <div style={{
          ...d.matrix,
          gridTemplateColumns: mobile ? 'repeat(2, 1fr)' : 'repeat(5, 1fr)',
        }}>
          {Object.entries(r.skills).map(([k, v], i, arr) => (
            <div key={k} style={{ ...d.matCol, ...((!mobile && i === arr.length - 1) || (mobile && i % 2 === 1) ? d.matLast : {}), padding: mobile ? '12px' : '14px 16px' }}>
              <div style={{ ...d.matLabel, fontSize: mobile ? 10 : 11 }}>{k}</div>
              {v.map(s => <div key={s} style={{ ...d.matItem, fontSize: mobile ? 12 : 13 }}>· {s}</div>)}
            </div>
          ))}
        </div>

        <div style={{
          ...d.signoff,
          gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
          gap: mobile ? 16 : 24,
        }}>
          <div>
            <div style={{ color: 'var(--dim)', marginBottom: 8, textTransform: 'uppercase', letterSpacing: 1, fontSize: mobile ? 10 : 11 }}>// prepared by</div>
            <div style={{ fontFamily: "'Inter', sans-serif", fontSize: mobile ? 14 : 16, fontWeight: 600, color: '#fff' }}>{r.name}</div>
            <div style={{ color: 'var(--blue)', marginTop: 4, fontSize: mobile ? 11 : 12 }}>{r.email}</div>
            <div style={{ color: 'var(--blue)', fontSize: mobile ? 11 : 12 }}>{r.links.linkedin}</div>
          </div>
          <div></div>
        </div>
      </div>
    </div>
  );
}

window.DossierMain = DossierMain;