import React, { useEffect, useRef } from 'react';

// ─── Minimal Markdown → HTML renderer ────────────────────────────────────────
// Handles: headings, bold, inline-code, fenced code blocks, tables, hr,
// unordered lists, ordered lists, and paragraphs.
function mdToHtml(md) {
  const lines  = md.split('\n');
  const out    = [];
  let i        = 0;
  let inUl     = false;
  let inOl     = false;
  let inTable  = false;
  let tableHead = false;

  const closeOpenLists = () => {
    if (inUl)    { out.push('</ul>');   inUl    = false; }
    if (inOl)    { out.push('</ol>');   inOl    = false; }
    if (inTable) { out.push('</tbody></table>'); inTable = false; tableHead = false; }
  };

  const inline = (s) =>
    s
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
      .replace(/`([^`]+)`/g, '<code>$1</code>');

  while (i < lines.length) {
    const line = lines[i];

    // Fenced code block
    if (line.startsWith('```')) {
      closeOpenLists();
      const lang = line.slice(3).trim();
      const codeLines = [];
      i++;
      while (i < lines.length && !lines[i].startsWith('```')) {
        codeLines.push(lines[i].replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'));
        i++;
      }
      out.push(`<pre><code class="lang-${lang}">${codeLines.join('\n')}</code></pre>`);
      i++;
      continue;
    }

    // HR
    if (/^---+$/.test(line.trim())) {
      closeOpenLists();
      out.push('<hr>');
      i++;
      continue;
    }

    // Headings
    const hMatch = line.match(/^(#{1,4})\s+(.+)/);
    if (hMatch) {
      closeOpenLists();
      const level = hMatch[1].length;
      const id    = hMatch[2].toLowerCase().replace(/[^a-z0-9]+/g, '-');
      out.push(`<h${level} id="${id}">${inline(hMatch[2])}</h${level}>`);
      i++;
      continue;
    }

    // Table row
    if (line.trim().startsWith('|')) {
      const cells = line.trim().replace(/^\||\|$/g, '').split('|').map(c => c.trim());
      if (!inTable) {
        closeOpenLists();
        inTable   = true;
        tableHead = true;
        out.push('<table><thead><tr>');
        cells.forEach(c => out.push(`<th>${inline(c)}</th>`));
        out.push('</tr></thead><tbody>');
        i++;
        // skip separator row
        if (i < lines.length && lines[i].trim().startsWith('|') && /^[\|\s\-:]+$/.test(lines[i])) i++;
        continue;
      } else {
        out.push('<tr>');
        cells.forEach(c => out.push(`<td>${inline(c)}</td>`));
        out.push('</tr>');
        i++;
        continue;
      }
    }

    // Unordered list
    const ulMatch = line.match(/^[-*]\s+(.*)/);
    if (ulMatch) {
      if (inTable) closeOpenLists();
      if (!inUl) { if (inOl) { out.push('</ol>'); inOl = false; } out.push('<ul>'); inUl = true; }
      out.push(`<li>${inline(ulMatch[1])}</li>`);
      i++;
      continue;
    }

    // Ordered list
    const olMatch = line.match(/^\d+\.\s+(.*)/);
    if (olMatch) {
      if (inTable) closeOpenLists();
      if (!inOl) { if (inUl) { out.push('</ul>'); inUl = false; } out.push('<ol>'); inOl = true; }
      out.push(`<li>${inline(olMatch[1])}</li>`);
      i++;
      continue;
    }

    // Blank line
    if (line.trim() === '') {
      closeOpenLists();
      i++;
      continue;
    }

    // Paragraph
    closeOpenLists();
    out.push(`<p>${inline(line)}</p>`);
    i++;
  }

  closeOpenLists();
  return out.join('\n');
}

// ─── Styles ───────────────────────────────────────────────────────────────────
const overlay = {
  position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.75)',
  zIndex: 2000, display: 'flex', alignItems: 'flex-start', justifyContent: 'flex-end',
};

const panel = {
  background: '#111217', color: '#f8f9fa', width: '760px', maxWidth: '95vw',
  height: '100vh', overflowY: 'auto', boxShadow: '-4px 0 32px rgba(0,0,0,0.8)',
  display: 'flex', flexDirection: 'column',
};

const header = {
  background: 'linear-gradient(135deg, #000000, #151622)', color: 'white',
  padding: '22px 28px', position: 'sticky', top: 0, zIndex: 10,
  borderBottom: '1px solid #222', display: 'flex', alignItems: 'center',
  justifyContent: 'space-between',
};

const closeBtn = {
  background: 'none', border: 'none', color: 'white',
  fontSize: '22px', cursor: 'pointer', lineHeight: 1,
};

const body = {
  padding: '28px 32px', flex: 1, fontSize: '13px', lineHeight: '1.7',
};

// Injected <style> for rendered markdown elements
const CSS = `
.readme-body h1 { font-size: 22px; font-weight: 800; color: #f8f9fa; margin: 28px 0 10px; border-bottom: 1px solid #2a2b3a; padding-bottom: 8px; }
.readme-body h2 { font-size: 17px; font-weight: 700; color: #d4af37; margin: 26px 0 8px; }
.readme-body h3 { font-size: 14px; font-weight: 700; color: #90caf9; margin: 20px 0 6px; text-transform: uppercase; letter-spacing: 0.4px; }
.readme-body h4 { font-size: 13px; font-weight: 700; color: #9ca0b8; margin: 14px 0 4px; }
.readme-body p  { color: #c8ccd8; margin: 6px 0 10px; }
.readme-body hr { border: none; border-top: 1px solid #2a2b3a; margin: 20px 0; }
.readme-body strong { color: #f8f9fa; }
.readme-body code {
  background: #0d1117; color: #79c0ff; border: 1px solid #2a2b3a;
  border-radius: 4px; padding: 1px 6px; font-family: 'Consolas', 'Fira Code', monospace; font-size: 12px;
}
.readme-body pre {
  background: #0d1117; border: 1px solid #2a2b3a; border-radius: 6px;
  padding: 14px 16px; overflow-x: auto; margin: 10px 0 16px;
}
.readme-body pre code {
  background: none; border: none; padding: 0; color: #e6edf3;
  font-size: 12px; line-height: 1.6;
}
.readme-body ul { padding-left: 22px; margin: 6px 0 10px; color: #c8ccd8; }
.readme-body ol { padding-left: 22px; margin: 6px 0 10px; color: #c8ccd8; }
.readme-body li { margin: 3px 0; }
.readme-body table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  background: #181924; border-radius: 6px; overflow: hidden;
  border: 1px solid #2a2b3a; margin: 10px 0 16px;
}
.readme-body th {
  background: #050608; padding: 8px 12px; text-align: left;
  color: #f8f9fa; font-weight: 600; font-size: 11px; text-transform: uppercase;
  border-bottom: 1px solid #2a2b3a;
}
.readme-body td {
  padding: 8px 12px; border-bottom: 1px solid #202231; color: #c8ccd8;
}
.readme-body tr:last-child td { border-bottom: none; }
.readme-body tr:hover td { background: #1e1f2e; }
`;

// ─── Table-of-contents builder ────────────────────────────────────────────────
function buildToc(md) {
  const headings = [];
  for (const line of md.split('\n')) {
    const m = line.match(/^(#{1,3})\s+(.+)/);
    if (m) {
      headings.push({
        level: m[1].length,
        text:  m[2],
        id:    m[2].toLowerCase().replace(/[^a-z0-9]+/g, '-'),
      });
    }
  }
  return headings;
}

// ─── README content ───────────────────────────────────────────────────────────
// Embedded at build time — no extra fetch needed.
const README_MD = `# CPAS Violation Tracker

Single-container Dockerized web app for CPAS violation documentation and workforce standing management.
Built with **React + Vite** (frontend), **Node.js + Express** (backend), **SQLite** (database), and **Puppeteer** (PDF generation).

---

## Quickstart (Local)

\`\`\`bash
# 1. Build the image
docker build -t cpas-tracker .

# 2. Run it
docker run -d --name cpas-tracker \\
  -p 3001:3001 \\
  -v cpas-data:/data \\
  cpas-tracker
\`\`\`

Open **http://localhost:3001**

## Update After Code Changes

\`\`\`bash
docker build -t cpas-tracker .
docker stop cpas-tracker && docker rm cpas-tracker
docker run -d --name cpas-tracker -p 3001:3001 -v cpas-data:/data cpas-tracker
\`\`\`

---

## Features

### Company Dashboard
- Live employee table sorted by active CPAS points (highest risk first)
- Stat cards: total employees, elite standing, active points, at-risk count, highest score
- **At-risk badge** — flags employees within 2 points of the next tier escalation
- Search/filter by name, department, or supervisor
- **Audit Log** button — filterable, paginated view of all system write actions

### Violation Form
- Select existing employee or enter new by name
- **Employee intelligence** — shows current CPAS standing before submitting
- Violation type dropdown grouped by category with 90-day recurrence counts
- **Recidivist auto-escalation** — points slider auto-maximizes on repeat violations
- **Tier crossing warning** — previews tier impact before submission
- One-click PDF download after submission

### Employee Profile Modal
- Full violation history with resolution status and amendment count badges
- **Edit Employee** — update name, department, or supervisor inline
- **Merge Duplicate** — reassign all violations from a duplicate record
- **Amend** per active violation — edit non-scoring fields with full diff history
- Negate / restore individual violations (soft delete with resolution type + notes)
- Hard delete option for data entry errors
- **Notes & Flags** — free-text notes (e.g. "on PIP", "union member") visible in the profile
- **Point Expiration Timeline** — shows when each active violation rolls off the 90-day window with tier-drop projections

### Audit Log
- Append-only log of every write action
- Filterable by entity type and action; paginated with load-more

### Violation Amendment
- Edit submitted violations' non-scoring fields without delete-and-resubmit
- Point values, violation type, and incident date are immutable
- Every change stored as a field-level diff (old → new) with timestamp

---

## CPAS Tier System

| Points | Tier | Label |
|--------|------|-------|
| 0–4 | 0–1 | Elite Standing |
| 5–9 | 1 | Realignment |
| 10–14 | 2 | Administrative Lockdown |
| 15–19 | 3 | Verification |
| 20–24 | 4 | Risk Mitigation |
| 25–29 | 5 | Final Decision |
| 30+ | 6 | Separation |

Scores are computed over a **rolling 90-day window** (negated violations excluded).

---

## API Reference

| Method | Endpoint | Description |
|--------|----------|-------------|
| GET | \`/api/health\` | Health check |
| GET | \`/api/employees\` | List all employees (includes notes) |
| POST | \`/api/employees\` | Create or upsert employee |
| PATCH | \`/api/employees/:id\` | Edit name, department, supervisor, or notes |
| POST | \`/api/employees/:id/merge\` | Merge duplicate employee |
| GET | \`/api/employees/:id/score\` | Active CPAS score |
| GET | \`/api/employees/:id/expiration\` | Active violation roll-off timeline |
| PATCH | \`/api/employees/:id/notes\` | Save employee notes only |
| GET | \`/api/dashboard\` | All employees with active points |
| POST | \`/api/violations\` | Log a new violation |
| GET | \`/api/violations/employee/:id\` | Violation history with resolutions + amendment counts |
| PATCH | \`/api/violations/:id/negate\` | Soft delete + resolution record |
| PATCH | \`/api/violations/:id/restore\` | Restore a negated violation |
| PATCH | \`/api/violations/:id/amend\` | Amend non-scoring fields |
| GET | \`/api/violations/:id/amendments\` | Amendment history |
| DELETE | \`/api/violations/:id\` | Hard delete |
| GET | \`/api/violations/:id/pdf\` | Download violation PDF |
| GET | \`/api/audit\` | Paginated audit log |

---

## Database Schema

Six tables + one view:

- **\`employees\`** — id, name, department, supervisor, **notes**
- **\`violations\`** — full incident record including \`prior_active_points\` snapshot
- **\`violation_resolutions\`** — resolution type, details, resolved_by
- **\`violation_amendments\`** — field-level diff log per amendment
- **\`audit_log\`** — append-only record of every write action
- **\`active_cpas_scores\`** (view) — rolling 90-day score per employee

---

## Amendable Fields

The following violation fields can be edited after submission. Points, type, and incident date are **immutable**.

| Field | Notes |
|-------|-------|
| \`incident_time\` | Time of day the incident occurred |
| \`location\` | Where the incident took place |
| \`details\` | Narrative description |
| \`submitted_by\` | Supervisor who submitted |
| \`witness_name\` | Witness on record |

---

## Docker Quick Reference

\`\`\`bash
# Build
docker build -t cpas-tracker .

# Run
docker run -d --name cpas-tracker -p 3001:3001 -v cpas-data:/data cpas-tracker

# Stop / remove
docker stop cpas-tracker && docker rm cpas-tracker

# Export for Unraid
docker save cpas-tracker | gzip > cpas-tracker.tar.gz

# View logs
docker logs -f cpas-tracker
\`\`\`
`;

// ─── Component ────────────────────────────────────────────────────────────────
export default function ReadmeModal({ onClose }) {
  const bodyRef  = useRef(null);
  const html     = mdToHtml(README_MD);
  const toc      = buildToc(README_MD);

  // Close on Escape
  useEffect(() => {
    const handler = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', handler);
    return () => window.removeEventListener('keydown', handler);
  }, [onClose]);

  const scrollTo = (id) => {
    const el = bodyRef.current?.querySelector(`#${id}`);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  const handleOverlay = (e) => { if (e.target === e.currentTarget) onClose(); };

  return (
    <div style={overlay} onClick={handleOverlay}>
      {/* Inject markdown CSS once */}
      <style>{CSS}</style>

      <div style={panel} onClick={(e) => e.stopPropagation()}>

        {/* Header */}
        <div style={header}>
          <div>
            <div style={{ fontSize: '17px', fontWeight: 800, letterSpacing: '0.3px' }}>
              📋 CPAS Tracker — Documentation
            </div>
            <div style={{ fontSize: '11px', color: '#9ca0b8', marginTop: '3px' }}>
              Admin reference · use Esc or click outside to close
            </div>
          </div>
          <button style={closeBtn} onClick={onClose} aria-label="Close">✕</button>
        </div>

        {/* TOC strip */}
        <div style={{
          background: '#0d1117', borderBottom: '1px solid #1e1f2e',
          padding: '10px 32px', display: 'flex', flexWrap: 'wrap', gap: '4px 16px',
          fontSize: '11px',
        }}>
          {toc.filter(h => h.level <= 2).map((h) => (
            <button
              key={h.id}
              onClick={() => scrollTo(h.id)}
              style={{
                background: 'none', border: 'none', cursor: 'pointer', padding: '2px 0',
                color: h.level === 1 ? '#f8f9fa' : '#90caf9',
                fontWeight: h.level === 1 ? 700 : 400,
                fontSize: '11px',
              }}
            >
              {h.level === 2 ? '↳ ' : ''}{h.text}
            </button>
          ))}
        </div>

        {/* Body */}
        <div
          ref={bodyRef}
          style={body}
          className="readme-body"
          dangerouslySetInnerHTML={{ __html: html }}
        />

        {/* Footer */}
        <div style={{
          padding: '14px 32px', borderTop: '1px solid #1e1f2e',
          fontSize: '11px', color: '#555770', textAlign: 'center',
        }}>
          CPAS Violation Tracker · internal admin use only
        </div>
      </div>
    </div>
  );
}