import { useState } from 'react';
import { useSettings } from '../../hooks/useSettings';
import GeneralSettings from './GeneralSettings';
import EmailSettings from './EmailSettings';
import AdvancedSettings from './AdvancedSettings';
import Button from '../UI/Button';

const TABS = [
  { id: 'general',  label: 'General',          icon: '⚙️' },
  { id: 'email',    label: 'Email',             icon: '📧' },
  { id: 'advanced', label: 'Advanced',          icon: '🔧' },
];

export default function Settings({ isPro }) {
  const [activeTab, setActiveTab] = useState('general');
  const { settings, loading, saving, saved, error, save, update } = useSettings();

  const handleSave = async () => await save(settings);

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="flex flex-col items-center gap-3">
          <div className="rf-spinner" />
          <p className="text-sm text-slate-500">Loading settings…</p>
        </div>
      </div>
    );
  }

  return (
    <div className="space-y-5">
      {/* Page header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-xl font-bold text-slate-900">Settings</h2>
          <p className="text-sm text-slate-500 mt-0.5">Configure RescueFill to fit your workflow.</p>
        </div>
        <div className="flex items-center gap-3">
          {saved && (
            <span className="flex items-center gap-1.5 text-sm text-emerald-700 bg-emerald-50 border border-emerald-200 px-3 py-1.5 rounded-lg font-medium">
              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
              Saved!
            </span>
          )}
          {error && <span className="text-sm text-red-600">{error}</span>}
          <Button variant="primary" onClick={handleSave} loading={saving}>Save Settings</Button>
        </div>
      </div>

      {/* Tabs + Panel */}
      <div className="bg-white rounded-xl border border-slate-200 overflow-hidden" style={{ boxShadow: '0 1px 3px rgba(0,0,0,0.06)' }}>
        <div className="flex border-b border-slate-200 bg-slate-50 overflow-x-auto">
          {TABS.map(tab => (
            <button key={tab.id} onClick={() => setActiveTab(tab.id)}
              className={`flex items-center gap-1.5 px-5 py-3.5 text-sm whitespace-nowrap transition-colors relative ${
                activeTab === tab.id ? 'text-indigo-700 font-semibold bg-white' : 'text-slate-600 font-medium hover:text-slate-900 hover:bg-slate-100'
              }`}>
              <span className="text-base leading-none">{tab.icon}</span>
              {tab.label}
              {activeTab === tab.id && <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-indigo-600" />}
            </button>
          ))}
        </div>

        <div className="p-6">
          {activeTab === 'general'  && <GeneralSettings settings={settings} onChange={update} />}
          {activeTab === 'email'    && <EmailSettings settings={settings} onChange={update} isPro={isPro} />}
          {activeTab === 'advanced' && <AdvancedSettings settings={settings} onChange={update} isPro={isPro} />}
        </div>
      </div>

      {/* Bottom save bar */}
      <div className="flex items-center justify-end gap-3">
        {saved && (
          <span className="flex items-center gap-1.5 text-sm text-emerald-700 font-medium">
            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
            Settings saved
          </span>
        )}
        <Button variant="primary" size="lg" onClick={handleSave} loading={saving}>Save Settings</Button>
      </div>
    </div>
  );
}