'use client';

import { useState, useEffect } from 'react';
import { t, getLocaleFromPath } from '@/lib/i18n';
import { usePathname } from 'next/navigation';
import { Card, CardBody, CardFooter } from '@/components/ui';
import { Button } from '@/components/ui';

export function CookieConsent() {
  const [showBanner, setShowBanner] = useState(false);
  const [isMounted, setIsMounted] = useState(false);
  const [isAnimating, setIsAnimating] = useState(false);
  const pathname = usePathname();
  const locale = getLocaleFromPath(pathname);

  useEffect(() => {
    setIsMounted(true);
    const consent = localStorage.getItem('cookie-consent');
    if (!consent) {
      // Small delay to ensure smooth entrance animation
      setTimeout(() => {
        setShowBanner(true);
        setIsAnimating(true);
      }, 500);
    }
  }, []);

  const handleAccept = () => {
    localStorage.setItem('cookie-consent', 'accepted');
    setIsAnimating(false);
    setTimeout(() => setShowBanner(false), 300);
  };

  const handleDecline = () => {
    localStorage.setItem('cookie-consent', 'declined');
    setIsAnimating(false);
    setTimeout(() => setShowBanner(false), 300);
  };

  if (!isMounted || !showBanner) {
    return null;
  }

  return (
    <div className={`fixed bottom-0 left-0 right-0 z-50 px-4 pb-4 md:pb-6 transition-all duration-300 ${
      isAnimating ? 'translate-y-0 opacity-100' : 'translate-y-full opacity-0'
    }`}>
      <div className="max-w-7xl mx-auto">
        <Card 
          variant="elevated" 
          padding="md"
          className="border-primary/20 shadow-xl"
        >
          <CardBody>
            <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
              <div className="flex-1">
                <p className="text-sm text-gray-700 leading-relaxed">
                  {t('cookieConsent.message', locale)}{' '}
                  <a 
                    href="/privacy-policy" 
                    className="text-primary hover:text-primary-dark underline ml-1 font-medium transition-colors"
                  >
                    {t('cookieConsent.privacyPolicy', locale)}
                  </a>
                </p>
              </div>
              <div className="flex gap-3 w-full md:w-auto">
                <Button
                  variant="outline"
                  size="sm"
                  onClick={handleDecline}
                  className="flex-1 md:flex-none"
                >
                  {t('cookieConsent.decline', locale)}
                </Button>
                <Button
                  variant="primary"
                  size="sm"
                  onClick={handleAccept}
                  className="flex-1 md:flex-none"
                >
                  {t('cookieConsent.accept', locale)}
                </Button>
              </div>
            </div>
          </CardBody>
        </Card>
      </div>
    </div>
  );
}