import { AnimatePresence, motion } from 'framer-motion';
import { BarChart3, Cookie, Mail, Shield } from 'lucide-react';
import { useEffect, useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { Label } from '@/components/ui/label';
import { useAuth } from '@/contexts/AuthContext';
import { consentApi } from '@/db/gdpr-api';

const CONSENT_VERSION = '1.0';
const CONSENT_STORAGE_KEY = 'gdpr_consent_shown';

export function CookieConsentBanner() {
  const { user } = useAuth();
  const [showBanner, setShowBanner] = useState(false);
  const [showDetails, setShowDetails] = useState(false);
  const [consents, setConsents] = useState({
    terms: false,
    privacy: false,
    marketing: false,
    analytics: false,
  });

  useEffect(() => {
    const checkConsent = async () => {
      // Önce localStorage'ı kontrol et (hem misafir hem giriş yapmış kullanıcı için)
      const hasShown = localStorage.getItem(CONSENT_STORAGE_KEY);
      if (hasShown) return;

      // Eğer kullanıcı giriş yapmışsa, DB'den kontrol et
      if (user) {
        try {
          const latestConsents = await consentApi.getLatestConsents(user.id);
          
          // Eğer terms ve privacy consent'i varsa banner'ı gösterme
          if (latestConsents.terms?.consent_given && latestConsents.privacy?.consent_given) {
            localStorage.setItem(CONSENT_STORAGE_KEY, 'true');
            return;
          }
        } catch (error) {
          console.error('Consent durumu DB\'den kontrol edilemedi:', error);
          // Hata durumunda banner'ı göster (güvenli tarafta kalmak için)
        }
      }

      // Consent verilmemişse veya misafir ise banner'ı göster
      setShowBanner(true);
    };

    checkConsent();
  }, [user]);

  const handleAcceptAll = async () => {
    const allConsents = {
      terms: true,
      privacy: true,
      marketing: true,
      analytics: true,
    };

    // Her durumda localStorage'a kaydet ve banner'ı kapat
    localStorage.setItem(CONSENT_STORAGE_KEY, 'true');
    setShowBanner(false);

    // Giriş yapmış kullanıcı ise DB'ye de kaydet
    if (user) {
      try {
        await consentApi.recordConsent(user.id, allConsents, CONSENT_VERSION);
      } catch (error) {
        console.error('Consent DB\'ye kaydedilemedi:', error);
      }
    }
  };

  const handleAcceptNecessary = async () => {
    const necessaryConsents = {
      terms: true,
      privacy: true,
      marketing: false,
      analytics: false,
    };

    // Her durumda localStorage'a kaydet ve banner'ı kapat
    localStorage.setItem(CONSENT_STORAGE_KEY, 'true');
    setShowBanner(false);

    // Giriş yapmış kullanıcı ise DB'ye de kaydet
    if (user) {
      try {
        await consentApi.recordConsent(user.id, necessaryConsents, CONSENT_VERSION);
      } catch (error) {
        console.error('Consent DB\'ye kaydedilemedi:', error);
      }
    }
  };

  const handleSavePreferences = async () => {
    // Terms ve privacy zorunlu
    const finalConsents = {
      ...consents,
      terms: true,
      privacy: true,
    };

    // Her durumda localStorage'a kaydet ve banner'ı kapat
    localStorage.setItem(CONSENT_STORAGE_KEY, 'true');
    setShowBanner(false);

    // Giriş yapmış kullanıcı ise DB'ye de kaydet
    if (user) {
      try {
        await consentApi.recordConsent(user.id, finalConsents, CONSENT_VERSION);
      } catch (error) {
        console.error('Consent DB\'ye kaydedilemedi:', error);
      }
    }
  };

  if (!showBanner) return null;

  return (
    <AnimatePresence>
      <motion.div
        initial={{ y: 100, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        exit={{ y: 100, opacity: 0 }}
        className="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6"
      >
        <Card className="mx-auto max-w-4xl border-2 shadow-2xl">
          <CardHeader>
            <div className="flex items-center gap-2">
              <Cookie className="h-6 w-6 text-primary" />
              <CardTitle>Çerezler ve Gizlilik</CardTitle>
            </div>
            <CardDescription>
              Web sitemizi kullanmaya devam ederek, çerez kullanımımızı ve gizlilik politikamızı kabul etmiş olursunuz.
            </CardDescription>
          </CardHeader>

          {!showDetails ? (
            <>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  Hizmetlerimizi geliştirmek ve size daha iyi bir deneyim sunmak için çerezler kullanıyoruz. 
                  Zorunlu çerezler hizmetin çalışması için gereklidir. İsteğe bağlı çerezleri özelleştirebilirsiniz.
                </p>
              </CardContent>
              <CardFooter className="flex flex-col gap-2 sm:flex-row">
                <Button onClick={handleAcceptAll} className="flex-1">
                  Tümünü Kabul Et
                </Button>
                <Button onClick={handleAcceptNecessary} variant="outline" className="flex-1">
                  Sadece Gerekli Çerezler
                </Button>
                <Button onClick={() => setShowDetails(true)} variant="ghost" className="flex-1">
                  Özelleştir
                </Button>
              </CardFooter>
            </>
          ) : (
            <>
              <CardContent className="space-y-4">
                {/* Zorunlu Çerezler */}
                <div className="flex items-start gap-3 rounded-lg border p-4">
                  <Shield className="mt-1 h-5 w-5 text-primary" />
                  <div className="flex-1 space-y-1">
                    <div className="flex items-center justify-between">
                      <Label className="text-base font-semibold">Zorunlu Çerezler</Label>
                      <span className="text-xs text-muted-foreground">Her zaman aktif</span>
                    </div>
                    <p className="text-sm text-muted-foreground">
                      Web sitesinin temel işlevlerini sağlamak için gereklidir. Oturum yönetimi, güvenlik ve temel özellikler.
                    </p>
                  </div>
                </div>

                {/* Analitik Çerezler */}
                <div className="flex items-start gap-3 rounded-lg border p-4">
                  <BarChart3 className="mt-1 h-5 w-5 text-primary" />
                  <div className="flex-1 space-y-1">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="analytics" className="text-base font-semibold">
                        Analitik Çerezler
                      </Label>
                      <Checkbox
                        id="analytics"
                        checked={consents.analytics}
                        onCheckedChange={(checked) =>
                          setConsents({ ...consents, analytics: checked as boolean })
                        }
                      />
                    </div>
                    <p className="text-sm text-muted-foreground">
                      Web sitesi kullanımını analiz etmemize ve performansı iyileştirmemize yardımcı olur.
                    </p>
                  </div>
                </div>

                {/* Pazarlama Çerezleri */}
                <div className="flex items-start gap-3 rounded-lg border p-4">
                  <Mail className="mt-1 h-5 w-5 text-primary" />
                  <div className="flex-1 space-y-1">
                    <div className="flex items-center justify-between">
                      <Label htmlFor="marketing" className="text-base font-semibold">
                        Pazarlama Çerezleri
                      </Label>
                      <Checkbox
                        id="marketing"
                        checked={consents.marketing}
                        onCheckedChange={(checked) =>
                          setConsents({ ...consents, marketing: checked as boolean })
                        }
                      />
                    </div>
                    <p className="text-sm text-muted-foreground">
                      Size özel teklifler ve kampanyalar hakkında bilgilendirme yapmamızı sağlar.
                    </p>
                  </div>
                </div>

                <p className="text-xs text-muted-foreground">
                  Daha fazla bilgi için{' '}
                  <a href="/privacy" className="text-primary underline">
                    Gizlilik Politikamızı
                  </a>{' '}
                  ve{' '}
                  <a href="/terms" className="text-primary underline">
                    Kullanım Koşullarımızı
                  </a>{' '}
                  inceleyebilirsiniz.
                </p>
              </CardContent>
              <CardFooter className="flex flex-col gap-2 sm:flex-row">
                <Button onClick={handleSavePreferences} className="flex-1">
                  Tercihleri Kaydet
                </Button>
                <Button onClick={() => setShowDetails(false)} variant="outline" className="flex-1">
                  Geri
                </Button>
              </CardFooter>
            </>
          )}
        </Card>
      </motion.div>
    </AnimatePresence>
  );
}
