'use client';

import { useState } from 'react';
import { Settings, Bell, Shield, Code, Database, Globe, Save, CheckCircle } from 'lucide-react';

interface SettingsState {
  defaultLanguage: string;
  defaultDatabase: string;
  autoTest: boolean;
  autoFormat: boolean;
  notifications: boolean;
  emailAlerts: boolean;
  twoFactor: boolean;
  apiRateLimit: number;
}

export default function SettingsPage() {
  const [saved, setSaved] = useState(false);
  const [settings, setSettings] = useState<SettingsState>({
    defaultLanguage: 'typescript-react',
    defaultDatabase: 'postgresql',
    autoTest: true,
    autoFormat: true,
    notifications: true,
    emailAlerts: false,
    twoFactor: false,
    apiRateLimit: 100,
  });

  const handleSave = () => {
    setSaved(true);
    setTimeout(() => setSaved(false), 2000);
  };

  const Toggle = ({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) => (
    <button
      onClick={() => onChange(!checked)}
      className={`w-11 h-6 rounded-full transition-colors relative ${checked ? 'bg-sky-500' : 'bg-slate-700'}`}
    >
      <span className={`absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full transition-transform ${checked ? 'translate-x-5' : ''}`} />
    </button>
  );

  return (
    <div className="max-w-3xl mx-auto space-y-6">
      <div>
        <h1 className="text-2xl font-bold text-white flex items-center gap-2">
          <Settings className="w-6 h-6 text-gray-400" /> Settings
        </h1>
        <p className="text-gray-400 mt-1">Configure your The Hearth preferences</p>
      </div>

      {/* Code Generation */}
      <section className="p-5 bg-white/5 border border-slate-700 rounded-xl space-y-4">
        <h2 className="text-lg font-semibold text-white flex items-center gap-2">
          <Code className="w-5 h-5 text-sky-400" /> Code Generation
        </h2>
        <div className="space-y-3">
          <div>
            <label className="block text-sm text-gray-300 mb-1">Default Language</label>
            <select
              value={settings.defaultLanguage}
              onChange={e => setSettings(s => ({ ...s, defaultLanguage: e.target.value }))}
              className="w-full px-3 py-2 bg-black/30 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-sky-500"
            >
              <option value="typescript-react">TypeScript + React</option>
              <option value="python-fastapi">Python + FastAPI</option>
              <option value="java-spring">Java + Spring Boot</option>
              <option value="csharp-dotnet">C# + .NET</option>
              <option value="go">Go</option>
            </select>
          </div>
          <div>
            <label className="block text-sm text-gray-300 mb-1">Default Database</label>
            <select
              value={settings.defaultDatabase}
              onChange={e => setSettings(s => ({ ...s, defaultDatabase: e.target.value }))}
              className="w-full px-3 py-2 bg-black/30 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-sky-500"
            >
              <option value="postgresql">PostgreSQL</option>
              <option value="mysql">MySQL</option>
              <option value="mongodb">MongoDB</option>
              <option value="sqlite">SQLite</option>
            </select>
          </div>
          <div className="flex items-center justify-between">
            <div>
              <span className="text-gray-300">Auto-run tests</span>
              <p className="text-xs text-gray-500">Automatically run generated test suites</p>
            </div>
            <Toggle checked={settings.autoTest} onChange={v => setSettings(s => ({ ...s, autoTest: v }))} />
          </div>
          <div className="flex items-center justify-between">
            <div>
              <span className="text-gray-300">Auto-format code</span>
              <p className="text-xs text-gray-500">Apply Prettier/ESLint formatting after generation</p>
            </div>
            <Toggle checked={settings.autoFormat} onChange={v => setSettings(s => ({ ...s, autoFormat: v }))} />
          </div>
        </div>
      </section>

      {/* Notifications */}
      <section className="p-5 bg-white/5 border border-slate-700 rounded-xl space-y-4">
        <h2 className="text-lg font-semibold text-white flex items-center gap-2">
          <Bell className="w-5 h-5 text-amber-400" /> Notifications
        </h2>
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <div>
              <span className="text-gray-300">In-app notifications</span>
              <p className="text-xs text-gray-500">Get notified when tasks complete or fail</p>
            </div>
            <Toggle checked={settings.notifications} onChange={v => setSettings(s => ({ ...s, notifications: v }))} />
          </div>
          <div className="flex items-center justify-between">
            <div>
              <span className="text-gray-300">Email alerts</span>
              <p className="text-xs text-gray-500">Receive email for critical events</p>
            </div>
            <Toggle checked={settings.emailAlerts} onChange={v => setSettings(s => ({ ...s, emailAlerts: v }))} />
          </div>
        </div>
      </section>

      {/* Security */}
      <section className="p-5 bg-white/5 border border-slate-700 rounded-xl space-y-4">
        <h2 className="text-lg font-semibold text-white flex items-center gap-2">
          <Shield className="w-5 h-5 text-green-400" /> Security
        </h2>
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <div>
              <span className="text-gray-300">Two-factor authentication</span>
              <p className="text-xs text-gray-500">Add an extra layer of security</p>
            </div>
            <Toggle checked={settings.twoFactor} onChange={v => setSettings(s => ({ ...s, twoFactor: v }))} />
          </div>
          <div>
            <label className="block text-sm text-gray-300 mb-1">API Rate Limit (requests/min)</label>
            <input
              type="number"
              value={settings.apiRateLimit}
              onChange={e => setSettings(s => ({ ...s, apiRateLimit: parseInt(e.target.value) || 0 }))}
              className="w-32 px-3 py-2 bg-black/30 border border-slate-700 rounded-lg text-white focus:outline-none focus:border-sky-500"
            />
          </div>
        </div>
      </section>

      {/* Save */}
      <div className="flex items-center gap-3">
        <button
          onClick={handleSave}
          className="flex items-center gap-2 px-6 py-2.5 bg-sky-500 text-black rounded-lg font-medium hover:bg-sky-400 transition-colors"
        >
          {saved ? <CheckCircle className="w-4 h-4" /> : <Save className="w-4 h-4" />}
          {saved ? 'Saved!' : 'Save Settings'}
        </button>
      </div>
    </div>
  );
}
