import { Button } from "@xtablo/ui/components/button";
import { Card } from "@xtablo/ui/components/card";
import { Label } from "@xtablo/ui/components/label";
import { Switch } from "@xtablo/ui/components/switch";
import { X } from "lucide-react";
import * as React from "react";
import { useTranslation } from "react-i18next";

export interface CookiePreferences {
  essential: boolean;
  analytics: boolean;
  marketing: boolean;
}

export interface CookieBannerProps {
  onAcceptAll: () => void;
  onRejectAll: () => void;
  onSavePreferences: (preferences: CookiePreferences) => void;
  onClose?: () => void;
  showDetailsInitially?: boolean;
}

export const CookieBanner: React.FC<CookieBannerProps> = ({
  onAcceptAll,
  onRejectAll,
  onSavePreferences,
  onClose,
  showDetailsInitially = false,
}) => {
  const { t } = useTranslation("settings");
  const [showDetails, setShowDetails] = React.useState(showDetailsInitially);
  const [preferences, setPreferences] = React.useState<CookiePreferences>({
    essential: true,
    analytics: true,
    marketing: false,
  });

  const handlePreferenceChange = (key: keyof CookiePreferences, value: boolean) => {
    setPreferences((prev) => ({ ...prev, [key]: value }));
  };

  const handleSavePreferences = () => {
    onSavePreferences(preferences);
  };

  return (
    <div className="fixed bottom-4 right-4 z-50 w-[calc(100vw-2rem)] sm:w-auto max-w-md animate-in slide-in-from-bottom-5">
      <Card className="border-2 shadow-2xl py-0">
        <div className="relative p-4">
          {onClose && (
            <Button
              onClick={onClose}
              variant="ghost"
              size="sm"
              className="absolute right-2 top-2 h-6 w-6 p-0 opacity-70 hover:opacity-100"
              aria-label={t("cookieBanner.close")}
            >
              <X className="h-3 w-3" />
            </Button>
          )}

          <div className="pr-6">
            <h2 className="text-base font-semibold mb-1.5">{t("cookieBanner.title")}</h2>
            <p className="text-xs text-muted-foreground mb-3">{t("cookieBanner.description")}</p>
          </div>

          {!showDetails ? (
            <div className="flex flex-col gap-2">
              <Button onClick={onAcceptAll} size="sm" className="w-full">
                {t("cookieBanner.acceptAll")}
              </Button>
              <div className="flex gap-2">
                <Button onClick={onRejectAll} variant="outline" size="sm" className="flex-1">
                  {t("cookieBanner.rejectAll")}
                </Button>
                <Button
                  onClick={() => setShowDetails(true)}
                  variant="ghost"
                  size="sm"
                  className="flex-1"
                >
                  {t("cookieBanner.customize")}
                </Button>
              </div>
            </div>
          ) : (
            <div className="space-y-3">
              <div className="space-y-3 rounded-lg border p-3">
                <div className="flex items-center justify-between gap-3">
                  <div className="space-y-0.5 flex-1 min-w-0">
                    <Label className="text-xs font-medium">
                      {t("cookieBanner.essential.title")}
                    </Label>
                    <p className="text-[10px] text-muted-foreground leading-tight">
                      {t("cookieBanner.essential.description")}
                    </p>
                  </div>
                  <Switch
                    checked={true}
                    disabled
                    aria-label={t("cookieBanner.essential.ariaLabel")}
                  />
                </div>

                <div className="flex items-center justify-between gap-3">
                  <div className="space-y-0.5 flex-1 min-w-0">
                    <Label className="text-xs font-medium">
                      {t("cookieBanner.analytics.title")}
                    </Label>
                    <p className="text-[10px] text-muted-foreground leading-tight">
                      {t("cookieBanner.analytics.description")}
                    </p>
                  </div>
                  <Switch
                    checked={preferences.analytics}
                    onCheckedChange={(checked) => handlePreferenceChange("analytics", checked)}
                    aria-label={t("cookieBanner.analytics.ariaLabel")}
                  />
                </div>

                {/* <div className="flex items-center justify-between gap-3">
                  <div className="space-y-0.5 flex-1 min-w-0">
                    <Label className="text-xs font-medium">{t("cookieBanner.marketing.title")}</Label>
                    <p className="text-[10px] text-muted-foreground leading-tight">
                      {t("cookieBanner.marketing.description")}
                    </p>
                  </div>
                  <Switch
                    checked={preferences.marketing}
                    onCheckedChange={(checked) => handlePreferenceChange("marketing", checked)}
                    aria-label={t("cookieBanner.marketing.ariaLabel")}
                  />
                </div> */}
              </div>

              <div className="flex gap-2">
                <Button onClick={handleSavePreferences} size="sm" className="flex-1">
                  {t("cookieBanner.save")}
                </Button>
                <Button
                  onClick={() => setShowDetails(false)}
                  variant="outline"
                  size="sm"
                  className="flex-1"
                >
                  {t("cookieBanner.back")}
                </Button>
              </div>
            </div>
          )}
        </div>
      </Card>
    </div>
  );
};
