import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import {
  fetchAIRegistry,
  fetchDPIATemplate,
  fetchIncidents,
  createIncident,
  updateIncident,
  fetchRetentionPolicies,
  updateRetentionPolicy,
  type AIRegistryEntry,
  type ComplianceIncident,
  type RetentionPolicyEntry,
  type IncidentCreate,
} from '../api/compliance';

type SubTab = 'registry' | 'incidents' | 'retention';

export function ComplianceTab() {
  const { t } = useTranslation();
  const [subTab, setSubTab] = useState<SubTab>('registry');

  const subTabs: { key: SubTab; label: string }[] = [
    { key: 'registry', label: t('compliance.aiRegistry', 'AI-Register') },
    { key: 'incidents', label: t('compliance.incidents', 'Vorfälle') },
    { key: 'retention', label: t('compliance.retention', 'Aufbewahrung') },
  ];

  return (
    <div data-testid="compliance-tab" className="space-y-4">
      <div className="border-b border-secondary-200 mb-4">
        <nav className="flex gap-1" role="tablist">
          {subTabs.map((tab) => (
            <button
              key={tab.key}
              onClick={() => setSubTab(tab.key)}
              className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
                subTab === tab.key
                  ? 'border-primary-600 text-primary-600'
                  : 'border-transparent text-secondary-500 hover:text-secondary-700 hover:border-secondary-300'
              }`}
              role="tab"
              aria-selected={subTab === tab.key}
              aria-label={tab.label}
            >
              {tab.label}
            </button>
          ))}
        </nav>
      </div>

      {subTab === 'registry' && <AIRegistryPanel />}
      {subTab === 'incidents' && <IncidentsPanel />}
      {subTab === 'retention' && <RetentionPanel />}
    </div>
  );
}

// ─── AI Registry Panel ───

function AIRegistryPanel() {
  const { t } = useTranslation();
  const { data, isLoading, error } = useQuery({
    queryKey: ['compliance', 'ai-registry'],
    queryFn: fetchAIRegistry,
  });

  const handleDPIAExport = async (agentId: string, agentName: string) => {
    try {
      const template = await fetchDPIATemplate(agentId);
      const blob = new Blob([JSON.stringify(template, null, 2)], {
        type: 'application/json',
      });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `dpia_${agentName.replace(/\s+/g, '_').toLowerCase()}.json`;
      a.click();
      URL.revokeObjectURL(url);
    } catch {
      // Error handled by query client
    }
  };

  if (isLoading) {
    return <p className="text-secondary-500" aria-live="polite">{t('common.loading', 'Laden...')}</p>;
  }
  if (error) {
    return <p className="text-red-600" aria-live="polite">{t('common.error', 'Fehler beim Laden')}</p>;
  }
  if (!data || data.items.length === 0) {
    return <p className="text-secondary-500">{t('compliance.noAgents', 'Keine AI-Agenten gefunden')}</p>;
  }

  return (
    <div className="overflow-x-auto">
      <table className="min-w-full divide-y divide-secondary-200" role="table">
        <thead className="bg-secondary-50">
          <tr>
            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.name', 'Name')}</th>
            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.intendedPurpose', 'Zweck')}</th>
            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.owner', 'Verantwortlich')}</th>
            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.riskClass', 'Risiko')}</th>
            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.oversight', 'Oversight')}</th>
            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.dataCategories', 'Daten')}</th>
            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.status', 'Status')}</th>
            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.actions', 'Aktionen')}</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-secondary-100">
          {data.items.map((entry: AIRegistryEntry) => {
            const meta = entry.ai_use_case_metadata as Record<string, unknown>;
            return (
              <tr key={entry.agent_id} className="hover:bg-secondary-50">
                <td className="px-4 py-2 text-sm text-secondary-900">{entry.name}</td>
                <td className="px-4 py-2 text-sm text-secondary-600">{String(meta.intended_purpose || '')}</td>
                <td className="px-4 py-2 text-sm text-secondary-600">{String(meta.owner || '')}</td>
                <td className="px-4 py-2 text-sm">
                  <span className={`inline-flex px-2 py-0.5 rounded text-xs font-medium ${
                    meta.risk_class === 'high' ? 'bg-red-100 text-red-700' :
                    meta.risk_class === 'medium' ? 'bg-yellow-100 text-yellow-700' :
                    'bg-green-100 text-green-700'
                  }`}>
                    {String(meta.risk_class || 'low')}
                  </span>
                </td>
                <td className="px-4 py-2 text-sm text-secondary-600">{String(meta.oversight_policy || '')}</td>
                <td className="px-4 py-2 text-sm text-secondary-600">
                  {Array.isArray(meta.data_categories) ? (meta.data_categories as string[]).join(', ') : ''}
                </td>
                <td className="px-4 py-2 text-sm">
                  <span className={`inline-flex px-2 py-0.5 rounded text-xs font-medium ${
                    entry.is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'
                  }`}>
                    {entry.is_active ? t('compliance.active', 'Aktiv') : t('compliance.inactive', 'Inaktiv')}
                  </span>
                </td>
                <td className="px-4 py-2 text-sm">
                  <button
                    onClick={() => handleDPIAExport(entry.agent_id, entry.name)}
                    className="text-primary-600 hover:text-primary-700 text-xs font-medium"
                    aria-label={`${t('compliance.dpiaExport', 'DPIA Export')} ${entry.name}`}
                  >
                    {t('compliance.dpiaExport', 'DPIA Export')}
                  </button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
      {data.items.some((e) => e.validation_warnings.length > 0) && (
        <div className="mt-4 p-3 bg-yellow-50 border border-yellow-200 rounded text-sm text-yellow-800">
          {t('compliance.warningsNote', 'Einige Agenten haben Validierungswarnungen. Siehe Details im AI-Register.')}
        </div>
      )}
    </div>
  );
}

// ─── Incidents Panel ───

function IncidentsPanel() {
  const { t } = useTranslation();
  const queryClient = useQueryClient();
  const [showForm, setShowForm] = useState(false);
  const [formData, setFormData] = useState<IncidentCreate>({
    incident_type: 'ai',
    title: '',
    description: '',
    provider: '',
    measures_taken: '',
    status: 'open',
  });

  const { data, isLoading, error } = useQuery({
    queryKey: ['compliance', 'incidents'],
    queryFn: () => fetchIncidents(),
  });

  const createMutation = useMutation({
    mutationFn: (data: IncidentCreate) => createIncident(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['compliance', 'incidents'] });
      setShowForm(false);
      setFormData({ incident_type: 'ai', title: '', description: '', provider: '', measures_taken: '', status: 'open' });
    },
  });

  const updateMutation = useMutation({
    mutationFn: ({ id, data }: { id: string; data: { status?: string } }) =>
      updateIncident(id, data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['compliance', 'incidents'] });
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    createMutation.mutate(formData);
  };

  if (isLoading) {
    return <p className="text-secondary-500" aria-live="polite">{t('common.loading', 'Laden...')}</p>;
  }
  if (error) {
    return <p className="text-red-600" aria-live="polite">{t('common.error', 'Fehler beim Laden')}</p>;
  }

  return (
    <div className="space-y-4">
      <button
        onClick={() => setShowForm(!showForm)}
        className="px-4 py-2 bg-primary-600 text-white rounded text-sm font-medium hover:bg-primary-700"
        aria-label={t('compliance.createIncident', 'Vorfall erstellen')}
      >
        {showForm ? t('common.cancel', 'Abbrechen') : t('compliance.createIncident', 'Vorfall erstellen')}
      </button>

      {showForm && (
        <form onSubmit={handleSubmit} className="space-y-3 p-4 border border-secondary-200 rounded">
          <div>
            <label className="block text-sm font-medium text-secondary-700 mb-1" htmlFor="incident-type">
              {t('compliance.incidentType', 'Typ')}
            </label>
            <select
              id="incident-type"
              value={formData.incident_type}
              onChange={(e) => setFormData({ ...formData, incident_type: e.target.value })}
              className="w-full px-3 py-2 border border-secondary-300 rounded text-sm"
              aria-label={t('compliance.incidentType', 'Typ')}
            >
              <option value="ai">AI</option>
              <option value="privacy">Privacy</option>
              <option value="security">Security</option>
            </select>
          </div>
          <div>
            <label className="block text-sm font-medium text-secondary-700 mb-1" htmlFor="incident-title">
              {t('compliance.title', 'Titel')} *
            </label>
            <input
              id="incident-title"
              type="text"
              required
              value={formData.title}
              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
              className="w-full px-3 py-2 border border-secondary-300 rounded text-sm"
              aria-label={t('compliance.title', 'Titel')}
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-secondary-700 mb-1" htmlFor="incident-description">
              {t('compliance.description', 'Beschreibung')}
            </label>
            <textarea
              id="incident-description"
              value={formData.description}
              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
              className="w-full px-3 py-2 border border-secondary-300 rounded text-sm"
              rows={3}
              aria-label={t('compliance.description', 'Beschreibung')}
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-secondary-700 mb-1" htmlFor="incident-provider">
              {t('compliance.provider', 'Provider')}
            </label>
            <input
              id="incident-provider"
              type="text"
              value={formData.provider}
              onChange={(e) => setFormData({ ...formData, provider: e.target.value })}
              className="w-full px-3 py-2 border border-secondary-300 rounded text-sm"
              aria-label={t('compliance.provider', 'Provider')}
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-secondary-700 mb-1" htmlFor="incident-measures">
              {t('compliance.measures', 'Maßnahmen')}
            </label>
            <textarea
              id="incident-measures"
              value={formData.measures_taken}
              onChange={(e) => setFormData({ ...formData, measures_taken: e.target.value })}
              className="w-full px-3 py-2 border border-secondary-300 rounded text-sm"
              rows={2}
              aria-label={t('compliance.measures', 'Maßnahmen')}
            />
          </div>
          {createMutation.isError && (
            <p className="text-red-600 text-sm" role="alert">{t('compliance.createError', 'Fehler beim Erstellen')}</p>
          )}
          <button
            type="submit"
            disabled={createMutation.isPending}
            className="px-4 py-2 bg-primary-600 text-white rounded text-sm font-medium hover:bg-primary-700 disabled:opacity-50"
            aria-label={t('common.save', 'Speichern')}
          >
            {createMutation.isPending ? t('common.saving', 'Speichern...') : t('common.save', 'Speichern')}
          </button>
        </form>
      )}

      {!data || data.items.length === 0 ? (
        <p className="text-secondary-500">{t('compliance.noIncidents', 'Keine Vorfälle erfasst')}</p>
      ) : (
        <div className="overflow-x-auto">
          <table className="min-w-full divide-y divide-secondary-200" role="table">
            <thead className="bg-secondary-50">
              <tr>
                <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.title', 'Titel')}</th>
                <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.incidentType', 'Typ')}</th>
                <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.status', 'Status')}</th>
                <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.provider', 'Provider')}</th>
                <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.createdAt', 'Erstellt')}</th>
                <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.actions', 'Aktionen')}</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-secondary-100">
              {data.items.map((incident: ComplianceIncident) => (
                <tr key={incident.id} className="hover:bg-secondary-50">
                  <td className="px-4 py-2 text-sm text-secondary-900">{incident.title}</td>
                  <td className="px-4 py-2 text-sm text-secondary-600">{incident.incident_type}</td>
                  <td className="px-4 py-2 text-sm">
                    <span className={`inline-flex px-2 py-0.5 rounded text-xs font-medium ${
                      incident.status === 'open' ? 'bg-red-100 text-red-700' :
                      incident.status === 'resolved' ? 'bg-green-100 text-green-700' :
                      'bg-gray-100 text-gray-600'
                    }`}>
                      {incident.status}
                    </span>
                  </td>
                  <td className="px-4 py-2 text-sm text-secondary-600">{incident.provider}</td>
                  <td className="px-4 py-2 text-sm text-secondary-600">{incident.created_at || ''}</td>
                  <td className="px-4 py-2 text-sm">
                    {incident.status === 'open' && (
                      <button
                        onClick={() => updateMutation.mutate({ id: incident.id, data: { status: 'resolved' } })}
                        className="text-primary-600 hover:text-primary-700 text-xs font-medium"
                        aria-label={`${t('compliance.resolve', 'Auflösen')} ${incident.title}`}
                      >
                        {t('compliance.resolve', 'Auflösen')}
                      </button>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}

// ─── Retention Policies Panel ───

function RetentionPanel() {
  const { t } = useTranslation();
  const queryClient = useQueryClient();
  const [editingKey, setEditingKey] = useState<string | null>(null);
  const [editDays, setEditDays] = useState<number>(0);

  const { data, isLoading, error } = useQuery({
    queryKey: ['compliance', 'retention-policies'],
    queryFn: fetchRetentionPolicies,
  });

  const updateMutation = useMutation({
    mutationFn: ({ key, days }: { key: string; days: number }) =>
      updateRetentionPolicy(key, days),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['compliance', 'retention-policies'] });
      setEditingKey(null);
    },
  });

  if (isLoading) {
    return <p className="text-secondary-500" aria-live="polite">{t('common.loading', 'Laden...')}</p>;
  }
  if (error) {
    return <p className="text-red-600" aria-live="polite">{t('common.error', 'Fehler beim Laden')}</p>;
  }
  if (!data || data.items.length === 0) {
    return <p className="text-secondary-500">{t('compliance.noPolicies', 'Keine Aufbewahrungsrichtlinien')}</p>;
  }

  return (
    <div className="overflow-x-auto">
      <table className="min-w-full divide-y divide-secondary-200" role="table">
        <thead className="bg-secondary-50">
          <tr>
            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.policy', 'Richtlinie')}</th>
            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.description', 'Beschreibung')}</th>
            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.defaultDays', 'Standard (Tage)')}</th>
            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.currentDays', 'Aktuell (Tage)')}</th>
            <th className="px-4 py-2 text-left text-xs font-medium text-secondary-500 uppercase">{t('compliance.actions', 'Aktionen')}</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-secondary-100">
          {data.items.map((policy: RetentionPolicyEntry) => (
            <tr key={policy.key} className="hover:bg-secondary-50">
              <td className="px-4 py-2 text-sm font-medium text-secondary-900">{policy.label}</td>
              <td className="px-4 py-2 text-sm text-secondary-600">{policy.description}</td>
              <td className="px-4 py-2 text-sm text-secondary-600">{policy.default_days}</td>
              <td className="px-4 py-2 text-sm text-secondary-900">
                {editingKey === policy.key ? (
                  <input
                    type="number"
                    min={1}
                    max={3650}
                    value={editDays}
                    onChange={(e) => setEditDays(parseInt(e.target.value, 10) || 1)}
                    className="w-20 px-2 py-1 border border-secondary-300 rounded text-sm"
                    aria-label={t('compliance.days', 'Tage')}
                  />
                ) : (
                  policy.current_days
                )}
              </td>
              <td className="px-4 py-2 text-sm">
                {editingKey === policy.key ? (
                  <div className="flex gap-2">
                    <button
                      onClick={() => updateMutation.mutate({ key: policy.key, days: editDays })}
                      disabled={updateMutation.isPending}
                      className="text-green-600 hover:text-green-700 text-xs font-medium disabled:opacity-50"
                      aria-label={t('common.save', 'Speichern')}
                    >
                      {updateMutation.isPending ? t('common.saving', '...') : t('common.save', 'Speichern')}
                    </button>
                    <button
                      onClick={() => setEditingKey(null)}
                      className="text-secondary-500 hover:text-secondary-700 text-xs font-medium"
                      aria-label={t('common.cancel', 'Abbrechen')}
                    >
                      {t('common.cancel', 'Abbrechen')}
                    </button>
                  </div>
                ) : (
                  policy.editable && (
                    <button
                      onClick={() => {
                        setEditingKey(policy.key);
                        setEditDays(policy.current_days);
                      }}
                      className="text-primary-600 hover:text-primary-700 text-xs font-medium"
                      aria-label={`${t('common.edit', 'Bearbeiten')} ${policy.label}`}
                    >
                      {t('common.edit', 'Bearbeiten')}
                    </button>
                  )
                )}
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}