import { Callout } from "../components/Callout";
import { CodeBlock } from "../components/CodeBlock";
import { Link } from "react-router-dom";

export function ComplianceGuide() {
  return (
    <div>
      <h1 id="compliance">GDPR & EU AI Act Compliance</h1>
      <p>
        Veylant IA includes a built-in compliance module for GDPR Article 30 record-keeping and EU
        AI Act risk classification. It is designed to serve as your primary compliance tool for AI
        deployments.
      </p>

      <h2 id="gdpr-art30">GDPR Article 30 — Record of Processing Activities</h2>
      <p>
        Article 30 requires organizations to maintain a written record of all data processing
        activities. For AI systems, this means documenting each use case where personal data may be
        processed.
      </p>

      <h3 id="ropa-fields">Required ROPA Fields</h3>
      <div className="overflow-x-auto my-4">
        <table className="w-full text-sm border rounded-lg overflow-hidden">
          <thead>
            <tr className="bg-muted/50 border-b">
              <th className="text-left px-4 py-2.5 font-semibold">Field</th>
              <th className="text-left px-4 py-2.5 font-semibold">GDPR Requirement</th>
              <th className="text-left px-4 py-2.5 font-semibold">Example</th>
            </tr>
          </thead>
          <tbody>
            {[
              { field: "use_case_name", req: "Name of the processing activity", ex: "Legal contract analysis" },
              { field: "purpose", req: "Art. 5(1)(b) — purpose limitation", ex: "Automated risk identification in supplier contracts" },
              { field: "legal_basis", req: "Art. 6 — lawfulness of processing", ex: "legitimate_interest" },
              { field: "data_categories", req: "Art. 30(1)(c) — categories of data subjects and data", ex: "name, email, financial" },
              { field: "retention_period", req: "Art. 5(1)(e) — storage limitation", ex: "3 years" },
              { field: "security_measures", req: "Art. 32 — security of processing", ex: "AES-256-GCM, PII anonymization" },
              { field: "controller_name", req: "Art. 30(1)(a) — controller identity", ex: "Acme Corp — dpo@acme.com" },
              { field: "processors", req: "Art. 30(1)(d) — recipients of data", ex: "Anthropic (via Veylant IA proxy)" },
            ].map((row) => (
              <tr key={row.field} className="border-b last:border-0">
                <td className="px-4 py-2.5 font-mono text-xs">{row.field}</td>
                <td className="px-4 py-2.5 text-xs text-muted-foreground">{row.req}</td>
                <td className="px-4 py-2.5 text-xs text-muted-foreground italic">{row.ex}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <h3 id="legal-bases">Legal Bases</h3>
      <ul>
        <li><code>consent</code> — User has given explicit consent (Art. 6(1)(a))</li>
        <li><code>contract</code> — Processing necessary for a contract (Art. 6(1)(b))</li>
        <li><code>legal_obligation</code> — Required by law (Art. 6(1)(c))</li>
        <li><code>vital_interests</code> — Protecting someone's life (Art. 6(1)(d))</li>
        <li><code>public_task</code> — Public interest or official authority (Art. 6(1)(e))</li>
        <li><code>legitimate_interest</code> — Legitimate interests of the controller (Art. 6(1)(f))</li>
      </ul>

      <h2 id="ai-act">EU AI Act Risk Classification</h2>
      <p>
        The EU AI Act (effective August 2024, full enforcement from August 2026) classifies AI
        systems into four risk categories.
      </p>

      <div className="space-y-3 my-4">
        {[
          {
            level: "Forbidden",
            color: "border-red-400 bg-red-50 dark:bg-red-950/30",
            badge: "bg-red-100 dark:bg-red-900/40 text-red-700 dark:text-red-300",
            score: "Score 5",
            desc: "Cannot be deployed. Examples: social scoring systems, real-time biometric surveillance in public spaces, AI that exploits vulnerable groups.",
          },
          {
            level: "High Risk",
            color: "border-orange-400 bg-orange-50 dark:bg-orange-950/30",
            badge: "bg-orange-100 dark:bg-orange-900/40 text-orange-700 dark:text-orange-300",
            score: "Score 3–4",
            desc: "Requires conformity assessment before deployment. DPIA mandatory. Examples: AI in hiring, credit scoring, education grading, critical infrastructure.",
          },
          {
            level: "Limited Risk",
            color: "border-amber-400 bg-amber-50 dark:bg-amber-950/30",
            badge: "bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-300",
            score: "Score 1–2",
            desc: "Transparency obligations apply. Users must be informed they interact with AI. Examples: chatbots, recommendation systems, customer service AI.",
          },
          {
            level: "Minimal Risk",
            color: "border-green-400 bg-green-50 dark:bg-green-950/30",
            badge: "bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-300",
            score: "Score 0",
            desc: "Minimal or no risk. Voluntary code of conduct recommended. Examples: spam filters, AI-powered search, content recommendation.",
          },
        ].map((item) => (
          <div key={item.level} className={`flex items-start gap-3 rounded-lg border-l-4 p-4 ${item.color}`}>
            <div className="min-w-0">
              <div className="flex items-center gap-2 mb-1">
                <span className={`text-xs font-bold px-2 py-0.5 rounded ${item.badge}`}>
                  {item.level}
                </span>
                <span className="text-xs text-muted-foreground">{item.score}</span>
              </div>
              <p className="text-sm text-muted-foreground leading-relaxed">{item.desc}</p>
            </div>
          </div>
        ))}
      </div>

      <h2 id="dpia">Data Protection Impact Assessment (DPIA)</h2>
      <p>
        A DPIA is mandatory under GDPR Art. 35 for high-risk processing activities. High-risk AI
        systems under the AI Act also trigger DPIA requirements. Veylant IA generates DPIA template
        documents from the Admin → Compliance → Reports tab.
      </p>

      <h2 id="reports">Compliance Reports</h2>
      <p>Available report formats via the API:</p>
      <CodeBlock
        language="bash"
        code={`# GDPR Article 30 registry — PDF
GET /v1/admin/compliance/reports/art30.pdf

# GDPR Article 30 registry — JSON export
GET /v1/admin/compliance/reports/art30.json

# AI Act risk classification report — PDF
GET /v1/admin/compliance/reports/ai-act.pdf

# DPIA template — PDF
GET /v1/admin/compliance/reports/dpia/{entry_id}.pdf

# Audit log export — CSV
GET /v1/admin/logs/export?from=2026-01-01T00:00:00Z&to=2026-01-31T23:59:59Z`}
      />

      <Callout type="tip" title="Audit-of-the-audit">
        All accesses to compliance reports and audit logs are themselves logged. This satisfies
        data protection authority requirements for meta-logging of sensitive data access.
      </Callout>

      <h2 id="next-steps">Working with Compliance</h2>
      <p>
        See the <Link to="/docs/api/admin/compliance">Admin — Compliance API</Link> for full
        endpoint documentation, or navigate to{" "}
        <strong>Dashboard → Compliance</strong> to use the visual interface.
      </p>
    </div>
  );
}
