import { useState, useEffect } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Link } from 'react-router-dom';
import toast from 'react-hot-toast';
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, Globe, MessageSquare, Link as LinkIcon } from 'lucide-react';

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

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

  const [customerSupportEnabled, setCustomerSupportEnabled] = useState(false);
  const [portalLoginUrl, setPortalLoginUrl] = useState('');

  useEffect(() => {
    if (settingsData?.data) {
      setCustomerSupportEnabled(settingsData.data.customerSupportTicketsEnabled === 'true');
      setPortalLoginUrl(settingsData.data.portalLoginUrl || '');
    }
  }, [settingsData]);

  const updateMutation = useMutation({
    mutationFn: (settings: Record<string, string>) => appSettingsApi.update(settings),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['app-settings'] });
      queryClient.invalidateQueries({ queryKey: ['app-settings-public'] });
    },
    onError: (err: Error) => {
      toast.error(err.message || 'Speichern fehlgeschlagen');
    },
  });

  const handleSupportToggle = (enabled: boolean) => {
    setCustomerSupportEnabled(enabled);
    updateMutation.mutate({ customerSupportTicketsEnabled: enabled ? 'true' : 'false' });
  };

  const handleSavePortalLoginUrl = () => {
    const trimmed = portalLoginUrl.trim().replace(/\/+$/, '');
    if (trimmed && !/^https?:\/\//i.test(trimmed)) {
      toast.error('URL muss mit http:// oder https:// beginnen');
      return;
    }
    updateMutation.mutate(
      { portalLoginUrl: trimmed },
      { onSuccess: () => toast.success('Portal-Login-URL gespeichert') },
    );
  };

  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">
          <Globe className="w-6 h-6" />
          <h1 className="text-2xl font-bold">Kundenportal</h1>
        </div>
      </div>

      <Card title="Portal-Login-URL" className="mb-6">
        <div className="flex items-start gap-3">
          <LinkIcon className="w-5 h-5 text-gray-500 mt-2" />
          <div className="flex-1">
            <p className="text-sm text-gray-600 mb-3">
              Diese Basis-URL wird in Mails an Kunden eingesetzt, die ihre
              Portal-Zugangsdaten zugeschickt bekommen, sowie bei
              Passwort-Reset-Links. Ohne Eintrag wird auf den Server-
              Standard zurückgegriffen, was lokal in <code>localhost:5173</code>
              endet – Kunden klicken dann auf einen toten Link.
            </p>
            <div className="flex gap-2">
              <Input
                value={portalLoginUrl}
                onChange={(e) => setPortalLoginUrl(e.target.value)}
                placeholder="https://crm.deine-domain.de"
                className="flex-1"
              />
              <Button
                onClick={handleSavePortalLoginUrl}
                disabled={updateMutation.isPending || portalLoginUrl === (settingsData?.data?.portalLoginUrl || '')}
              >
                Speichern
              </Button>
            </div>
            <p className="text-xs text-gray-500 mt-2">
              Beispiel: <code>https://crm.deine-domain.de</code> →
              Login-Link in der Mail wird <code>https://crm.deine-domain.de/portal/login</code>.
              Trailing-Slash wird automatisch entfernt.
            </p>
          </div>
        </div>
      </Card>

      <Card title="Support-Anfragen">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <MessageSquare className="w-5 h-5 text-gray-500" />
            <div>
              <p className="font-medium">Kunden können Support-Anfragen erstellen</p>
              <p className="text-sm text-gray-500">
                Wenn aktiviert, können Kunden im Portal Support-Anfragen zu ihren Verträgen erstellen.
                Diese erscheinen als Aufgaben in der Vertragsdetailansicht.
              </p>
            </div>
          </div>
          <label className="relative inline-flex items-center cursor-pointer">
            <input
              type="checkbox"
              checked={customerSupportEnabled}
              onChange={(e) => handleSupportToggle(e.target.checked)}
              disabled={updateMutation.isPending}
              className="sr-only peer"
            />
            <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
          </label>
        </div>

        {customerSupportEnabled && (
          <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
            <p className="text-sm text-blue-800">
              <strong>Hinweis:</strong> Kunden sehen diese Anfragen als "Support-Anfragen" in ihrem Portal.
              Sie können die Anfrage mit einem Titel und einer Beschreibung erstellen.
              Ihre Mitarbeiter können dann mit Antworten (Unteraufgaben) reagieren.
            </p>
          </div>
        )}
      </Card>
    </div>
  );
}
