import { useState } from 'react'
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { Bell, Plus, Trash2, Check, AlertTriangle, Info, AlertCircle } from 'lucide-react'
import { alertsApi, alertRulesApi } from '../api/client'
import type { AlertSeverity, AlertRule, CreateAlertRuleRequest } from '../api/types'
import { cn } from '../lib/utils'

function getSeverityStyle(severity: AlertSeverity) {
  return {
    Critical: 'bg-red-500/20 text-red-400 border border-red-500/30',
    Warning: 'bg-yellow-500/20 text-yellow-400 border border-yellow-500/30',
    Info: 'bg-blue-500/20 text-blue-400 border border-blue-500/30',
  }[severity]
}

function getSeverityIcon(severity: AlertSeverity) {
  return {
    Critical: <AlertCircle size={14} />,
    Warning: <AlertTriangle size={14} />,
    Info: <Info size={14} />,
  }[severity]
}

const metricPathOptions = [
  { value: 'cpu_usage_percent', label: 'CPU-Auslastung (%)' },
  { value: 'memory_usage_percent', label: 'RAM-Auslastung (%)' },
]

const operatorOptions = [
  { value: '>', label: '>' },
  { value: '>=', label: '>=' },
  { value: '<', label: '<' },
  { value: '<=', label: '<=' },
  { value: '==', label: '==' },
]

const severityOptions = [
  { value: 'Info' as AlertSeverity, label: 'Info' },
  { value: 'Warning' as AlertSeverity, label: 'Warning' },
  { value: 'Critical' as AlertSeverity, label: 'Critical' },
]

interface CreateRuleForm {
  name: string
  metricPath: string
  operator: string
  threshold: string
  severity: AlertSeverity
}

export default function AlertsPage() {
  const [activeTab, setActiveTab] = useState<'alerts' | 'rules'>('alerts')
  const [alertFilter, setAlertFilter] = useState<'all' | 'unacknowledged' | 'acknowledged'>('unacknowledged')
  const [showCreateRuleModal, setShowCreateRuleModal] = useState(false)
  const [formData, setFormData] = useState<CreateRuleForm>({
    name: '',
    metricPath: 'cpu_usage_percent',
    operator: '>',
    threshold: '',
    severity: 'Warning',
  })

  const queryClient = useQueryClient()

  // Queries
  const alertsQuery = useQuery({
    queryKey: ['alerts'],
    queryFn: () => alertsApi.list(),
  })

  const rulesQuery = useQuery({
    queryKey: ['alert-rules'],
    queryFn: () => alertRulesApi.list(),
  })

  // Mutations
  const acknowledgeMutation = useMutation({
    mutationFn: (id: number) => alertsApi.acknowledge(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['alerts'] })
    },
  })

  const createRuleMutation = useMutation({
    mutationFn: (data: CreateAlertRuleRequest) => alertRulesApi.create(data),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['alert-rules'] })
      setShowCreateRuleModal(false)
      setFormData({
        name: '',
        metricPath: 'cpu_usage_percent',
        operator: '>',
        threshold: '',
        severity: 'Warning',
      })
    },
  })

  const updateRuleMutation = useMutation({
    mutationFn: ({ id, enabled }: { id: number; enabled: boolean }) =>
      alertRulesApi.update(id, { enabled }),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['alert-rules'] })
    },
  })

  const deleteRuleMutation = useMutation({
    mutationFn: (id: number) => alertRulesApi.delete(id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['alert-rules'] })
    },
  })

  // Filter alerts
  const filteredAlerts = alertsQuery.data?.filter((alert) => {
    if (alertFilter === 'acknowledged') return alert.acknowledged
    if (alertFilter === 'unacknowledged') return !alert.acknowledged
    return true
  }) || []

  // Handlers
  const handleCreateRule = async () => {
    if (!formData.name.trim() || !formData.threshold) {
      alert('Bitte alle erforderlichen Felder ausfüllen')
      return
    }
    try {
      await createRuleMutation.mutateAsync({
        name: formData.name,
        metricPath: formData.metricPath,
        operator: formData.operator,
        threshold: parseFloat(formData.threshold),
        severity: formData.severity,
      })
    } catch (err) {
      console.error('Fehler beim Erstellen der Regel:', err)
    }
  }

  const handleDeleteRule = (id: number) => {
    if (window.confirm('Möchten Sie diese Regel wirklich löschen?')) {
      deleteRuleMutation.mutate(id)
    }
  }

  const handleToggleRuleEnabled = (rule: AlertRule) => {
    updateRuleMutation.mutate({ id: rule.id, enabled: !rule.enabled })
  }

  return (
    <div className="p-6 max-w-7xl mx-auto">
      {/* Header */}
      <div className="flex items-center gap-3 mb-6">
        <Bell size={24} className="text-primary" />
        <h1 className="text-3xl font-bold text-foreground">Alerts</h1>
      </div>

      {/* Tabs */}
      <div className="flex gap-2 border-b border-border mb-6">
        <button
          onClick={() => setActiveTab('alerts')}
          className={cn(
            'px-4 py-2 font-medium transition-colors',
            activeTab === 'alerts'
              ? 'border-b-2 border-primary text-primary'
              : 'text-muted-foreground hover:text-foreground',
          )}
        >
          Aktive Alerts
        </button>
        <button
          onClick={() => setActiveTab('rules')}
          className={cn(
            'px-4 py-2 font-medium transition-colors',
            activeTab === 'rules'
              ? 'border-b-2 border-primary text-primary'
              : 'text-muted-foreground hover:text-foreground',
          )}
        >
          Regeln
        </button>
      </div>

      {/* Tab 1: Aktive Alerts */}
      {activeTab === 'alerts' && (
        <div className="space-y-4">
          {/* Filter */}
          <div className="flex gap-2">
            <button
              onClick={() => setAlertFilter('all')}
              className={cn(
                'px-3 py-1 rounded text-sm transition-colors',
                alertFilter === 'all'
                  ? 'bg-primary text-primary-foreground'
                  : 'bg-accent text-foreground hover:bg-accent/80',
              )}
            >
              Alle
            </button>
            <button
              onClick={() => setAlertFilter('unacknowledged')}
              className={cn(
                'px-3 py-1 rounded text-sm transition-colors',
                alertFilter === 'unacknowledged'
                  ? 'bg-primary text-primary-foreground'
                  : 'bg-accent text-foreground hover:bg-accent/80',
              )}
            >
              Unbestätigt
            </button>
            <button
              onClick={() => setAlertFilter('acknowledged')}
              className={cn(
                'px-3 py-1 rounded text-sm transition-colors',
                alertFilter === 'acknowledged'
                  ? 'bg-primary text-primary-foreground'
                  : 'bg-accent text-foreground hover:bg-accent/80',
              )}
            >
              Bestätigt
            </button>
          </div>

          {/* Loading / Error */}
          {alertsQuery.isLoading && <p className="text-muted-foreground">Lädt...</p>}
          {alertsQuery.isError && (
            <p className="text-red-400">Fehler beim Laden der Alerts</p>
          )}

          {/* Empty State */}
          {alertsQuery.isSuccess && filteredAlerts.length === 0 && (
            <p className="text-muted-foreground text-center py-8">
              Keine aktiven Alerts
            </p>
          )}

          {/* Table */}
          {alertsQuery.isSuccess && filteredAlerts.length > 0 && (
            <div className="overflow-x-auto border border-border rounded-lg">
              <table className="w-full text-sm">
                <thead>
                  <tr className="bg-accent border-b border-border">
                    <th className="px-4 py-2 text-left font-medium">Erstellt</th>
                    <th className="px-4 py-2 text-left font-medium">Agent</th>
                    <th className="px-4 py-2 text-left font-medium">Regel</th>
                    <th className="px-4 py-2 text-left font-medium">Nachricht</th>
                    <th className="px-4 py-2 text-left font-medium">Schweregrad</th>
                    <th className="px-4 py-2 text-left font-medium">Aktionen</th>
                  </tr>
                </thead>
                <tbody>
                  {filteredAlerts.map((alert) => (
                    <tr key={alert.id} className="border-b border-border hover:bg-accent/50">
                      <td className="px-4 py-2 text-xs text-muted-foreground">
                        {new Date(alert.createdAt).toLocaleString('de-DE')}
                      </td>
                      <td className="px-4 py-2">
                        <div>
                          <p className="font-medium">{alert.agentHostname}</p>
                          <p className="text-xs text-muted-foreground">{alert.agentId}</p>
                        </div>
                      </td>
                      <td className="px-4 py-2">{alert.ruleName}</td>
                      <td className="px-4 py-2 text-xs">{alert.message}</td>
                      <td className="px-4 py-2">
                        <div className={cn('flex items-center gap-1 px-2 py-1 rounded w-fit text-xs font-medium', getSeverityStyle(alert.severity))}>
                          {getSeverityIcon(alert.severity)}
                          {alert.severity}
                        </div>
                      </td>
                      <td className="px-4 py-2">
                        <button
                          onClick={() => acknowledgeMutation.mutate(alert.id)}
                          disabled={alert.acknowledged || acknowledgeMutation.isPending}
                          className={cn(
                            'flex items-center gap-1 px-2 py-1 rounded text-xs transition-colors',
                            alert.acknowledged
                              ? 'bg-green-500/20 text-green-400 cursor-default'
                              : 'bg-blue-500/20 text-blue-400 hover:bg-blue-500/30 disabled:opacity-50',
                          )}
                        >
                          <Check size={12} />
                          {alert.acknowledged ? 'Bestätigt' : 'Bestätigen'}
                        </button>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}

      {/* Tab 2: Regeln */}
      {activeTab === 'rules' && (
        <div className="space-y-4">
          {/* Create Button */}
          <button
            onClick={() => setShowCreateRuleModal(true)}
            className="flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors"
          >
            <Plus size={16} />
            Neue Regel
          </button>

          {/* Loading / Error */}
          {rulesQuery.isLoading && <p className="text-muted-foreground">Lädt...</p>}
          {rulesQuery.isError && (
            <p className="text-red-400">Fehler beim Laden der Regeln</p>
          )}

          {/* Empty State */}
          {rulesQuery.isSuccess && rulesQuery.data.length === 0 && (
            <p className="text-muted-foreground text-center py-8">
              Keine Regeln vorhanden
            </p>
          )}

          {/* Table */}
          {rulesQuery.isSuccess && rulesQuery.data.length > 0 && (
            <div className="overflow-x-auto border border-border rounded-lg">
              <table className="w-full text-sm">
                <thead>
                  <tr className="bg-accent border-b border-border">
                    <th className="px-4 py-2 text-left font-medium">Name</th>
                    <th className="px-4 py-2 text-left font-medium">Metrik</th>
                    <th className="px-4 py-2 text-left font-medium">Bedingung</th>
                    <th className="px-4 py-2 text-left font-medium">Schweregrad</th>
                    <th className="px-4 py-2 text-center font-medium">Aktiv</th>
                    <th className="px-4 py-2 text-left font-medium">Aktionen</th>
                  </tr>
                </thead>
                <tbody>
                  {rulesQuery.data.map((rule) => {
                    const metricLabel = metricPathOptions.find(
                      (opt) => opt.value === rule.metricPath,
                    )?.label || rule.metricPath
                    return (
                      <tr key={rule.id} className="border-b border-border hover:bg-accent/50">
                        <td className="px-4 py-2 font-medium">{rule.name}</td>
                        <td className="px-4 py-2 text-xs">{metricLabel}</td>
                        <td className="px-4 py-2 text-xs font-mono">
                          {metricLabel} {rule.operator} {rule.threshold}
                        </td>
                        <td className="px-4 py-2">
                          <div className={cn('flex items-center gap-1 px-2 py-1 rounded w-fit text-xs font-medium', getSeverityStyle(rule.severity))}>
                            {getSeverityIcon(rule.severity)}
                            {rule.severity}
                          </div>
                        </td>
                        <td className="px-4 py-2 text-center">
                          <button
                            onClick={() => handleToggleRuleEnabled(rule)}
                            disabled={updateRuleMutation.isPending}
                            className={cn(
                              'px-2 py-1 rounded text-xs font-medium transition-colors',
                              rule.enabled
                                ? 'bg-green-500/20 text-green-400 hover:bg-green-500/30'
                                : 'bg-red-500/20 text-red-400 hover:bg-red-500/30',
                            )}
                          >
                            {rule.enabled ? 'Ja' : 'Nein'}
                          </button>
                        </td>
                        <td className="px-4 py-2">
                          <button
                            onClick={() => handleDeleteRule(rule.id)}
                            disabled={deleteRuleMutation.isPending}
                            className="flex items-center gap-1 px-2 py-1 rounded text-xs bg-red-500/20 text-red-400 hover:bg-red-500/30 transition-colors disabled:opacity-50"
                          >
                            <Trash2 size={12} />
                            Löschen
                          </button>
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>
      )}

      {/* Create Rule Modal */}
      {showCreateRuleModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
          <div className="bg-card border border-border rounded-lg p-6 max-w-md w-full">
            <h2 className="text-xl font-bold mb-4">Neue Regel erstellen</h2>

            <div className="space-y-4">
              {/* Name */}
              <div>
                <label className="block text-sm font-medium mb-1">
                  Name <span className="text-red-400">*</span>
                </label>
                <input
                  type="text"
                  value={formData.name}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  className="w-full px-3 py-2 bg-background border border-border rounded-md text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                  placeholder="z.B. CPU über 90%"
                />
              </div>

              {/* MetricPath */}
              <div>
                <label className="block text-sm font-medium mb-1">
                  Metrik <span className="text-red-400">*</span>
                </label>
                <select
                  value={formData.metricPath}
                  onChange={(e) => setFormData({ ...formData, metricPath: e.target.value })}
                  className="w-full px-3 py-2 bg-background border border-border rounded-md text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                >
                  {metricPathOptions.map((opt) => (
                    <option key={opt.value} value={opt.value}>
                      {opt.label}
                    </option>
                  ))}
                </select>
              </div>

              {/* Operator */}
              <div>
                <label className="block text-sm font-medium mb-1">
                  Operator <span className="text-red-400">*</span>
                </label>
                <select
                  value={formData.operator}
                  onChange={(e) => setFormData({ ...formData, operator: e.target.value })}
                  className="w-full px-3 py-2 bg-background border border-border rounded-md text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                >
                  {operatorOptions.map((opt) => (
                    <option key={opt.value} value={opt.value}>
                      {opt.label}
                    </option>
                  ))}
                </select>
              </div>

              {/* Threshold */}
              <div>
                <label className="block text-sm font-medium mb-1">
                  Schwellenwert <span className="text-red-400">*</span>
                </label>
                <input
                  type="number"
                  value={formData.threshold}
                  onChange={(e) => setFormData({ ...formData, threshold: e.target.value })}
                  className="w-full px-3 py-2 bg-background border border-border rounded-md text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                  placeholder="z.B. 90"
                />
              </div>

              {/* Severity */}
              <div>
                <label className="block text-sm font-medium mb-1">
                  Schweregrad <span className="text-red-400">*</span>
                </label>
                <select
                  value={formData.severity}
                  onChange={(e) => setFormData({ ...formData, severity: e.target.value as AlertSeverity })}
                  className="w-full px-3 py-2 bg-background border border-border rounded-md text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                >
                  {severityOptions.map((opt) => (
                    <option key={opt.value} value={opt.value}>
                      {opt.label}
                    </option>
                  ))}
                </select>
              </div>
            </div>

            {/* Buttons */}
            <div className="flex gap-3 mt-6">
              <button
                onClick={() => setShowCreateRuleModal(false)}
                className="flex-1 px-4 py-2 bg-accent text-foreground rounded-md hover:bg-accent/80 transition-colors"
              >
                Abbrechen
              </button>
              <button
                onClick={handleCreateRule}
                disabled={createRuleMutation.isPending}
                className="flex-1 px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 transition-colors disabled:opacity-50"
              >
                {createRuleMutation.isPending ? 'Wird erstellt...' : 'Erstellen'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  )
}