import { DevPortalLayout, CodeBlock, InfoBox } from '@/components/developers/DevPortalLayout'

export default function Phase2GuidePage() {
  return (
    <DevPortalLayout
      title="Phase 2: Dokumentation Guide"
      description="Schritt-fuer-Schritt durch die Dokumentations-Phase"
    >
      <h2>Uebersicht Phase 2</h2>
      <p>
        Phase 2 generiert alle erforderlichen Compliance-Dokumente basierend
        auf dem Assessment aus Phase 1. Die Dokumente koennen exportiert und
        fuer Audits verwendet werden.
      </p>

      <div className="my-6 p-4 bg-green-50 border border-green-200 rounded-xl">
        <h3 className="text-lg font-semibold text-green-900 mb-2">Phase 2 Schritte</h3>
        <ol className="list-decimal list-inside text-green-800 space-y-1">
          <li>AI Act Klassifizierung</li>
          <li>Pflichtenuebersicht</li>
          <li>DSFA (Datenschutz-Folgenabschaetzung)</li>
          <li>TOMs (Technische/Organisatorische Massnahmen)</li>
          <li>Loeschfristen</li>
          <li>VVT (Verarbeitungsverzeichnis)</li>
          <li>Rechtliche Vorlagen</li>
          <li>Cookie Banner</li>
          <li>Einwilligungen</li>
          <li>DSR Portal</li>
          <li>Escalations</li>
        </ol>
      </div>

      <h2>Schritt 9: AI Act Klassifizierung</h2>
      <p>
        Klassifizieren Sie jeden Use Case nach dem EU AI Act Risikosystem.
      </p>

      <div className="my-4 overflow-x-auto not-prose">
        <table className="min-w-full divide-y divide-gray-200">
          <thead className="bg-gray-50">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Risikostufe</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Beschreibung</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Pflichten</th>
            </tr>
          </thead>
          <tbody className="bg-white divide-y divide-gray-200 text-sm">
            <tr>
              <td className="px-4 py-3 font-medium text-red-600">Verboten</td>
              <td className="px-4 py-3 text-gray-600">Social Scoring, Manipulative KI</td>
              <td className="px-4 py-3 text-gray-600">Nicht zulaessig</td>
            </tr>
            <tr>
              <td className="px-4 py-3 font-medium text-orange-600">Hochrisiko</td>
              <td className="px-4 py-3 text-gray-600">Biometrie, Medizin, kritische Infrastruktur</td>
              <td className="px-4 py-3 text-gray-600">Umfangreiche Dokumentation, Konformitaetsbewertung</td>
            </tr>
            <tr>
              <td className="px-4 py-3 font-medium text-yellow-600">Begrenzt</td>
              <td className="px-4 py-3 text-gray-600">Chatbots, Empfehlungssysteme</td>
              <td className="px-4 py-3 text-gray-600">Transparenzpflichten</td>
            </tr>
            <tr>
              <td className="px-4 py-3 font-medium text-green-600">Minimal</td>
              <td className="px-4 py-3 text-gray-600">Spam-Filter, Spiele</td>
              <td className="px-4 py-3 text-gray-600">Freiwillige Verhaltenskodizes</td>
            </tr>
          </tbody>
        </table>
      </div>

      <CodeBlock language="typescript" filename="ai-act-classification.tsx">
{`import { useSDK } from '@breakpilot/compliance-sdk'
import type { AIActRiskCategory } from '@breakpilot/compliance-sdk'

function AIActClassification() {
  const { state, dispatch } = useSDK()

  const classifyUseCase = (useCaseId: string, classification: AIActRiskCategory) => {
    dispatch({
      type: 'UPDATE_USE_CASE',
      payload: {
        id: useCaseId,
        assessmentResult: {
          ...state.useCases.find(uc => uc.id === useCaseId)?.assessmentResult,
          aiActClassification: classification,
        },
      },
    })

    // Wenn Hochrisiko, zusaetzliche Pflichten aktivieren
    if (classification === 'HIGH_RISK') {
      dispatch({
        type: 'SET_AI_ACT_RESULT',
        payload: {
          classification,
          conformityRequired: true,
          documentationRequired: true,
          humanOversightRequired: true,
        },
      })
    }
  }

  return (
    <div>
      {state.useCases.map(uc => (
        <div key={uc.id}>
          <h3>{uc.name}</h3>
          <select
            value={uc.assessmentResult?.aiActClassification || ''}
            onChange={(e) => classifyUseCase(uc.id, e.target.value as AIActRiskCategory)}
          >
            <option value="">Bitte waehlen...</option>
            <option value="PROHIBITED">Verboten</option>
            <option value="HIGH_RISK">Hochrisiko</option>
            <option value="LIMITED">Begrenzt</option>
            <option value="MINIMAL">Minimal</option>
          </select>
        </div>
      ))}
    </div>
  )
}`}
      </CodeBlock>

      <h2>Schritt 10: Pflichtenuebersicht</h2>
      <p>
        Basierend auf der Klassifizierung werden alle anwendbaren Pflichten angezeigt.
      </p>

      <h2>Schritt 11: DSFA</h2>
      <p>
        Die Datenschutz-Folgenabschaetzung wird automatisch generiert.
      </p>

      <CodeBlock language="typescript" filename="dsfa.tsx">
{`import { useSDK, getSDKBackendClient } from '@breakpilot/compliance-sdk'

function DSFAGeneration() {
  const { state, dispatch } = useSDK()
  const [generating, setGenerating] = useState(false)

  const generateDSFA = async () => {
    setGenerating(true)

    const client = getSDKBackendClient()
    const dsfa = await client.generateDSFA({
      useCases: state.useCases,
      risks: state.risks,
      controls: state.controls,
    })

    dispatch({
      type: 'SET_DSFA',
      payload: dsfa,
    })

    setGenerating(false)
  }

  // DSFA nur anzeigen wenn erforderlich
  const dsfaRequired = state.useCases.some(
    uc => uc.assessmentResult?.dsfaRequired
  )

  if (!dsfaRequired) {
    return <p>Keine DSFA erforderlich fuer die aktuellen Use Cases.</p>
  }

  return (
    <div>
      {state.dsfa ? (
        <div>
          <h3>DSFA generiert</h3>
          <p>Status: {state.dsfa.status}</p>
          <p>Gesamtrisiko: {state.dsfa.conclusion?.overallRisk}</p>

          {/* DSFA-Sektionen anzeigen */}
          {Object.entries(state.dsfa.sections || {}).map(([key, section]) => (
            <div key={key}>
              <h4>{section.title}</h4>
              <p>{section.content}</p>
            </div>
          ))}
        </div>
      ) : (
        <button onClick={generateDSFA} disabled={generating}>
          {generating ? 'Generiere DSFA...' : 'DSFA generieren'}
        </button>
      )}
    </div>
  )
}`}
      </CodeBlock>

      <InfoBox type="info" title="Checkpoint CP-DSFA">
        Wenn eine DSFA erforderlich ist (basierend auf Screening), muss diese
        generiert werden, bevor Sie fortfahren koennen.
      </InfoBox>

      <h2>Schritt 12: TOMs</h2>
      <p>
        Technische und Organisatorische Massnahmen nach Art. 32 DSGVO.
      </p>

      <CodeBlock language="typescript" filename="toms.tsx">
{`import { useSDK, getSDKBackendClient } from '@breakpilot/compliance-sdk'

function TOMsView() {
  const { state, dispatch } = useSDK()

  const generateTOMs = async () => {
    const client = getSDKBackendClient()
    const toms = await client.generateTOM({
      risks: state.risks,
      controls: state.controls,
    })

    dispatch({
      type: 'SET_TOMS',
      payload: toms,
    })
  }

  const tomCategories = [
    { id: 'access_control', label: 'Zugangskontrolle' },
    { id: 'access_rights', label: 'Zugriffskontrolle' },
    { id: 'transfer_control', label: 'Weitergabekontrolle' },
    { id: 'input_control', label: 'Eingabekontrolle' },
    { id: 'availability', label: 'Verfuegbarkeitskontrolle' },
    { id: 'separation', label: 'Trennungsgebot' },
  ]

  return (
    <div>
      <h2>TOMs: {state.toms.length}</h2>

      {tomCategories.map(cat => {
        const tomsInCategory = state.toms.filter(t => t.category === cat.id)
        return (
          <div key={cat.id}>
            <h3>{cat.label} ({tomsInCategory.length})</h3>
            <ul>
              {tomsInCategory.map(tom => (
                <li key={tom.id}>
                  <strong>{tom.title}</strong>
                  <p>{tom.description}</p>
                  <span>Status: {tom.implementationStatus}</span>
                </li>
              ))}
            </ul>
          </div>
        )
      })}

      <button onClick={generateTOMs}>TOMs generieren</button>
    </div>
  )
}`}
      </CodeBlock>

      <h2>Schritt 13: Loeschfristen</h2>
      <p>
        Definieren Sie Aufbewahrungsfristen fuer verschiedene Datenkategorien.
      </p>

      <h2>Schritt 14: VVT</h2>
      <p>
        Das Verarbeitungsverzeichnis nach Art. 30 DSGVO.
      </p>

      <CodeBlock language="typescript" filename="vvt.tsx">
{`import { useSDK } from '@breakpilot/compliance-sdk'

function VVTView() {
  const { state, dispatch } = useSDK()

  const addProcessingActivity = () => {
    dispatch({
      type: 'ADD_PROCESSING_ACTIVITY',
      payload: {
        id: \`pa-\${Date.now()}\`,
        name: 'Kundendatenverarbeitung',
        purpose: 'Vertragserfuellung',
        legalBasis: 'Art. 6 Abs. 1 lit. b DSGVO',
        dataCategories: ['Kontaktdaten', 'Vertragsdaten'],
        dataSubjects: ['Kunden'],
        recipients: [],
        retentionPeriod: '10 Jahre',
        technicalMeasures: ['Verschluesselung', 'Zugriffskontrolle'],
      },
    })
  }

  return (
    <div>
      <h2>Verarbeitungstaetigkeiten: {state.vvt.length}</h2>

      {state.vvt.map(activity => (
        <div key={activity.id} className="border p-4 rounded mb-4">
          <h3>{activity.name}</h3>
          <p><strong>Zweck:</strong> {activity.purpose}</p>
          <p><strong>Rechtsgrundlage:</strong> {activity.legalBasis}</p>
          <p><strong>Datenkategorien:</strong> {activity.dataCategories.join(', ')}</p>
          <p><strong>Betroffene:</strong> {activity.dataSubjects.join(', ')}</p>
          <p><strong>Loeschfrist:</strong> {activity.retentionPeriod}</p>
        </div>
      ))}

      <button onClick={addProcessingActivity}>
        Verarbeitungstaetigkeit hinzufuegen
      </button>
    </div>
  )
}`}
      </CodeBlock>

      <h2>Schritt 15-19: Weitere Dokumentation</h2>
      <p>
        Die verbleibenden Schritte umfassen:
      </p>
      <ul>
        <li><strong>Rechtliche Vorlagen:</strong> AGB, Datenschutzerklaerung, etc.</li>
        <li><strong>Cookie Banner:</strong> Konfiguration fuer Cookie-Consent</li>
        <li><strong>Einwilligungen:</strong> Consent-Management fuer Betroffene</li>
        <li><strong>DSR Portal:</strong> Data Subject Request Handling</li>
        <li><strong>Escalations:</strong> Eskalationspfade fuer Datenschutzvorfaelle</li>
      </ul>

      <h2>Export der Dokumentation</h2>
      <CodeBlock language="typescript" filename="export-all.tsx">
{`import { useSDK } from '@breakpilot/compliance-sdk'

function ExportAll() {
  const { exportState, completionPercentage } = useSDK()

  const handleExport = async (format: 'pdf' | 'zip' | 'json') => {
    const blob = await exportState(format)

    // Download ausloesen
    const url = URL.createObjectURL(blob)
    const a = document.createElement('a')
    a.href = url
    a.download = \`compliance-export.\${format === 'json' ? 'json' : format}\`
    a.click()
    URL.revokeObjectURL(url)
  }

  return (
    <div>
      <h2>Compliance Fortschritt: {completionPercentage}%</h2>

      <div className="flex gap-4 mt-4">
        <button onClick={() => handleExport('pdf')}>
          PDF Export
        </button>
        <button onClick={() => handleExport('zip')}>
          ZIP Export (alle Dokumente)
        </button>
        <button onClick={() => handleExport('json')}>
          JSON Backup
        </button>
      </div>
    </div>
  )
}`}
      </CodeBlock>

      <InfoBox type="success" title="Workflow abgeschlossen">
        Nach Abschluss aller 19 Schritte haben Sie eine vollstaendige
        Compliance-Dokumentation, die Sie fuer Audits und regulatorische
        Anforderungen verwenden koennen.
      </InfoBox>
    </DevPortalLayout>
  )
}