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';

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="General Settings - IGNY8" description="Plugin configuration" />
      
      <ComponentCard title="General Settings" desc="Configure plugin settings, automation, and table 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>
                <input
                  id="records_per_page"
                  type="number"
                  min="5"
                  max="100"
                  className="h-9 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm shadow-theme-xs text-gray-800 placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
                  value={tableSettings.records_per_page}
                  onChange={(e) => setTableSettings({
                    ...tableSettings,
                    records_per_page: parseInt(e.target.value) || 20
                  })}
                />
              </div>
              
              <div>
                <Label htmlFor="default_sort">Default Sort Field</Label>
                <input
                  id="default_sort"
                  type="text"
                  className="h-9 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm shadow-theme-xs text-gray-800 placeholder:text-gray-400 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800"
                  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
                  id="default_sort_direction"
                  className="h-9 w-full rounded-lg border border-gray-300 bg-transparent px-3 py-2 text-sm shadow-theme-xs text-gray-800 focus:border-brand-300 focus:outline-hidden focus:ring-3 focus:ring-brand-500/10 dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800"
                  value={tableSettings.default_sort_direction}
                  onChange={(e) => setTableSettings({
                    ...tableSettings,
                    default_sort_direction: e.target.value as 'asc' | 'desc'
                  })}
                >
                  <option value="asc">Ascending</option>
                  <option value="desc">Descending</option>
                </select>
              </div>
            </div>
          </div>
          
          <div className="flex justify-end">
            <Button
              onClick={handleSave}
              disabled={loading}
              className="px-6"
            >
              {loading ? 'Saving...' : 'Save Settings'}
            </Button>
          </div>
        </div>
      </ComponentCard>
    </>
  );
}

