'use client';

import { useState, useEffect } from 'react';
import { AppSettings } from '@/lib/types';

export default function SettingsPage() {
  const [settings, setSettings] = useState<AppSettings | null>(null);
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);

  useEffect(() => {
    fetch('/api/settings')
      .then((r) => r.json())
      .then(setSettings);
  }, []);

  const update = (field: keyof AppSettings, value: unknown) => {
    if (!settings) return;
    setSettings({ ...settings, [field]: value });
    setSaved(false);
  };

  const handleSave = async () => {
    if (!settings) return;
    setSaving(true);
    try {
      await fetch('/api/settings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(settings),
      });
      setSaved(true);
      setTimeout(() => setSaved(false), 3000);
    } finally {
      setSaving(false);
    }
  };

  if (!settings) {
    return <div className="max-w-2xl mx-auto px-4 py-8 text-white/60">Loading...</div>;
  }

  return (
    <div className="max-w-2xl mx-auto px-4 py-8">
      <h1 className="text-3xl font-display font-bold text-poker-gold mb-6">Settings</h1>

      <div className="card mb-6 space-y-4">
        <h2 className="text-xl font-semibold text-poker-gold">Organization</h2>
        <div>
          <label className="block text-sm text-white/60 mb-1">Organization Name</label>
          <input
            className="input-field"
            value={settings.organizationName}
            onChange={(e) => update('organizationName', e.target.value)}
          />
        </div>
      </div>

      <div className="card mb-6 space-y-4">
        <h2 className="text-xl font-semibold text-poker-gold">Tournament Defaults</h2>
        <div className="grid grid-cols-2 gap-4">
          <div>
            <label className="block text-sm text-white/60 mb-1">Default Buy-In ($)</label>
            <input className="input-field" type="number" value={settings.defaultBuyIn} onChange={(e) => update('defaultBuyIn', Number(e.target.value))} />
          </div>
          <div>
            <label className="block text-sm text-white/60 mb-1">Starting Chips</label>
            <input className="input-field" type="number" value={settings.defaultStartingChips} onChange={(e) => update('defaultStartingChips', Number(e.target.value))} />
          </div>
          <div>
            <label className="block text-sm text-white/60 mb-1">Rebuy Chips</label>
            <input className="input-field" type="number" value={settings.defaultRebuyChips} onChange={(e) => update('defaultRebuyChips', Number(e.target.value))} />
          </div>
          <div>
            <label className="block text-sm text-white/60 mb-1">Addon Chips</label>
            <input className="input-field" type="number" value={settings.defaultAddonChips} onChange={(e) => update('defaultAddonChips', Number(e.target.value))} />
          </div>
        </div>
        <div className="flex flex-wrap gap-6">
          <label className="flex items-center gap-3 cursor-pointer">
            <input type="checkbox" checked={settings.defaultRebuysEnabled} onChange={(e) => update('defaultRebuysEnabled', e.target.checked)} className="w-5 h-5 accent-poker-gold" />
            <span>Rebuys Enabled by Default</span>
          </label>
          <label className="flex items-center gap-3 cursor-pointer">
            <input type="checkbox" checked={settings.defaultAddonsEnabled} onChange={(e) => update('defaultAddonsEnabled', e.target.checked)} className="w-5 h-5 accent-poker-gold" />
            <span>Addons Enabled by Default</span>
          </label>
        </div>
      </div>

      <div className="card mb-6 space-y-4">
        <h2 className="text-xl font-semibold text-poker-gold">Alerts & Speech</h2>
        <label className="flex items-center gap-3 cursor-pointer">
          <input type="checkbox" checked={settings.speechEnabled} onChange={(e) => update('speechEnabled', e.target.checked)} className="w-5 h-5 accent-poker-gold" />
          <span>Web Speech API Announcements</span>
        </label>
        <label className="flex items-center gap-3 cursor-pointer">
          <input type="checkbox" checked={settings.alarmEnabled} onChange={(e) => update('alarmEnabled', e.target.checked)} className="w-5 h-5 accent-poker-gold" />
          <span>Air-Raid Siren Alarm on Level End</span>
        </label>
        <div>
          <label className="block text-sm text-white/60 mb-1">Warning Minutes Before Level End</label>
          <input className="input-field w-32" type="number" min={1} max={5} value={settings.warningMinutes} onChange={(e) => update('warningMinutes', Number(e.target.value))} />
        </div>
      </div>

      <div className="card mb-6 space-y-4">
        <h2 className="text-xl font-semibold text-poker-gold">Server</h2>
        <div>
          <label className="block text-sm text-white/60 mb-1">Server Port</label>
          <input className="input-field w-32" type="number" value={settings.serverPort} onChange={(e) => update('serverPort', Number(e.target.value))} />
          <p className="text-xs text-white/40 mt-1">Restart server after changing port.</p>
        </div>
      </div>

      <button onClick={handleSave} disabled={saving} className="btn-primary w-full py-3">
        {saving ? 'Saving...' : saved ? '✓ Saved!' : 'Save Settings'}
      </button>
    </div>
  );
}