src/pages/Settings.tsx

import { useState, useEffect } from "react";
import { 
  User, Bell, Moon, Sun, CreditCard, Languages, 
  CircleHelp, ChevronRight, LogOut, Shield
} from "lucide-react";
import AppLayout from "@/components/layout/AppLayout";
import Header from "@/components/shared/Header";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { cn } from "@/lib/utils";
import { toast } from "sonner";
import { useTheme } from "@/components/theme/ThemeProvider";

const Settings = () => {
  const { theme, setTheme } = useTheme();
  const [isNotificationsEnabled, setIsNotificationsEnabled] = useState(true);
  
  const isDarkMode = theme === "dark";
  
  const toggleDarkMode = () => {
    const newTheme = isDarkMode ? "light" : "dark";
    setTheme(newTheme);
    toast.success(`${newTheme.charAt(0).toUpperCase() + newTheme.slice(1)} mode enabled`);
  };
  
  const handleLogout = () => {
    toast.success('Logged out successfully');
  };
  
  const SettingItem = ({ 
    icon: Icon, 
    label, 
    onClick, 
    rightElement = <ChevronRight size={18} className="text-muted-foreground" />,
    divider = true
  }: {
    icon: any;
    label: string;
    onClick?: () => void;
    rightElement?: React.ReactNode;
    divider?: boolean;
  }) => (
    <>
      <button
        onClick={onClick}
        className="flex items-center justify-between w-full py-3.5 hover:bg-muted/50 dark:hover:bg-violet-muted/10 transition-colors"
      >
        <div className="flex items-center">
          <div className="w-8 h-8 rounded-full bg-primary/10 dark:bg-violet/10 flex items-center justify-center mr-3">
            <Icon size={16} className="text-primary dark:text-violet" />
          </div>
          <span>{label}</span>
        </div>
        {rightElement}
      </button>
      {divider && <div className="h-px w-full bg-border dark:bg-violet-muted/20" />}
    </>
  );
  
  return (
    <AppLayout>
      <div className="max-w-md mx-auto">
        <Header 
          title="Settings"
          subtitle="Manage your preferences"
        />
        
        <div className="px-4 pb-6 space-y-6 animate-fade-in">
          <div className="rounded-xl border border-border dark:border-violet-muted/20 overflow-hidden bg-white/80 dark:bg-violet-darker/90 backdrop-blur-lg shadow-lg relative">
            <div className="absolute inset-0 z-0 opacity-5">
              <img 
                src="/lovable-uploads/efa85ef3-0e1e-44d2-bbd4-34fe8f8946e4.png" 
                alt="Settings background" 
                className="w-full h-full object-cover"
              />
            </div>
            <div className="relative z-10">
              <SettingItem 
                icon={User} 
                label="Account" 
              />
              
              <SettingItem 
                icon={Bell} 
                label="Notifications" 
                rightElement={
                  <Switch
                    checked={isNotificationsEnabled}
                    onCheckedChange={setIsNotificationsEnabled}
                  />
                }
              />
              
              <SettingItem 
                icon={isDarkMode ? Sun : Moon} 
                label="Dark Mode" 
                rightElement={
                  <Switch
                    checked={isDarkMode}
                    onCheckedChange={toggleDarkMode}
                  />
                }
              />
              
              <SettingItem 
                icon={CreditCard} 
                label="Payment Methods" 
              />
              
              <SettingItem 
                icon={Languages} 
                label="Language" 
                rightElement={
                  <div className="text-sm text-muted-foreground dark:text-violet-light/70 flex items-center">
                    <span>English</span>
                    <ChevronRight size={16} />
                  </div>
                }
              />
              
              <SettingItem 
                icon={Shield} 
                label="Privacy & Security" 
              />
              
              <SettingItem 
                icon={CircleHelp} 
                label="Help & Support" 
                divider={false}
              />
            </div>
          </div>
          
          <Button 
            variant="ghost"
            onClick={handleLogout}
            className="w-full py-6 text-red-500 hover:text-red-600 hover:bg-red-50/50 dark:hover:bg-red-900/20 border border-border dark:border-violet-muted/20 bg-white/80 dark:bg-violet-darker/90 backdrop-blur-sm shadow-md"
          >
            <LogOut size={16} className="mr-2" />
            Log Out
          </Button>
          
          <p className="text-xs text-center text-muted-foreground dark:text-violet-light/50">
            Flutter v1.0.0
          </p>
        </div>
      </div>
    </AppLayout>
  );
};

export default Settings;