import { useState, useEffect } from 'react';
import PageMeta from "../../components/common/PageMeta";
import ComponentCard from "../../components/common/ComponentCard";
import { useSettingsStore } from '../../store/settingsStore';
import { useToast } from '../../components/ui/toast/ToastContainer';
import Button from '../../components/ui/button/Button';
import Label from '../../components/form/Label';
import InputField from '../../components/form/input/InputField';
import Select from '../../components/form/Select';

export default function GeneralSettings() {
  const toast = useToast();
  const { accountSettings, loading, loadAccountSettings, updateAccountSetting } = useSettingsStore();
  
  // Form state
  const [tableSettings, setTableSettings] = useState({
    records_per_page: 20,
    default_sort: 'created_at',
    default_sort_direction: 'desc',
  });
  
  useEffect(() => {
    loadAccountSettings();
  }, [loadAccountSettings]);
  
  useEffect(() => {
    if (accountSettings['table_settings']) {
      setTableSettings(accountSettings['table_settings'].config);
    }
  }, [accountSettings]);
  
  const handleSave = async () => {
    try {
      await updateAccountSetting('table_settings', tableSettings);
      toast.success('Settings saved successfully');
    } catch (error: any) {
      toast.error(`Failed to save settings: ${error.message}`);
    }
  };
  
  return (
    <>
      <PageMeta title="App Preferences - IGNY8" description="Customize your IGNY8 experience" />
      
      <ComponentCard title="App Preferences" desc="Customize table views, automation settings, and interface preferences">
        <div className="space-y-6">
          {/* Table Settings */}
          <div className="space-y-4">
            <h3 className="text-lg font-semibold">Table Settings</h3>
            
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <Label htmlFor="records_per_page">Records Per Page</Label>
                <InputField
                  id="records_per_page"
                  type="number"
                  value={tableSettings.records_per_page.toString()}
                  onChange={(e) => setTableSettings({
                    ...tableSettings,
                    records_per_page: parseInt(e.target.value) || 20
                  })}
                />
              </div>
              
              <div>
                <Label htmlFor="default_sort">Default Sort Field</Label>
                <InputField
                  id="default_sort"
                  type="text"
                  value={tableSettings.default_sort}
                  onChange={(e) => setTableSettings({
                    ...tableSettings,
                    default_sort: e.target.value
                  })}
                />
              </div>
              
              <div>
                <Label htmlFor="default_sort_direction">Default Sort Direction</Label>
                <Select
                  options={[
                    { value: 'asc', label: 'Ascending' },
                    { value: 'desc', label: 'Descending' },
                  ]}
                  value={tableSettings.default_sort_direction}
                  onChange={(value) => setTableSettings({
                    ...tableSettings,
                    default_sort_direction: value as 'asc' | 'desc'
                  })}
                />
              </div>
            </div>
          </div>
          
          <div className="flex justify-end">
            <Button
              onClick={handleSave}
              disabled={loading}
              className="px-6"
            >
              {loading ? 'Saving...' : 'Save Settings'}
            </Button>
          </div>
        </div>
      </ComponentCard>
    </>
  );
}