import { CodeBlock } from "../components/CodeBlock";
import { Callout } from "../components/Callout";
import { ApiEndpoint } from "../components/ApiEndpoint";
import { ParamTable } from "../components/ParamTable";

export function PiiAnalysisPage() {
  return (
    <div>
      <h1 id="pii-analysis">PII Analysis</h1>
      <p>
        Analyze text for PII on demand. This endpoint exposes the same 3-layer detection pipeline
        used internally for prompt anonymization — useful for testing policies, building pre-flight
        checks, or auditing content.
      </p>

      <ApiEndpoint
        method="POST"
        path="/v1/pii/analyze"
        description="Detect and optionally anonymize PII entities in a text string."
      />

      <h2 id="request">Request Body</h2>
      <ParamTable
        params={[
          { name: "text", type: "string", required: true, description: "The text to analyze for PII entities." },
          { name: "anonymize", type: "boolean", required: false, default: "false", description: "If true, return an anonymized version of the text with PII replaced." },
          { name: "store_mapping", type: "boolean", required: false, default: "false", description: "If true and anonymize=true, store the original→synthetic mapping in Redis (AES-256-GCM encrypted, TTL-based). Enables de-pseudonymization." },
          { name: "language", type: "string", required: false, default: "fr", description: "Language hint for NER (fr | en). Affects which spaCy model is used." },
        ]}
      />

      <h2 id="example">Example</h2>
      <CodeBlock
        language="bash"
        code={`curl http://localhost:8090/v1/pii/analyze \\
  -H "Authorization: Bearer $TOKEN" \\
  -H "Content-Type: application/json" \\
  -d '{
    "text": "Call John Smith at +33 6 12 34 56 78 or john.smith@acme.com. His IBAN is FR76 3000 6000 0112 3456 7890 189.",
    "anonymize": true
  }'`}
      />

      <h2 id="response">Response</h2>
      <CodeBlock
        language="json"
        code={`{
  "entities": [
    {
      "type": "PERSON",
      "text": "John Smith",
      "start": 5,
      "end": 15,
      "score": 0.98,
      "layer": "ner"
    },
    {
      "type": "PHONE_NUMBER",
      "text": "+33 6 12 34 56 78",
      "start": 19,
      "end": 37,
      "score": 1.0,
      "layer": "regex"
    },
    {
      "type": "EMAIL_ADDRESS",
      "text": "john.smith@acme.com",
      "start": 41,
      "end": 60,
      "score": 1.0,
      "layer": "regex"
    },
    {
      "type": "IBAN_CODE",
      "text": "FR76 3000 6000 0112 3456 7890 189",
      "start": 73,
      "end": 106,
      "score": 1.0,
      "layer": "regex"
    }
  ],
  "anonymized_text": "Call [PERSON] at [PHONE_NUMBER] or [EMAIL_ADDRESS]. His IBAN is [IBAN_CODE].",
  "entity_count": 4,
  "latency_ms": 23
}`}
      />

      <h2 id="entity-types">Supported Entity Types</h2>
      <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">Type</th>
              <th className="text-left px-4 py-2.5 font-semibold">Layer</th>
              <th className="text-left px-4 py-2.5 font-semibold">Examples</th>
            </tr>
          </thead>
          <tbody>
            {[
              { type: "EMAIL_ADDRESS", layer: "regex", ex: "user@example.com" },
              { type: "PHONE_NUMBER", layer: "regex", ex: "+33 6 12 34 56 78, 06.12.34.56.78" },
              { type: "IBAN_CODE", layer: "regex", ex: "FR76 3000 6000 0112 3456 7890 189" },
              { type: "CREDIT_CARD", layer: "regex", ex: "4532 1234 5678 9012" },
              { type: "SSN", layer: "regex", ex: "1 85 12 75 108 112 48" },
              { type: "PERSON", layer: "ner", ex: "John Smith, Marie Dupont" },
              { type: "LOCATION", layer: "ner", ex: "Paris, 75001, rue de Rivoli" },
              { type: "ORGANIZATION", layer: "ner", ex: "Acme Corp, Banque de France" },
              { type: "DATE_TIME", layer: "ner", ex: "12/03/1985, le 3 mars" },
              { type: "NRP", layer: "ner", ex: "Nationality, religion, political party" },
            ].map((row) => (
              <tr key={row.type} className="border-b last:border-0">
                <td className="px-4 py-2.5 font-mono text-xs">{row.type}</td>
                <td className="px-4 py-2.5">
                  <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${row.layer === "regex" ? "bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300" : "bg-purple-100 dark:bg-purple-900/40 text-purple-700 dark:text-purple-300"}`}>
                    {row.layer}
                  </span>
                </td>
                <td className="px-4 py-2.5 text-muted-foreground text-xs">{row.ex}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <h2 id="playground">Interactive Playground</h2>
      <Callout type="tip" title="Public playground">
        Try PII detection without authentication at{" "}
        <a href="http://localhost:8090/playground" target="_blank" rel="noopener noreferrer">
          http://localhost:8090/playground
        </a>
        . The playground endpoint (<code>POST /playground/analyze</code>) is IP-rate-limited to
        20 requests/minute and requires no Bearer token.
      </Callout>
    </div>
  );
}
