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, EU
        AI Act risk classification, DPIA generation, and GDPR subject rights management. It is
        designed to serve as the primary compliance tool for enterprise 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 every use case where personal data may
        be processed — including through third-party LLM providers.
      </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: "Analyse de contrats fournisseurs" },
              { field: "purpose", req: "Art. 5(1)(b) — purpose limitation", ex: "Identification automatique des risques dans les contrats" },
              { 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\", \"financial\"]" },
              { field: "retention_period", req: "Art. 5(1)(e) — storage limitation", ex: "3 ans" },
              { field: "security_measures", req: "Art. 32 — security of processing", ex: "AES-256-GCM, anonymisation PII, audit logs" },
              { 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 (Art. 6 GDPR)</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 (full enforcement from August 2026) classifies AI systems into four risk
        categories. Veylant IA automates the classification via a 5-question questionnaire
        (<code>q1</code>–<code>q5</code>), scoring each <code>true</code> answer as +1.
      </p>

      <div className="space-y-3 my-4">
        {[
          {
            level: "Interdit (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: "Déploiement interdit. Exemples : notation sociale des personnes, surveillance biométrique en temps réel dans l'espace public, IA exploitant des groupes vulnérables.",
          },
          {
            level: "Haut risque (high)",
            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: "Évaluation de conformité obligatoire avant déploiement. AIPD (DPIA) requise. Exemples : IA dans le recrutement, le scoring crédit, la notation scolaire, les infrastructures critiques.",
          },
          {
            level: "Risque limité (limited)",
            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: "Obligations de transparence : les utilisateurs doivent être informés qu'ils interagissent avec un système d'IA. Exemples : chatbots, systèmes de recommandation, service client automatisé.",
          },
          {
            level: "Risque minimal (minimal)",
            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: "Risque minimal. Code de conduite volontaire recommandé. Exemples : filtres anti-spam, recherche IA, recommandation de contenu.",
          },
        ].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 (<code>risk_level: "high"</code>) also trigger DPIA requirements.
        Veylant IA generates a DPIA template PDF from any processing entry.
      </p>

      <CodeBlock
        language="bash"
        code={`# Generate DPIA PDF for a specific entry
curl "http://localhost:8090/v1/admin/compliance/dpia/entry-uuid" \\
  -H "Authorization: Bearer $TOKEN" \\
  --output dpia_$(date +%Y-%m-%d).pdf`}
      />

      <h2 id="reports">Compliance Reports</h2>
      <p>All reports are available as PDF (default) or JSON (<code>?format=json</code>):</p>
      <CodeBlock
        language="bash"
        code={`# GDPR Article 30 register — PDF
curl "http://localhost:8090/v1/admin/compliance/report/article30" \\
  -H "Authorization: Bearer $TOKEN" \\
  --output article30_rgpd_$(date +%Y-%m-%d).pdf

# GDPR Article 30 register — JSON (for custom reporting)
curl "http://localhost:8090/v1/admin/compliance/report/article30?format=json" \\
  -H "Authorization: Bearer $TOKEN"

# AI Act risk classification report — PDF
curl "http://localhost:8090/v1/admin/compliance/report/aiact" \\
  -H "Authorization: Bearer $TOKEN" \\
  --output aiact_report_$(date +%Y-%m-%d).pdf

# AI Act report — JSON
curl "http://localhost:8090/v1/admin/compliance/report/aiact?format=json" \\
  -H "Authorization: Bearer $TOKEN"

# DPIA for a specific entry — PDF only
curl "http://localhost:8090/v1/admin/compliance/dpia/{entry-id}" \\
  -H "Authorization: Bearer $TOKEN" \\
  --output dpia_{entry-id}_$(date +%Y-%m-%d).pdf

# Audit log export — CSV (max 10 000 rows, accepts YYYY-MM-DD dates)
curl "http://localhost:8090/v1/admin/compliance/export/logs?start=2026-01-01&end=2026-03-31" \\
  -H "Authorization: Bearer $TOKEN" \\
  --output audit_q1_2026.csv`}
      />

      <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>

      <Callout type="info" title="PDF tenant name">
        PDF headers display the organisation name from <code>server.tenant_name</code> in{" "}
        <code>config.yaml</code>. Set this to your legal entity name before generating official
        compliance documents.
      </Callout>

      <h2 id="gdpr-rights-guide">GDPR Subject Rights Workflow</h2>
      <p>
        Veylant IA provides endpoints for responding to GDPR Art. 15 (access) and Art. 17
        (erasure) requests. Implement the following workflow for data subject requests:
      </p>
      <CodeBlock
        language="bash"
        code={`# 1. Receive a subject access request (Art. 15)
#    Identify the user by email, look up their user_id
USER_ID=$(curl -s "http://localhost:8090/v1/admin/users?email=john@acme.com" \\
  -H "Authorization: Bearer $TOKEN" | jq -r '.data[0].id')

# 2. Retrieve all their data
curl "http://localhost:8090/v1/admin/compliance/gdpr/access/$USER_ID" \\
  -H "Authorization: Bearer $TOKEN" \\
  --output gdpr_access_response.json

# 3. If erasure requested (Art. 17):
curl -X DELETE "http://localhost:8090/v1/admin/compliance/gdpr/erase/$USER_ID" \\
  -H "Authorization: Bearer $TOKEN" \\
  -H "Content-Type: application/json" \\
  -d '{"reason": "Demande de suppression RGPD Art. 17 reçue le 2026-03-12"}'`}
      />

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