import { useState, useEffect } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Link } from 'react-router-dom';
import { appSettingsApi } from '../../services/api';
import Card from '../../components/ui/Card';
import Input from '../../components/ui/Input';
import Button from '../../components/ui/Button';
import { ArrowLeft, Clock, AlertTriangle, AlertCircle, CheckCircle } from 'lucide-react';

export default function DeadlineSettings() {
  const queryClient = useQueryClient();

  const { data: settingsData, isLoading } = useQuery({
    queryKey: ['app-settings'],
    queryFn: () => appSettingsApi.getAll(),
  });

  const [criticalDays, setCriticalDays] = useState('14');
  const [warningDays, setWarningDays] = useState('42');
  const [okDays, setOkDays] = useState('90');
  const [hasChanges, setHasChanges] = useState(false);

  useEffect(() => {
    if (settingsData?.data) {
      setCriticalDays(settingsData.data.deadlineCriticalDays || '14');
      setWarningDays(settingsData.data.deadlineWarningDays || '42');
      setOkDays(settingsData.data.deadlineOkDays || '90');
      setHasChanges(false);
    }
  }, [settingsData]);

  const updateMutation = useMutation({
    mutationFn: (settings: Record<string, string>) => appSettingsApi.update(settings),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['app-settings'] });
      queryClient.invalidateQueries({ queryKey: ['contract-cockpit'] });
      setHasChanges(false);
    },
  });

  const handleSave = () => {
    // Validierung
    const critical = parseInt(criticalDays);
    const warning = parseInt(warningDays);
    const ok = parseInt(okDays);

    if (isNaN(critical) || isNaN(warning) || isNaN(ok)) {
      alert('Bitte gültige Zahlen eingeben');
      return;
    }

    if (critical >= warning || warning >= ok) {
      alert('Die Werte müssen aufsteigend sein: Kritisch < Warnung < OK');
      return;
    }

    updateMutation.mutate({
      deadlineCriticalDays: criticalDays,
      deadlineWarningDays: warningDays,
      deadlineOkDays: okDays,
    });
  };

  const handleChange = (setter: (value: string) => void, value: string) => {
    setter(value);
    setHasChanges(true);
  };

  if (isLoading) {
    return (
      <div className="flex items-center justify-center py-12">
        <div className="text-gray-500">Laden...</div>
      </div>
    );
  }

  return (
    <div>
      <div className="flex items-center gap-4 mb-6">
        <Link to="/settings" className="text-gray-500 hover:text-gray-700">
          <ArrowLeft className="w-5 h-5" />
        </Link>
        <div className="flex items-center gap-3">
          <Clock className="w-6 h-6" />
          <h1 className="text-2xl font-bold">Fristenschwellen</h1>
        </div>
      </div>

      <Card title="Farbkodierung für Fristen">
        <p className="text-gray-600 mb-6">
          Definiere, ab wann Vertragsfristen als kritisch (rot), Warnung (gelb) oder OK (grün)
          angezeigt werden sollen. Die Werte geben die Anzahl der Tage bis zur Frist an.
        </p>

        <div className="space-y-6">
          {/* Kritisch (Rot) */}
          <div className="flex items-center gap-4 p-4 bg-red-50 border border-red-200 rounded-lg">
            <AlertCircle className="w-8 h-8 text-red-500 flex-shrink-0" />
            <div className="flex-1">
              <label className="block font-medium text-red-800 mb-1">
                Kritisch (Rot)
              </label>
              <p className="text-sm text-red-600 mb-2">
                Fristen mit weniger als X Tagen werden rot markiert
              </p>
              <div className="flex items-center gap-2">
                <Input
                  type="number"
                  min="1"
                  value={criticalDays}
                  onChange={(e) => handleChange(setCriticalDays, e.target.value)}
                  className="w-24"
                />
                <span className="text-red-700">Tage</span>
              </div>
            </div>
          </div>

          {/* Warnung (Gelb) */}
          <div className="flex items-center gap-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg">
            <AlertTriangle className="w-8 h-8 text-yellow-500 flex-shrink-0" />
            <div className="flex-1">
              <label className="block font-medium text-yellow-800 mb-1">
                Warnung (Gelb)
              </label>
              <p className="text-sm text-yellow-600 mb-2">
                Fristen mit weniger als X Tagen werden gelb markiert
              </p>
              <div className="flex items-center gap-2">
                <Input
                  type="number"
                  min="1"
                  value={warningDays}
                  onChange={(e) => handleChange(setWarningDays, e.target.value)}
                  className="w-24"
                />
                <span className="text-yellow-700">Tage</span>
              </div>
            </div>
          </div>

          {/* OK (Grün) */}
          <div className="flex items-center gap-4 p-4 bg-green-50 border border-green-200 rounded-lg">
            <CheckCircle className="w-8 h-8 text-green-500 flex-shrink-0" />
            <div className="flex-1">
              <label className="block font-medium text-green-800 mb-1">
                OK (Grün)
              </label>
              <p className="text-sm text-green-600 mb-2">
                Fristen mit weniger als X Tagen werden grün markiert (darüber nicht angezeigt)
              </p>
              <div className="flex items-center gap-2">
                <Input
                  type="number"
                  min="1"
                  value={okDays}
                  onChange={(e) => handleChange(setOkDays, e.target.value)}
                  className="w-24"
                />
                <span className="text-green-700">Tage</span>
              </div>
            </div>
          </div>
        </div>

        <div className="mt-6 pt-4 border-t flex justify-between items-center">
          <p className="text-sm text-gray-500">
            Beispiel: Bei 14/42/90 Tagen wird eine Frist die in 10 Tagen abläuft rot,
            eine in 30 Tagen gelb, und eine in 60 Tagen grün markiert.
          </p>
          <Button
            onClick={handleSave}
            disabled={!hasChanges || updateMutation.isPending}
          >
            {updateMutation.isPending ? 'Speichere...' : 'Speichern'}
          </Button>
        </div>
      </Card>
    </div>
  );
}