'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 & Google 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>
  );
}
