'use client'

import { useState } from 'react'
import type { TabId } from '../types'

interface CreateModalProps {
  type: TabId
  tenantId: string
  onClose: () => void
  onSave: (data: any) => void
}

function getTitle(type: TabId): string {
  switch (type) {
    case 'tenants': return 'Neuer Mandant'
    case 'namespaces': return 'Neuer Namespace'
    case 'roles': return 'Neue Rolle'
    case 'users': return 'Rolle zuweisen'
    case 'policies': return 'Neue LLM-Policy'
  }
}

function TenantForm({ formData, setFormData }: { formData: any; setFormData: (d: any) => void }) {
  return (
    <>
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
        <input
          type="text"
          required
          value={formData.name || ''}
          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
        />
      </div>
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-1">Slug</label>
        <input
          type="text"
          required
          value={formData.slug || ''}
          onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
        />
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Max Users</label>
          <input
            type="number"
            value={formData.max_users || 100}
            onChange={(e) => setFormData({ ...formData, max_users: parseInt(e.target.value) })}
            className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">LLM Quota/Monat</label>
          <input
            type="number"
            value={formData.llm_quota_monthly || 10000}
            onChange={(e) => setFormData({ ...formData, llm_quota_monthly: parseInt(e.target.value) })}
            className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
          />
        </div>
      </div>
    </>
  )
}

function NamespaceForm({ formData, setFormData }: { formData: any; setFormData: (d: any) => void }) {
  return (
    <>
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
        <input
          type="text"
          required
          value={formData.name || ''}
          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
        />
      </div>
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-1">Slug</label>
        <input
          type="text"
          required
          value={formData.slug || ''}
          onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
        />
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Isolation Level</label>
          <select
            value={formData.isolation_level || 'strict'}
            onChange={(e) => setFormData({ ...formData, isolation_level: e.target.value })}
            className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
          >
            <option value="strict">Strict</option>
            <option value="standard">Standard</option>
            <option value="relaxed">Relaxed</option>
          </select>
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Daten-Klassifizierung</label>
          <select
            value={formData.data_classification || 'internal'}
            onChange={(e) => setFormData({ ...formData, data_classification: e.target.value })}
            className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
          >
            <option value="public">Public</option>
            <option value="internal">Internal</option>
            <option value="confidential">Confidential</option>
            <option value="restricted">Restricted</option>
          </select>
        </div>
      </div>
    </>
  )
}

function RoleForm({ formData, setFormData }: { formData: any; setFormData: (d: any) => void }) {
  return (
    <>
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
        <input
          type="text"
          required
          value={formData.name || ''}
          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
        />
      </div>
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-1">Beschreibung</label>
        <textarea
          value={formData.description || ''}
          onChange={(e) => setFormData({ ...formData, description: e.target.value })}
          rows={2}
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
        />
      </div>
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-1">Permissions (komma-separiert)</label>
        <input
          type="text"
          value={formData.permissions?.join(', ') || ''}
          onChange={(e) => setFormData({ ...formData, permissions: e.target.value.split(',').map((s: string) => s.trim()) })}
          placeholder="compliance:read, llm:query"
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
        />
      </div>
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-1">Hierarchie-Level (niedriger = hoeher)</label>
        <input
          type="number"
          value={formData.hierarchy_level || 100}
          onChange={(e) => setFormData({ ...formData, hierarchy_level: parseInt(e.target.value) })}
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
        />
      </div>
    </>
  )
}

function PolicyForm({ formData, setFormData }: { formData: any; setFormData: (d: any) => void }) {
  return (
    <>
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-1">Name</label>
        <input
          type="text"
          required
          value={formData.name || ''}
          onChange={(e) => setFormData({ ...formData, name: e.target.value })}
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
        />
      </div>
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-1">Erlaubte Daten-Kategorien</label>
        <input
          type="text"
          value={formData.allowed_data_categories?.join(', ') || ''}
          onChange={(e) => setFormData({ ...formData, allowed_data_categories: e.target.value.split(',').map((s: string) => s.trim()) })}
          placeholder="salary, compensation, finance"
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
        />
      </div>
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-1">Blockierte Daten-Kategorien</label>
        <input
          type="text"
          value={formData.blocked_data_categories?.join(', ') || ''}
          onChange={(e) => setFormData({ ...formData, blocked_data_categories: e.target.value.split(',').map((s: string) => s.trim()) })}
          placeholder="health, personal, salary"
          className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
        />
      </div>
      <div className="flex items-center gap-4">
        <label className="flex items-center gap-2">
          <input
            type="checkbox"
            checked={formData.require_pii_redaction ?? true}
            onChange={(e) => setFormData({ ...formData, require_pii_redaction: e.target.checked })}
            className="rounded border-slate-300"
          />
          <span className="text-sm text-slate-700">PII-Redaktion erforderlich</span>
        </label>
        {formData.require_pii_redaction && (
          <select
            value={formData.pii_redaction_level || 'strict'}
            onChange={(e) => setFormData({ ...formData, pii_redaction_level: e.target.value })}
            className="px-3 py-1 border rounded-lg text-sm"
          >
            <option value="strict">Strict</option>
            <option value="moderate">Moderate</option>
            <option value="minimal">Minimal</option>
          </select>
        )}
      </div>
      <div className="grid grid-cols-2 gap-4">
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Max Tokens/Request</label>
          <input
            type="number"
            value={formData.max_tokens_per_request || 4000}
            onChange={(e) => setFormData({ ...formData, max_tokens_per_request: parseInt(e.target.value) })}
            className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
          />
        </div>
        <div>
          <label className="block text-sm font-medium text-slate-700 mb-1">Max Requests/Tag</label>
          <input
            type="number"
            value={formData.max_requests_per_day || 1000}
            onChange={(e) => setFormData({ ...formData, max_requests_per_day: parseInt(e.target.value) })}
            className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500"
          />
        </div>
      </div>
    </>
  )
}

export function CreateModal({ type, tenantId, onClose, onSave }: CreateModalProps) {
  const [formData, setFormData] = useState<any>({})

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    onSave(formData)
  }

  const renderForm = () => {
    switch (type) {
      case 'tenants':
        return <TenantForm formData={formData} setFormData={setFormData} />
      case 'namespaces':
        return <NamespaceForm formData={formData} setFormData={setFormData} />
      case 'roles':
        return <RoleForm formData={formData} setFormData={setFormData} />
      case 'policies':
        return <PolicyForm formData={formData} setFormData={setFormData} />
      default:
        return <p>Nicht unterstuetzt</p>
    }
  }

  return (
    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-xl shadow-xl w-full max-w-lg">
        <div className="p-6 border-b">
          <h3 className="text-lg font-semibold text-slate-900">{getTitle(type)}</h3>
        </div>

        <form onSubmit={handleSubmit}>
          <div className="p-6 space-y-4">
            {renderForm()}
          </div>

          <div className="p-6 border-t bg-slate-50 flex justify-end gap-3">
            <button
              type="button"
              onClick={onClose}
              className="px-4 py-2 text-slate-600 hover:text-slate-800"
            >
              Abbrechen
            </button>
            <button
              type="submit"
              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700"
            >
              Erstellen
            </button>
          </div>
        </form>
      </div>
    </div>
  )
}