"use client";

import { motion } from "framer-motion"
import { SideMenu } from "@/components/pages/dashboard/SideMenu"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Card } from "@/components/ui/card"
import { ChangePassword } from "@/components/cards/dashboard/Settings/ChangePassword"
import { useState, useEffect } from "react";

const fadeIn = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  transition: { duration: 0.4 },
}

export default function Settings() {
  const [settings, setSettings] = useState({
    hideGenAI: false,
    hideUpgrades: false,
    hideCrypto: false
  });
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchSettings = async () => {
      try {
        setLoading(true);
        const response = await fetch('/api/users/settings');
        if (response.ok) {
          const data = await response.json();
          setSettings(data);
        } else {
          console.error('[!] Failed to fetch settings');
        }
      } catch (error) {
        console.error('[!] Error fetching settings:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchSettings();
  }, []);

  const updateSetting = async (settingName: string, value: boolean) => {
    setSettings(prev => ({
      ...prev,
      [settingName]: value
    }));

    try {
      setLoading(true);
      const response = await fetch('/api/users/settings', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          ...settings,
          [settingName]: value
        }),
      });

      if (response.ok) {
        const updatedSettings = await response.json();
        setSettings(updatedSettings);
      } else {
        console.error('[!] Failed to update settings');
        setSettings(prev => ({
          ...prev,
          [settingName]: !value
        }));
      }
    } catch (error) {
      console.error('[!] Error updating settings:', error);
      setSettings(prev => ({
        ...prev,
        [settingName]: !value
      }));
    } finally {
      setLoading(false);
      window.location.reload();
    }
  };

  return (
    <div className="flex flex-1 overflow-hidden">
      <SideMenu />
      <main className="flex-1 w-full overflow-y-auto pl-0 lg:pl-64">
        <div className="container mx-auto px-4 py-6 w-full">
          <motion.div {...fadeIn}>
            <h1 className="text-3xl font-bold mb-6 text-foreground">Settings</h1>
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
              <ChangePassword />
              <Card className="p-6">
                <h2 className="text-xl font-semibold mb-4">UI Settings</h2>
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <Label htmlFor="hide-ai">Hide Generative AI</Label>
                    <Switch
                      id="hide-ai"
                      checked={settings.hideGenAI}
                      disabled={loading}
                      onCheckedChange={(checked) => updateSetting('hideGenAI', checked)}
                    />
                  </div>

                  <div className="flex items-center justify-between">
                    <Label htmlFor="hide-upgrades">Hide all upgrades/roles</Label>
                    <Switch
                      id="hide-upgrades"
                      checked={settings.hideUpgrades}
                      disabled={loading}
                      onCheckedChange={(checked) => updateSetting('hideUpgrades', checked)}
                    />
                  </div>

                  <div className="flex items-center justify-between">
                    <Label htmlFor="hide-crypto">Hide crypto exchange</Label>
                    <Switch
                      id="hide-crypto"
                      checked={settings.hideCrypto}
                      disabled={loading}
                      onCheckedChange={(checked) => updateSetting('hideCrypto', checked)}
                    />
                  </div>
                </div>
              </Card>
            </div>
          </motion.div>
        </div>
      </main>
    </div>
  )
}