'use client'

import type { MiddlewareHookReturn } from './types'

interface LoggingTabProps {
  hook: MiddlewareHookReturn
}

export default function LoggingTab({ hook }: LoggingTabProps) {
  return (
    <div className="space-y-6">
      <div className="bg-white rounded-lg shadow p-6">
        <h3 className="text-lg font-medium mb-4">PII Redaction Settings</h3>
        {(() => {
          const config = hook.getConfig('pii_redactor')
          if (!config) return <p>Loading...</p>
          const patterns = config.config.patterns || ['email', 'ip_v4', 'ip_v6', 'phone_de']
          const allPatterns = ['email', 'ip_v4', 'ip_v6', 'phone_de', 'phone_intl', 'iban', 'uuid', 'name_prefix', 'student_id']
          return (
            <div className="space-y-4">
              <p className="text-sm text-gray-500">
                Select which PII patterns to redact from logs (DSGVO compliance)
              </p>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-2">
                {allPatterns.map((pattern) => (
                  <label key={pattern} className="flex items-center space-x-2">
                    <input
                      type="checkbox"
                      checked={patterns.includes(pattern)}
                      onChange={(e) => {
                        const newPatterns = e.target.checked
                          ? [...patterns, pattern]
                          : patterns.filter((p: string) => p !== pattern)
                        hook.updateConfig('pii_redactor', { ...config.config, patterns: newPatterns })
                      }}
                      className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                    />
                    <span className="text-sm">{pattern.replace('_', ' ')}</span>
                  </label>
                ))}
              </div>
            </div>
          )
        })()}
      </div>

      <div className="bg-white rounded-lg shadow p-6">
        <h3 className="text-lg font-medium mb-4">Request-ID Configuration</h3>
        {(() => {
          const config = hook.getConfig('request_id')
          if (!config) return <p>Loading...</p>
          return (
            <div>
              <label className="block text-sm font-medium text-gray-700">Header Name</label>
              <input
                type="text"
                value={config.config.header_name || 'X-Request-ID'}
                onChange={(e) => {
                  hook.updateConfig('request_id', { ...config.config, header_name: e.target.value })
                }}
                className="mt-1 block w-full max-w-xs rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
              />
            </div>
          )
        })()}
      </div>
    </div>
  )
}