"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import { useLanguage } from "@/contexts/LanguageContext";
import { localizedPath } from "@/lib/localized-path";

export default function CookieConsent() {
  const { t, language } = useLanguage();
  const [visible, setVisible] = useState(false);

  useEffect(() => {
    const accepted = localStorage.getItem("cookie_consent");
    if (!accepted) setVisible(true);
  }, []);

  const accept = () => {
    localStorage.setItem("cookie_consent", "accepted");
    window.dispatchEvent(new Event("skylight-consent-change"));
    setVisible(false);
  };

  const decline = () => {
    localStorage.setItem("cookie_consent", "declined");
    localStorage.removeItem("skylight_first_touch_attribution");
    window.dispatchEvent(new Event("skylight-consent-change"));
    setVisible(false);
  };

  if (!visible) return null;

  const isRTL = language === "ar";

  return (
    <div className="cookie-banner" dir={isRTL ? "rtl" : "ltr"} role="dialog" aria-label={t("cookie.ariaLabel")}>
      <div className="cookie-inner">
        <div className="cookie-icon" aria-hidden>🍪</div>
        <div className="cookie-text">
          <p className="cookie-title">{t("cookie.title")}</p>
          <p className="cookie-desc">
            {t("cookie.desc")}{" "}
            <Link href={localizedPath("/privacy", language)} className="cookie-link">{t("cookie.privacyLink")}</Link>.
          </p>
        </div>
        <div className="cookie-actions">
          <button className="cookie-btn cookie-btn-accept" onClick={accept}>
            {t("cookie.accept")}
          </button>
          <button className="cookie-btn cookie-btn-decline" onClick={decline}>
            {t("cookie.decline")}
          </button>
        </div>
      </div>

      <style jsx>{`
        .cookie-banner {
          position: fixed;
          bottom: 24px;
          left: 50%;
          transform: translateX(-50%);
          z-index: 9999;
          width: calc(100% - 48px);
          max-width: 720px;
          background: rgba(18, 18, 28, 0.97);
          border: 1px solid rgba(102, 16, 242, 0.35);
          border-radius: 16px;
          box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
          backdrop-filter: blur(12px);
          padding: 20px 24px;
          animation: slideUp 0.35s ease;
        }
        @keyframes slideUp {
          from { opacity: 0; transform: translateX(-50%) translateY(20px); }
          to   { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
        .cookie-inner {
          display: flex;
          align-items: center;
          gap: 16px;
          flex-wrap: wrap;
        }
        .cookie-icon {
          font-size: 28px;
          flex-shrink: 0;
        }
        .cookie-text {
          flex: 1;
          min-width: 200px;
        }
        .cookie-title {
          font-size: 0.95rem;
          font-weight: 600;
          color: #fff;
          margin: 0 0 4px;
        }
        .cookie-desc {
          font-size: 0.82rem;
          color: rgba(255,255,255,0.65);
          margin: 0;
          line-height: 1.5;
        }
        .cookie-link {
          color: #8b5cf6;
          text-decoration: underline;
        }
        .cookie-actions {
          display: flex;
          gap: 10px;
          flex-shrink: 0;
        }
        .cookie-btn {
          padding: 9px 20px;
          border-radius: 8px;
          font-size: 0.88rem;
          font-weight: 600;
          cursor: pointer;
          border: none;
          transition: opacity 0.2s;
        }
        .cookie-btn:hover { opacity: 0.88; }
        .cookie-btn-accept {
          background: linear-gradient(135deg, #6610f2, #4a0bb3);
          color: #fff;
        }
        .cookie-btn-decline {
          background: rgba(255,255,255,0.08);
          color: rgba(255,255,255,0.75);
          border: 1px solid rgba(255,255,255,0.12);
        }
        @media (max-width: 540px) {
          .cookie-banner {
            bottom: 12px;
            width: calc(100% - 24px);
            padding: 16px;
          }
          .cookie-actions {
            width: 100%;
          }
          .cookie-btn {
            flex: 1;
            text-align: center;
          }
        }
      `}</style>
    </div>
  );
}