import { Outlet, Link } from 'react-router-dom';
import { useQuery } from '@tanstack/react-query';
import { useAuth } from '../../context/AuthContext';
import { gdprApi } from '../../services/api';
import Sidebar from './Sidebar';
import ScrollToTopButton from '../ScrollToTopButton';
import BirthdayModal from '../BirthdayModal';
import { AlertTriangle, ArrowRight, Building, Shield } from 'lucide-react';

function ConsentBanner() {
  const { user, isCustomerPortal } = useAuth();

  const { data } = useQuery({
    queryKey: ['my-consent-status'],
    queryFn: () => gdprApi.getMyConsentStatus(),
    enabled: isCustomerPortal && !!user?.customerId,
    staleTime: 30_000,
  });

  if (!isCustomerPortal || !data?.data) return null;

  if (data.data.hasConsent) return null;

  return (
    <div className="bg-amber-50 border-b border-amber-200 px-6 py-3">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <AlertTriangle className="w-5 h-5 text-amber-600 flex-shrink-0" />
          <p className="text-sm text-amber-800">
            Bitte stimmen Sie unserer Datenschutzerklärung zu, damit wir Sie beraten können.
          </p>
        </div>
        <Link
          to="/privacy"
          className="flex items-center gap-1 text-sm font-medium text-amber-700 hover:text-amber-900 whitespace-nowrap"
        >
          Jetzt zustimmen
          <ArrowRight className="w-4 h-4" />
        </Link>
      </div>
    </div>
  );
}

function PortalFooter() {
  const { isCustomerPortal } = useAuth();
  if (!isCustomerPortal) return null;

  return (
    <footer className="border-t bg-gray-50 px-8 py-4">
      <div className="flex items-center justify-center gap-6 text-sm text-gray-500">
        <Link to="/imprint" className="flex items-center gap-1 hover:text-blue-600 transition-colors">
          <Building className="w-3 h-3" />
          Impressum
        </Link>
        <span className="text-gray-300">|</span>
        <Link to="/website-privacy" className="flex items-center gap-1 hover:text-blue-600 transition-colors">
          <Shield className="w-3 h-3" />
          Datenschutzerklärung
        </Link>
      </div>
    </footer>
  );
}

export default function Layout() {
  return (
    <div className="flex min-h-screen">
      <Sidebar />
      <div className="flex-1 flex flex-col overflow-auto">
        <ConsentBanner />
        <main className="flex-1 p-8">
          <Outlet />
        </main>
        <PortalFooter />
      </div>
      <ScrollToTopButton />
      <BirthdayModal />
    </div>
  );
}