import React, { useState, useEffect } from 'react';
import { SettingsLayout } from '@/routes/Settings/components/SettingsLayout';
import { SettingsCard } from '@/routes/Settings/components/SettingsCard';
import { SettingsSection } from '@/routes/Settings/components/SettingsSection';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { toast } from 'sonner';
import { api } from '@/lib/api';

export default function AppearanceAccount() {
  const [loading, setLoading] = useState(true);
  const [navigationStyle, setNavigationStyle] = useState('sidebar');
  
  const [elements, setElements] = useState({
    dashboard: true,
    orders: true,
    downloads: false,
    addresses: true,
    account_details: true,
  });

  useEffect(() => {
    const loadSettings = async () => {
      try {
        const response = await api.get('/appearance/settings');
        const account = response.data?.pages?.account;
        
        if (account) {
          if (account.layout?.navigation_style) setNavigationStyle(account.layout.navigation_style);
          if (account.elements) setElements(account.elements);
        }
      } catch (error) {
        console.error('Failed to load settings:', error);
      } finally {
        setLoading(false);
      }
    };
    
    loadSettings();
  }, []);

  const toggleElement = (key: keyof typeof elements) => {
    setElements({ ...elements, [key]: !elements[key] });
  };

  const handleSave = async () => {
    try {
      await api.post('/appearance/pages/account', {
        layout: { navigation_style: navigationStyle },
        elements,
      });
      toast.success('My account settings saved successfully');
    } catch (error) {
      console.error('Save error:', error);
      toast.error('Failed to save settings');
    }
  };

  return (
    <SettingsLayout
      title="My Account Settings"
      onSave={handleSave}
      isLoading={loading}
    >
      <SettingsCard
        title="Layout"
        description="Configure my account page layout"
      >
        <SettingsSection label="Navigation Style" htmlFor="navigation-style">
          <Select value={navigationStyle} onValueChange={setNavigationStyle}>
            <SelectTrigger id="navigation-style">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="sidebar">Sidebar</SelectItem>
              <SelectItem value="tabs">Tabs</SelectItem>
              <SelectItem value="dropdown">Dropdown</SelectItem>
            </SelectContent>
          </Select>
        </SettingsSection>
      </SettingsCard>

      <SettingsCard
        title="Elements"
        description="Choose which sections to display in my account"
      >
        <div className="flex items-center justify-between">
          <Label htmlFor="element-dashboard" className="cursor-pointer">
            Show dashboard
          </Label>
          <Switch
            id="element-dashboard"
            checked={elements.dashboard}
            onCheckedChange={() => toggleElement('dashboard')}
          />
        </div>

        <div className="flex items-center justify-between">
          <Label htmlFor="element-orders" className="cursor-pointer">
            Show orders
          </Label>
          <Switch
            id="element-orders"
            checked={elements.orders}
            onCheckedChange={() => toggleElement('orders')}
          />
        </div>

        <div className="flex items-center justify-between">
          <Label htmlFor="element-downloads" className="cursor-pointer">
            Show downloads
          </Label>
          <Switch
            id="element-downloads"
            checked={elements.downloads}
            onCheckedChange={() => toggleElement('downloads')}
          />
        </div>

        <div className="flex items-center justify-between">
          <Label htmlFor="element-addresses" className="cursor-pointer">
            Show addresses
          </Label>
          <Switch
            id="element-addresses"
            checked={elements.addresses}
            onCheckedChange={() => toggleElement('addresses')}
          />
        </div>

        <div className="flex items-center justify-between">
          <Label htmlFor="element-accountDetails" className="cursor-pointer">
            Show account details
          </Label>
          <Switch
            id="element-account-details"
            checked={elements.account_details}
            onCheckedChange={() => toggleElement('account_details')}
          />
        </div>
      </SettingsCard>
    </SettingsLayout>
  );
}
