"use client";

import React, { useState } from "react";
import { Checkbox } from "../ui/checkbox";
import { Button } from "../ui/button";
import {
  useUpdateAdsenseSetting,
  AdsenseSettingResponse,
} from "@/state/profile/profile.action";
import { useSession } from "next-auth/react";

interface AdsenseSettingProps {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  userData: any;
}

const AdsenseSetting = ({ userData }: AdsenseSettingProps) => {
  const { update } = useSession();
  const updateAdsense = useUpdateAdsenseSetting();

  const [settings, setSettings] = useState<AdsenseSettingResponse>({
    episode_enabled: userData?.episode_enabled ?? false,
    video_enabled: userData?.video_enabled ?? false,
    both_enabled: userData?.both_enabled ?? false,
    none_enabled: userData?.none_enabled ?? true,
  });

  const handleCheckboxChange = (key: keyof AdsenseSettingResponse) => {
    const newSettings: AdsenseSettingResponse = {
      episode_enabled: key === "episode_enabled",
      video_enabled: key === "video_enabled",
      both_enabled: key === "both_enabled",
      none_enabled: key === "none_enabled",
    };
    setSettings(newSettings);
  };

  const handleSubmit = () => {
    updateAdsense.mutate(
      { id: "", payload: settings },
      {
        onSuccess: () => {
          update(settings);
        },
      },
    );
  };

  const options: { label: string; key: keyof AdsenseSettingResponse }[] = [
    { label: "Episode Enabled", key: "episode_enabled" },
    { label: "Video Enabled", key: "video_enabled" },
    { label: "Both Enabled", key: "both_enabled" },
    { label: "None Enabled", key: "none_enabled" },
  ];

  return (
    <div className="w-full">
      <div className="flex justify-between items-center mb-5">
        <h5 className="text-[18px] text-[#D1D0CF] font-medium">
          Adsense Settings
        </h5>
      </div>
      <hr className="border-white opacity-10 my-5" />

      <div className="bg-[#1A1A1A] p-6 rounded-2xl flex flex-col gap-6">
        {options.map((option) => (
          <div key={option.key} className="flex items-center gap-3">
            <Checkbox
              id={option.key}
              checked={settings[option.key]}
              onCheckedChange={() => handleCheckboxChange(option.key)}
            />
            <label
              htmlFor={option.key}
              className="text-[#D1D0CF] text-sm cursor-pointer select-none"
            >
              {option.label}
            </label>
          </div>
        ))}
        <div className="mt-4">
          <Button
            onClick={handleSubmit}
            disabled={updateAdsense.isPending}
            className="w-full md:w-fit font-medium transition-all"
          >
            {updateAdsense.isPending ? "Updating..." : "Submit"}
          </Button>
        </div>
      </div>
    </div>
  );
};

export default AdsenseSetting;