import { useState } from 'react';
import { useParams } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { publicApi } from '../../services/api';
import { formatDate } from '../../utils/dateFormat';
import { Shield, CheckCircle2, FileDown, Loader2 } from 'lucide-react';

export default function ConsentPage() {
  const { hash } = useParams<{ hash: string }>();
  const queryClient = useQueryClient();
  const [allChecked, setAllChecked] = useState(false);
  const [checks, setChecks] = useState<Record<string, boolean>>({});

  const { data, isLoading, error } = useQuery({
    queryKey: ['public-consent', hash],
    queryFn: () => publicApi.getConsentPage(hash!),
    enabled: !!hash,
  });

  const grantMutation = useMutation({
    mutationFn: () => publicApi.grantAllConsents(hash!),
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['public-consent', hash] });
    },
  });

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="flex items-center gap-3 text-gray-500">
          <Loader2 className="w-5 h-5 animate-spin" />
          Laden...
        </div>
      </div>
    );
  }

  if (error || !data?.data) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="bg-white p-8 rounded-lg shadow-sm border max-w-md text-center">
          <Shield className="w-12 h-12 text-red-400 mx-auto mb-4" />
          <h1 className="text-xl font-bold text-gray-900 mb-2">Ungültiger Link</h1>
          <p className="text-gray-500">
            Dieser Datenschutz-Link ist ungültig oder abgelaufen. Bitte kontaktieren Sie Ihren Berater.
          </p>
        </div>
      </div>
    );
  }

  const { customer, consents, privacyPolicyHtml } = data.data;
  const allGranted = consents.every((c) => c.status === 'GRANTED');
  const consentTypes = consents.map((c) => c.consentType);
  const allBoxesChecked = consentTypes.every((t) => checks[t]);

  const handleToggle = (type: string) => {
    setChecks((prev) => ({ ...prev, [type]: !prev[type] }));
  };

  const handleCheckAll = () => {
    const newValue = !allChecked;
    setAllChecked(newValue);
    const newChecks: Record<string, boolean> = {};
    consentTypes.forEach((t) => { newChecks[t] = newValue; });
    setChecks(newChecks);
  };

  const handleSubmit = () => {
    if (allBoxesChecked) {
      grantMutation.mutate();
    }
  };

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white border-b">
        <div className="max-w-3xl mx-auto px-4 py-6">
          <div className="flex items-center gap-3">
            <Shield className="w-8 h-8 text-blue-600" />
            <div>
              <h1 className="text-xl font-bold text-gray-900">Datenschutzerklärung</h1>
              <p className="text-sm text-gray-500">
                {customer.firstName} {customer.lastName} (Nr. {customer.customerNumber})
              </p>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-3xl mx-auto px-4 py-8">
        {/* Bereits zugestimmt */}
        {allGranted ? (
          <div className="bg-green-50 border border-green-200 rounded-lg p-6 mb-6">
            <div className="flex items-start gap-4">
              <CheckCircle2 className="w-8 h-8 text-green-600 flex-shrink-0" />
              <div>
                <h2 className="text-lg font-semibold text-green-800 mb-1">
                  Einwilligungen bereits erteilt
                </h2>
                <p className="text-green-700 text-sm mb-3">
                  Sie haben allen Einwilligungen zugestimmt. Vielen Dank!
                </p>
                <div className="space-y-1">
                  {consents.map((c) => (
                    <div key={c.consentType} className="flex items-center gap-2 text-sm text-green-700">
                      <CheckCircle2 className="w-4 h-4" />
                      <span>{c.label}</span>
                      {c.grantedAt && (
                        <span className="text-green-500">
                          (am {formatDate(c.grantedAt)})
                        </span>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        ) : grantMutation.isSuccess ? (
          <div className="bg-green-50 border border-green-200 rounded-lg p-6 mb-6">
            <div className="flex items-start gap-4">
              <CheckCircle2 className="w-8 h-8 text-green-600 flex-shrink-0" />
              <div>
                <h2 className="text-lg font-semibold text-green-800 mb-1">
                  Vielen Dank!
                </h2>
                <p className="text-green-700 text-sm">
                  Ihre Einwilligungen wurden erfolgreich gespeichert. Sie erhalten in Kürze eine Bestätigung per E-Mail.
                </p>
              </div>
            </div>
          </div>
        ) : null}

        {/* Datenschutzerklärung */}
        <div className="bg-white border rounded-lg shadow-sm mb-6">
          <div className="p-6 border-b flex items-center justify-between">
            <h2 className="font-semibold text-gray-900">Datenschutzerklärung</h2>
            <a
              href={publicApi.getConsentPdfUrl(hash!)}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center gap-2 text-sm text-blue-600 hover:text-blue-800"
            >
              <FileDown className="w-4 h-4" />
              Als PDF herunterladen
            </a>
          </div>
          <div
            className="p-6 prose prose-sm max-w-none"
            dangerouslySetInnerHTML={{ __html: privacyPolicyHtml }}
          />
        </div>

        {/* Einwilligungen (nur wenn noch nicht erteilt) */}
        {!allGranted && !grantMutation.isSuccess && (
          <div className="bg-white border rounded-lg shadow-sm">
            <div className="p-6 border-b">
              <h2 className="font-semibold text-gray-900 mb-1">Einwilligungen</h2>
              <p className="text-sm text-gray-500">
                Bitte stimmen Sie allen Punkten zu, damit wir Sie beraten können.
              </p>
            </div>
            <div className="p-6 space-y-4">
              {/* Alle auswählen */}
              <label className="flex items-start gap-3 p-3 rounded-lg bg-blue-50 border border-blue-200 cursor-pointer hover:bg-blue-100 transition-colors">
                <input
                  type="checkbox"
                  checked={allChecked && allBoxesChecked}
                  onChange={handleCheckAll}
                  className="mt-0.5 rounded border-blue-300 text-blue-600 focus:ring-blue-500"
                />
                <div>
                  <span className="font-medium text-blue-900">Allen zustimmen</span>
                </div>
              </label>

              <div className="border-t pt-4 space-y-3">
                {consents.map((c) => (
                  <label
                    key={c.consentType}
                    className={`flex items-start gap-3 p-3 rounded-lg border cursor-pointer transition-colors ${
                      checks[c.consentType]
                        ? 'bg-green-50 border-green-200'
                        : 'bg-white border-gray-200 hover:bg-gray-50'
                    }`}
                  >
                    <input
                      type="checkbox"
                      checked={checks[c.consentType] || false}
                      onChange={() => handleToggle(c.consentType)}
                      className="mt-0.5 rounded border-gray-300 text-green-600 focus:ring-green-500"
                    />
                    <div>
                      <span className="font-medium text-gray-900">{c.label} *</span>
                      <p className="text-sm text-gray-500 mt-0.5">{c.description}</p>
                    </div>
                  </label>
                ))}
              </div>

              <p className="text-xs text-gray-400">* Pflichtfeld</p>

              {grantMutation.isError && (
                <div className="bg-red-50 border border-red-200 rounded-lg p-3 text-sm text-red-700">
                  Fehler beim Speichern. Bitte versuchen Sie es erneut.
                </div>
              )}

              <button
                onClick={handleSubmit}
                disabled={!allBoxesChecked || grantMutation.isPending}
                className={`w-full py-3 px-4 rounded-lg font-medium text-white transition-colors ${
                  allBoxesChecked && !grantMutation.isPending
                    ? 'bg-blue-600 hover:bg-blue-700'
                    : 'bg-gray-300 cursor-not-allowed'
                }`}
              >
                {grantMutation.isPending ? (
                  <span className="flex items-center justify-center gap-2">
                    <Loader2 className="w-4 h-4 animate-spin" />
                    Wird gespeichert...
                  </span>
                ) : (
                  'Zustimmen'
                )}
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}