'use client'

import type { MiddlewareHookReturn } from './types'

interface SecurityTabProps {
  hook: MiddlewareHookReturn
}

export default function SecurityTab({ hook }: SecurityTabProps) {
  return (
    <div className="space-y-6">
      <div className="bg-white rounded-lg shadow p-6">
        <h3 className="text-lg font-medium mb-4">Security Headers Configuration</h3>
        {(() => {
          const config = hook.getConfig('security_headers')
          if (!config) return <p>Loading...</p>
          return (
            <div className="space-y-4">
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium">HSTS (Strict-Transport-Security)</p>
                  <p className="text-sm text-gray-500">Force HTTPS connections</p>
                </div>
                <input
                  type="checkbox"
                  checked={config.config.hsts_enabled ?? true}
                  onChange={(e) => {
                    const newConfig = { ...config.config, hsts_enabled: e.target.checked }
                    hook.updateConfig('security_headers', newConfig)
                  }}
                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="font-medium">CSP (Content-Security-Policy)</p>
                  <p className="text-sm text-gray-500">Control resource loading</p>
                </div>
                <input
                  type="checkbox"
                  checked={config.config.csp_enabled ?? true}
                  onChange={(e) => {
                    const newConfig = { ...config.config, csp_enabled: e.target.checked }
                    hook.updateConfig('security_headers', newConfig)
                  }}
                  className="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
                />
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">CSP Policy</label>
                <textarea
                  value={config.config.csp_policy || "default-src 'self'"}
                  onChange={(e) => {
                    const newConfig = { ...config.config, csp_policy: e.target.value }
                    hook.updateConfig('security_headers', newConfig)
                  }}
                  rows={3}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 font-mono text-sm"
                />
              </div>
            </div>
          )
        })()}
      </div>

      <div className="bg-white rounded-lg shadow p-6">
        <h3 className="text-lg font-medium mb-4">Input Gate Configuration</h3>
        {(() => {
          const config = hook.getConfig('input_gate')
          if (!config) return <p>Loading...</p>
          return (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium text-gray-700">Max Body Size (bytes)</label>
                <input
                  type="number"
                  value={config.config.max_body_size || 10485760}
                  onChange={(e) => {
                    const newConfig = { ...config.config, max_body_size: parseInt(e.target.value) }
                    hook.updateConfig('input_gate', newConfig)
                  }}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                />
                <p className="text-xs text-gray-500 mt-1">
                  {((config.config.max_body_size || 10485760) / 1024 / 1024).toFixed(1)} MB
                </p>
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700">Max File Size (bytes)</label>
                <input
                  type="number"
                  value={config.config.max_file_size || 52428800}
                  onChange={(e) => {
                    const newConfig = { ...config.config, max_file_size: parseInt(e.target.value) }
                    hook.updateConfig('input_gate', newConfig)
                  }}
                  className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                />
                <p className="text-xs text-gray-500 mt-1">
                  {((config.config.max_file_size || 52428800) / 1024 / 1024).toFixed(1)} MB
                </p>
              </div>
            </div>
          )
        })()}
      </div>
    </div>
  )
}