'use client';

import React, { useState, useEffect } from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';

export default function CookieBanner() {
  const [showBanner, setShowBanner] = useState(false);

  useEffect(() => {
    // Check if user has already made a choice
    const cookieConsent = localStorage.getItem('cookieConsent');
    if (!cookieConsent) {
      // Show banner after a short delay for better UX
      const timer = setTimeout(() => {
        setShowBanner(true);
      }, 1000);
      return () => clearTimeout(timer);
    }
  }, []);

  const handleAccept = () => {
    localStorage.setItem('cookieConsent', 'accepted');
    setShowBanner(false);
    // Reload page to initialize PostHog
    window.location.reload();
  };

  const handleDecline = () => {
    localStorage.setItem('cookieConsent', 'declined');
    setShowBanner(false);
  };

  return (
    <div suppressHydrationWarning>
      {showBanner && (
        <>
          {/* Cookie Banner - Bottom Left Corner */}
          <div className="fixed bottom-4 left-4 z-50 max-w-md animate-slide-in">
        <div className="bg-white rounded-lg shadow-2xl border border-gray-200 p-6">
          <div className="flex items-start gap-3 mb-4">
            <div className="flex-shrink-0">
              <svg className="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
              </svg>
            </div>
            <div>
              <h3 className="text-base font-semibold text-gray-900 mb-2">
                We use cookies
              </h3>
              <p className="text-gray-600 text-sm leading-relaxed mb-3">
                We use essential cookies for authentication and analytics cookies to improve your experience.{' '}
                <Link href="/privacy" className="text-primary-600 hover:text-primary-700 font-medium underline">
                  Learn more about our privacy policy
                </Link>
              </p>

              {/* Cookie Categories */}
              <div className="space-y-1.5 mb-4">
                <div className="flex items-center text-xs">
                  <svg className="w-3.5 h-3.5 text-success-600 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                  <span className="text-gray-700"><strong>Essential:</strong> Authentication, CSRF protection</span>
                </div>
                <div className="flex items-center text-xs">
                  <svg className="w-3.5 h-3.5 text-primary-600 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                  <span className="text-gray-700"><strong>Analytics:</strong> PostHog for website analytics</span>
                </div>
              </div>
            </div>
          </div>

          {/* Actions */}
          <div className="flex gap-2">
            <Button
              variant="outline"
              onClick={handleDecline}
              size="sm"
              className="flex-1"
            >
              Decline
            </Button>
            <Button
              variant="primary"
              onClick={handleAccept}
              size="sm"
              className="flex-1"
            >
              Accept All
            </Button>
          </div>
        </div>
      </div>

      <style jsx>{`
        @keyframes slide-in {
          from {
            transform: translateX(-100%);
            opacity: 0;
          }
          to {
            transform: translateX(0);
            opacity: 1;
          }
        }

        .animate-slide-in {
          animation: slide-in 0.4s ease-out;
        }
      `}</style>
        </>
      )}
    </div>
  );
}