'use client'

/**
 * DSR (Data Subject Requests) Admin Page
 *
 * GDPR Article 15-21 Request Management
 */

import AdminLayout from '@/components/admin/AdminLayout'
import { useEffect, useState, useCallback } from 'react'

interface DSRRequest {
  id: string
  request_number: string
  requester_email: string
  requester_name: string
  request_type: string
  status: string
  priority: string
  created_at: string
  deadline: string
  assigned_to?: string
  notes?: string
}

interface DSRStats {
  total: number
  pending: number
  in_progress: number
  completed: number
  overdue: number
}

export default function DSRManagementPage() {
  const [adminToken, setAdminToken] = useState('')
  const [requests, setRequests] = useState<DSRRequest[]>([])
  const [stats, setStats] = useState<DSRStats | null>(null)
  const [loading, setLoading] = useState(false)
  const [selectedRequest, setSelectedRequest] = useState<DSRRequest | null>(null)
  const [filter, setFilter] = useState<string>('all')
  const [error, setError] = useState<string | null>(null)

  const API_BASE = 'http://localhost:8081/api/v1'

  // Load saved token
  useEffect(() => {
    const savedToken = localStorage.getItem('adminToken')
    if (savedToken) {
      setAdminToken(savedToken)
    }
  }, [])

  // Save token
  const saveToken = (token: string) => {
    setAdminToken(token)
    localStorage.setItem('adminToken', token)
  }

  // Fetch DSR requests
  const fetchRequests = useCallback(async () => {
    if (!adminToken) return

    setLoading(true)
    setError(null)

    try {
      const response = await fetch(`${API_BASE}/dsr/requests`, {
        headers: {
          'Authorization': `Bearer ${adminToken}`,
        },
      })

      if (!response.ok) {
        if (response.status === 401) {
          throw new Error('Nicht autorisiert - Token ungültig')
        }
        throw new Error(`HTTP ${response.status}`)
      }

      const data = await response.json()
      setRequests(data.requests || [])

      // Calculate stats
      const allRequests = data.requests || []
      const now = new Date()
      setStats({
        total: allRequests.length,
        pending: allRequests.filter((r: DSRRequest) => r.status === 'pending').length,
        in_progress: allRequests.filter((r: DSRRequest) => r.status === 'in_progress').length,
        completed: allRequests.filter((r: DSRRequest) => r.status === 'completed').length,
        overdue: allRequests.filter((r: DSRRequest) => new Date(r.deadline) < now && r.status !== 'completed').length,
      })
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Fehler beim Laden')
    } finally {
      setLoading(false)
    }
  }, [adminToken])

  useEffect(() => {
    if (adminToken) {
      fetchRequests()
    }
  }, [adminToken, fetchRequests])

  // Get status badge color
  const getStatusColor = (status: string) => {
    switch (status) {
      case 'pending':
        return 'bg-yellow-100 text-yellow-800'
      case 'in_progress':
        return 'bg-blue-100 text-blue-800'
      case 'completed':
        return 'bg-green-100 text-green-800'
      case 'rejected':
        return 'bg-red-100 text-red-800'
      default:
        return 'bg-slate-100 text-slate-800'
    }
  }

  // Get priority badge color
  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case 'urgent':
        return 'bg-red-100 text-red-800'
      case 'high':
        return 'bg-orange-100 text-orange-800'
      case 'normal':
        return 'bg-slate-100 text-slate-800'
      case 'low':
        return 'bg-slate-50 text-slate-600'
      default:
        return 'bg-slate-100 text-slate-800'
    }
  }

  // Get request type label
  const getTypeLabel = (type: string) => {
    const labels: Record<string, string> = {
      'access': 'Auskunft (Art. 15)',
      'rectification': 'Berichtigung (Art. 16)',
      'erasure': 'Löschung (Art. 17)',
      'restriction': 'Einschränkung (Art. 18)',
      'portability': 'Datenübertragbarkeit (Art. 20)',
      'objection': 'Widerspruch (Art. 21)',
    }
    return labels[type] || type
  }

  // Filter requests
  const filteredRequests = requests.filter(r => {
    if (filter === 'all') return true
    if (filter === 'overdue') {
      return new Date(r.deadline) < new Date() && r.status !== 'completed'
    }
    return r.status === filter
  })

  // Format date
  const formatDate = (dateStr: string) => {
    return new Date(dateStr).toLocaleDateString('de-DE', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric',
    })
  }

  // Check if overdue
  const isOverdue = (deadline: string, status: string) => {
    return new Date(deadline) < new Date() && status !== 'completed'
  }

  return (
    <AdminLayout title="Datenschutzanfragen" description="DSGVO Art. 15-21 Anfragen verwalten">
      {/* Token Input */}
      <div className="bg-white rounded-xl border border-slate-200 p-4 mb-6">
        <label className="block text-sm font-medium text-slate-700 mb-2">
          Admin Token
        </label>
        <div className="flex gap-2">
          <input
            type="password"
            value={adminToken}
            onChange={(e) => saveToken(e.target.value)}
            placeholder="JWT Token eingeben..."
            className="flex-1 px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"
          />
          <button
            onClick={fetchRequests}
            disabled={!adminToken || loading}
            className="px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-800 disabled:opacity-50"
          >
            {loading ? 'Laden...' : 'Laden'}
          </button>
        </div>
      </div>

      {/* Error Message */}
      {error && (
        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
          {error}
        </div>
      )}

      {/* Stats */}
      {stats && (
        <div className="grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
          <div className="bg-white rounded-xl border border-slate-200 p-4">
            <div className="text-2xl font-bold text-slate-900">{stats.total}</div>
            <div className="text-sm text-slate-500">Gesamt</div>
          </div>
          <div className="bg-white rounded-xl border border-slate-200 p-4">
            <div className="text-2xl font-bold text-yellow-600">{stats.pending}</div>
            <div className="text-sm text-slate-500">Offen</div>
          </div>
          <div className="bg-white rounded-xl border border-slate-200 p-4">
            <div className="text-2xl font-bold text-blue-600">{stats.in_progress}</div>
            <div className="text-sm text-slate-500">In Bearbeitung</div>
          </div>
          <div className="bg-white rounded-xl border border-slate-200 p-4">
            <div className="text-2xl font-bold text-green-600">{stats.completed}</div>
            <div className="text-sm text-slate-500">Abgeschlossen</div>
          </div>
          <div className="bg-white rounded-xl border border-slate-200 p-4">
            <div className={`text-2xl font-bold ${stats.overdue > 0 ? 'text-red-600' : 'text-slate-400'}`}>
              {stats.overdue}
            </div>
            <div className="text-sm text-slate-500">Überfällig</div>
          </div>
        </div>
      )}

      {/* Filter Tabs */}
      <div className="flex gap-2 mb-4 overflow-x-auto">
        {[
          { value: 'all', label: 'Alle' },
          { value: 'pending', label: 'Offen' },
          { value: 'in_progress', label: 'In Bearbeitung' },
          { value: 'completed', label: 'Abgeschlossen' },
          { value: 'overdue', label: 'Überfällig' },
        ].map((tab) => (
          <button
            key={tab.value}
            onClick={() => setFilter(tab.value)}
            className={`px-4 py-2 rounded-lg text-sm font-medium whitespace-nowrap transition-colors ${
              filter === tab.value
                ? 'bg-slate-900 text-white'
                : 'bg-white text-slate-700 border border-slate-200 hover:bg-slate-50'
            }`}
          >
            {tab.label}
          </button>
        ))}
      </div>

      {/* Requests Table */}
      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <table className="w-full">
          <thead className="bg-slate-50 border-b border-slate-200">
            <tr>
              <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Nr.</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Typ</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Anfragesteller</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Status</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Priorität</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Frist</th>
              <th className="px-4 py-3 text-left text-xs font-medium text-slate-500 uppercase">Aktionen</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-slate-100">
            {filteredRequests.length === 0 ? (
              <tr>
                <td colSpan={7} className="px-4 py-8 text-center text-slate-500">
                  Keine Anfragen gefunden
                </td>
              </tr>
            ) : (
              filteredRequests.map((request) => (
                <tr key={request.id} className={isOverdue(request.deadline, request.status) ? 'bg-red-50' : ''}>
                  <td className="px-4 py-3 text-sm font-mono text-slate-900">{request.request_number}</td>
                  <td className="px-4 py-3 text-sm text-slate-700">{getTypeLabel(request.request_type)}</td>
                  <td className="px-4 py-3">
                    <div className="text-sm text-slate-900">{request.requester_name}</div>
                    <div className="text-xs text-slate-500">{request.requester_email}</div>
                  </td>
                  <td className="px-4 py-3">
                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(request.status)}`}>
                      {request.status}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <span className={`px-2 py-1 rounded-full text-xs font-medium ${getPriorityColor(request.priority)}`}>
                      {request.priority}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <span className={`text-sm ${isOverdue(request.deadline, request.status) ? 'text-red-600 font-medium' : 'text-slate-700'}`}>
                      {formatDate(request.deadline)}
                    </span>
                  </td>
                  <td className="px-4 py-3">
                    <button
                      onClick={() => setSelectedRequest(request)}
                      className="text-primary-600 hover:text-primary-700 text-sm font-medium"
                    >
                      Details
                    </button>
                  </td>
                </tr>
              ))
            )}
          </tbody>
        </table>
      </div>

      {/* Detail Modal */}
      {selectedRequest && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
            <div className="px-6 py-4 border-b border-slate-200 flex items-center justify-between">
              <h3 className="font-semibold text-slate-900">
                Anfrage {selectedRequest.request_number}
              </h3>
              <button
                onClick={() => setSelectedRequest(null)}
                className="text-slate-400 hover:text-slate-600"
              >
                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            <div className="p-6 space-y-4">
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <div className="text-sm text-slate-500">Typ</div>
                  <div className="font-medium text-slate-900">{getTypeLabel(selectedRequest.request_type)}</div>
                </div>
                <div>
                  <div className="text-sm text-slate-500">Status</div>
                  <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(selectedRequest.status)}`}>
                    {selectedRequest.status}
                  </span>
                </div>
                <div>
                  <div className="text-sm text-slate-500">Anfragesteller</div>
                  <div className="font-medium text-slate-900">{selectedRequest.requester_name}</div>
                  <div className="text-sm text-slate-500">{selectedRequest.requester_email}</div>
                </div>
                <div>
                  <div className="text-sm text-slate-500">Frist</div>
                  <div className={`font-medium ${isOverdue(selectedRequest.deadline, selectedRequest.status) ? 'text-red-600' : 'text-slate-900'}`}>
                    {formatDate(selectedRequest.deadline)}
                  </div>
                </div>
                <div>
                  <div className="text-sm text-slate-500">Eingegangen</div>
                  <div className="font-medium text-slate-900">{formatDate(selectedRequest.created_at)}</div>
                </div>
                <div>
                  <div className="text-sm text-slate-500">Zugewiesen an</div>
                  <div className="font-medium text-slate-900">{selectedRequest.assigned_to || '-'}</div>
                </div>
              </div>

              {selectedRequest.notes && (
                <div>
                  <div className="text-sm text-slate-500 mb-1">Notizen</div>
                  <div className="bg-slate-50 rounded-lg p-3 text-sm text-slate-700">
                    {selectedRequest.notes}
                  </div>
                </div>
              )}

              <div className="flex gap-2 pt-4">
                <button className="flex-1 px-4 py-2 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700">
                  Bearbeiten
                </button>
                <button className="px-4 py-2 border border-slate-300 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50">
                  Abschließen
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Info Box */}
      <div className="mt-6 bg-blue-50 border border-blue-200 rounded-xl p-4">
        <h4 className="font-semibold text-blue-900 mb-2">DSGVO-Fristen</h4>
        <ul className="text-sm text-blue-800 space-y-1">
          <li>Art. 15 (Auskunft): 1 Monat, verlängerbar auf 3 Monate</li>
          <li>Art. 16 (Berichtigung): Unverzüglich</li>
          <li>Art. 17 (Löschung): Unverzüglich</li>
          <li>Art. 18 (Einschränkung): Unverzüglich</li>
          <li>Art. 20 (Datenübertragbarkeit): 1 Monat</li>
          <li>Art. 21 (Widerspruch): Unverzüglich</li>
        </ul>
      </div>
    </AdminLayout>
  )
}