import { useState } from 'react';
import { useMutation, useQueryClient } from '@tanstack/react-query';
import { birthdayApi, customerApi } from '../services/api';
import Button from './ui/Button';
import { X, Cake, RotateCcw, Send, AlertTriangle, Loader2, Check } from 'lucide-react';
import type { Customer } from '../types';

interface Props {
  customer: Customer;
  onClose: () => void;
}

type Channel = 'email' | 'whatsapp' | 'telegram' | 'signal';

const channelLabels: Record<Channel, { label: string; icon: string }> = {
  email: { label: 'Per E-Mail', icon: '✉️' },
  whatsapp: { label: 'Per WhatsApp', icon: '💬' },
  telegram: { label: 'Per Telegram', icon: '📨' },
  signal: { label: 'Per Signal', icon: '📱' },
};

type ConfirmState =
  | { type: 'none' }
  | { type: 'reset' }
  | { type: 'send'; channel: Channel };

export default function BirthdayManagementModal({ customer, onClose }: Props) {
  const queryClient = useQueryClient();
  const [confirm, setConfirm] = useState<ConfirmState>({ type: 'none' });
  const [autoEnabled, setAutoEnabled] = useState(customer.autoBirthdayGreeting ?? false);
  const [autoChannel, setAutoChannel] = useState<Channel>(
    (customer.autoBirthdayChannel as Channel) || 'email',
  );
  const [saved, setSaved] = useState(false);
  const [sentChannel, setSentChannel] = useState<Channel | null>(null);
  const [reset, setReset] = useState(false);

  const resetMutation = useMutation({
    mutationFn: () => birthdayApi.resetGreeting(customer.id),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['customer', customer.id] });
      setReset(true);
      setTimeout(() => setReset(false), 2500);
    },
  });

  const sendMutation = useMutation({
    mutationFn: (channel: Channel) => birthdayApi.sendGreeting(customer.id, channel),
    onSuccess: (result, channel) => {
      const text = result.data?.messageText || '';
      if (channel === 'whatsapp') {
        window.open(`https://wa.me/?text=${encodeURIComponent(text)}`, '_blank');
      } else if (channel === 'telegram') {
        window.open(
          `https://t.me/share/url?url=&text=${encodeURIComponent(text)}`,
          '_blank',
        );
      } else if (channel === 'signal') {
        window.open(`signal://send?text=${encodeURIComponent(text)}`, '_blank');
      }
      setSentChannel(channel);
      setTimeout(() => setSentChannel(null), 2500);
    },
  });

  const saveAutoMutation = useMutation({
    mutationFn: () =>
      customerApi.update(customer.id, {
        autoBirthdayGreeting: autoEnabled,
        autoBirthdayChannel: autoEnabled ? autoChannel : null,
      } as any),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['customer', customer.id] });
      setSaved(true);
      setTimeout(() => setSaved(false), 2000);
    },
  });

  const handleConfirmAction = () => {
    if (confirm.type === 'reset') {
      resetMutation.mutate();
    } else if (confirm.type === 'send') {
      sendMutation.mutate(confirm.channel);
    }
    setConfirm({ type: 'none' });
  };

  const birthDateDisplay = customer.birthDate
    ? new Date(customer.birthDate).toLocaleDateString('de-DE', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
      })
    : '-';

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4">
      <div className="bg-white rounded-2xl shadow-2xl max-w-lg w-full max-h-[90vh] overflow-y-auto">
        {/* Header */}
        <div className="bg-gradient-to-r from-pink-500 to-purple-500 p-6 text-white relative">
          <button
            onClick={onClose}
            className="absolute top-3 right-3 text-white/80 hover:text-white transition-colors"
            aria-label="Schließen"
          >
            <X className="w-5 h-5" />
          </button>
          <div className="flex items-center gap-3">
            <Cake className="w-8 h-8" />
            <div>
              <h2 className="text-xl font-bold">Geburtstag verwalten</h2>
              <p className="text-sm text-white/90">
                {customer.companyName || `${customer.firstName} ${customer.lastName}`}
              </p>
            </div>
          </div>
        </div>

        {/* Body */}
        <div className="p-6 space-y-6">
          {/* Info */}
          <div className="bg-gray-50 rounded-lg p-4 text-sm space-y-1">
            <div className="flex justify-between">
              <span className="text-gray-500">Geburtsdatum:</span>
              <span className="font-medium">{birthDateDisplay}</span>
            </div>
            {customer.birthPlace && (
              <div className="flex justify-between">
                <span className="text-gray-500">Geburtsort:</span>
                <span className="font-medium">{customer.birthPlace}</span>
              </div>
            )}
            <div className="flex justify-between">
              <span className="text-gray-500">Anrede per:</span>
              <span className="font-medium">
                {customer.useInformalAddress ? 'Du (informell)' : 'Sie (formell)'}
              </span>
            </div>
          </div>

          {/* Gruß zurücksetzen */}
          <div>
            <h3 className="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
              <RotateCcw className="w-4 h-4" />
              Gruß-Marker zurücksetzen
            </h3>
            <p className="text-xs text-gray-500 mb-3">
              Setzt die Markierung zurück, dass dem Kunden dieses Jahr bereits der Geburtstagsgruß
              angezeigt wurde. Beim nächsten Portal-Login erscheint das Modal wieder.
            </p>
            <Button
              variant="secondary"
              onClick={() => setConfirm({ type: 'reset' })}
              disabled={resetMutation.isPending || reset}
              className="w-full"
            >
              {resetMutation.isPending ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  Zurücksetzen…
                </>
              ) : reset ? (
                <>
                  <Check className="w-4 h-4 mr-2 text-green-600" />
                  Zurückgesetzt!
                </>
              ) : (
                <>
                  <RotateCcw className="w-4 h-4 mr-2" />
                  Gruß-Marker zurücksetzen
                </>
              )}
            </Button>
          </div>

          {/* Gruß senden */}
          <div>
            <h3 className="text-sm font-semibold text-gray-700 mb-2 flex items-center gap-2">
              <Send className="w-4 h-4" />
              Geburtstagsgruß jetzt senden
            </h3>
            <p className="text-xs text-gray-500 mb-3">
              Sendet einen persönlichen Geburtstagsgruß über den gewählten Kanal.
            </p>
            <div className="grid grid-cols-2 gap-2">
              {(Object.entries(channelLabels) as [Channel, typeof channelLabels[Channel]][]).map(
                ([ch, info]) => (
                  <button
                    key={ch}
                    onClick={() => setConfirm({ type: 'send', channel: ch })}
                    disabled={sendMutation.isPending}
                    className="flex items-center gap-2 px-3 py-2 border rounded-lg text-sm hover:bg-gray-50 disabled:opacity-50 transition-colors"
                  >
                    <span>{info.icon}</span>
                    <span className="flex-1 text-left">{info.label}</span>
                    {sentChannel === ch && <Check className="w-4 h-4 text-green-600" />}
                  </button>
                ),
              )}
            </div>
            {sendMutation.isError && (
              <p className="text-xs text-red-600 mt-2">
                {(sendMutation.error as any)?.message || 'Fehler beim Senden'}
              </p>
            )}
          </div>

          {/* Automatisch senden */}
          <div className="pt-4 border-t">
            <h3 className="text-sm font-semibold text-gray-700 mb-2">Automatisch senden</h3>
            <label className="flex items-start gap-2 cursor-pointer mb-3">
              <input
                type="checkbox"
                checked={autoEnabled}
                onChange={(e) => setAutoEnabled(e.target.checked)}
                className="mt-0.5"
              />
              <div className="text-sm">
                <span className="font-medium">
                  Geburtstagsgruß automatisch am Geburtstag senden
                </span>
                <p className="text-xs text-gray-500">
                  Der Gruß wird am Geburtstag des Kunden automatisch über den gewählten Kanal
                  versendet.
                </p>
              </div>
            </label>
            {autoEnabled && (
              <div className="pl-6 space-y-2">
                <label className="block text-xs text-gray-600 mb-1">Kanal</label>
                <select
                  value={autoChannel}
                  onChange={(e) => setAutoChannel(e.target.value as Channel)}
                  className="w-full border rounded px-3 py-2 text-sm"
                >
                  {(Object.entries(channelLabels) as [Channel, typeof channelLabels[Channel]][]).map(
                    ([ch, info]) => (
                      <option key={ch} value={ch}>
                        {info.icon} {info.label}
                      </option>
                    ),
                  )}
                </select>
                <p className="text-xs text-amber-600">
                  Hinweis: WhatsApp/Telegram/Signal erfordern aktuell einen manuellen Klick im
                  Browser. Aktuell wird nur automatischer E-Mail-Versand unterstützt.
                </p>
              </div>
            )}
            <Button
              onClick={() => saveAutoMutation.mutate()}
              disabled={saveAutoMutation.isPending || saved}
              className="mt-3 w-full"
              variant="secondary"
            >
              {saveAutoMutation.isPending ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  Speichere…
                </>
              ) : saved ? (
                <>
                  <Check className="w-4 h-4 mr-2 text-green-600" />
                  Gespeichert
                </>
              ) : (
                'Einstellung speichern'
              )}
            </Button>
          </div>
        </div>
      </div>

      {/* Bestätigungs-Dialog */}
      {confirm.type !== 'none' && (
        <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/60 px-4">
          <div className="bg-white rounded-xl shadow-2xl max-w-md w-full p-6">
            <div className="flex items-start gap-3 mb-4">
              <div className="bg-amber-100 p-2 rounded-full">
                <AlertTriangle className="w-5 h-5 text-amber-600" />
              </div>
              <div className="flex-1">
                <h3 className="font-semibold text-gray-900 mb-1">Bist du sicher?</h3>
                <p className="text-sm text-gray-600">
                  {confirm.type === 'reset'
                    ? 'Möchtest du den Geburtstagsgruß-Marker wirklich zurücksetzen? Beim nächsten Portal-Login sieht der Kunde das Geburtstagsmodal erneut.'
                    : `Möchtest du den Geburtstagsgruß wirklich ${channelLabels[confirm.channel].label.toLowerCase()} senden?`}
                </p>
              </div>
            </div>
            <div className="flex justify-end gap-2">
              <Button variant="secondary" onClick={() => setConfirm({ type: 'none' })}>
                Abbrechen
              </Button>
              <Button onClick={handleConfirmAction}>Ja, ausführen</Button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}