'use client';

import { useState } from 'react';
import { getSettings, saveSettings, resetSettings, type PortalSettings } from '@/lib/storage';
import PortalLayout from '@/app/layout-portal';
import {
  Settings, Globe, Server, HardDrive, RefreshCw,
  Sun, Moon, Save, RotateCcw, Check, AlertTriangle,
} from 'lucide-react';

/* ── Helpers ── */

function formatStorageMB(mb: number): string {
  if (mb >= 1024) return (mb / 1024).toFixed(0) + ' GB';
  return mb + ' MB';
}

/* ════════════════════════════ Page ════════════════════════════ */

export default function SettingsPage() {
  const [form, setForm] = useState<PortalSettings>(() => getSettings());
  const [original, setOriginal] = useState<PortalSettings>(() => getSettings());
  const [saved, setSaved] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [validation, setValidation] = useState<Record<string, string | null>>({});

  const dirty = JSON.stringify(form) !== JSON.stringify(original);

  /* ── Field update ── */
  function update<K extends keyof PortalSettings>(key: K, value: PortalSettings[K]) {
    setForm(prev => ({ ...prev, [key]: value }));
    setSaved(false);
    setError(null);

    // Clear validation error on change
    if (validation[key]) {
      setValidation(prev => ({ ...prev, [key]: null }));
    }
  }

  /* ── Validate ── */
  function validate(): boolean {
    const errs: Record<string, string | null> = {};
    let valid = true;

    if (!form.gatewayUrl.startsWith('http://') && !form.gatewayUrl.startsWith('https://')) {
      errs.gatewayUrl = 'Must start with http:// or https://';
      valid = false;
    }
    if (form.gatewayUrl.length > 500) {
      errs.gatewayUrl = 'Too long (max 500 chars)';
      valid = false;
    }
    if (form.apiEndpoint && !form.apiEndpoint.startsWith('/') && !form.apiEndpoint.startsWith('http')) {
      errs.apiEndpoint = 'Must be empty, a path (/…), or a URL';
      valid = false;
    }
    if (form.storageMax < 1 || form.storageMax > 102400) {
      errs.storageMax = 'Must be 1–102400 MB';
      valid = false;
    }
    if (form.refreshInterval < 5 || form.refreshInterval > 300) {
      errs.refreshInterval = 'Must be 5–300 seconds';
      valid = false;
    }

    setValidation(errs);
    if (!valid) setError('Fix validation errors before saving');
    return valid;
  }

  /* ── Save ── */
  function handleSave() {
    if (!validate()) return;
    const merged = saveSettings(form);
    setForm(merged);
    setOriginal({ ...merged });
    setSaved(true);
    setError(null);
    setTimeout(() => setSaved(false), 2500);
  }

  /* ── Reset ── */
  function handleReset() {
    if (!confirm('Reset all settings to defaults?')) return;
    const defaults = resetSettings();
    setForm(defaults);
    setOriginal({ ...defaults });
    setSaved(false);
    setError(null);
    setValidation({});
  }

  /* ── Render helpers ── */

  function inputCls(field: string): string {
    return `w-full rounded-lg bg-surface-900 border ${validation[field] ? 'border-accent-rose/50' : 'border-surface-700'} px-3 py-2 text-sm text-surface-200 placeholder:text-surface-500 focus:outline-none focus:border-brand-500 focus:ring-1 focus:ring-brand-500 transition-colors`;
  }

  function errorMsg(field: string) {
    return validation[field] ? (
      <p className="mt-1 text-xs text-accent-rose">{validation[field]}</p>
    ) : null;
  }

  /* ════════════ Sections ════════════ */

  const sections = [
    {
      title: 'IPFS Gateway',
      icon: Globe,
      iconColor: 'text-accent-cyan',
      fields: (
        <div>
          <label className="text-xs text-surface-400 mb-1.5 block">Gateway URL</label>
          <input
            value={form.gatewayUrl}
            onChange={e => update('gatewayUrl', e.target.value)}
            placeholder="https://ipfs.io/ipfs"
            className={inputCls('gatewayUrl')}
          />
          {errorMsg('gatewayUrl')}
          <p className="mt-1.5 text-[11px] text-surface-500">
            Base URL for IPFS gateway links. Used in dashboard, history, and share links.
          </p>
        </div>
      ),
    },
    {
      title: 'API Endpoint',
      icon: Server,
      iconColor: 'text-accent-purple',
      fields: (
        <div>
          <label className="text-xs text-surface-400 mb-1.5 block">API Base URL</label>
          <input
            value={form.apiEndpoint}
            onChange={e => update('apiEndpoint', e.target.value)}
            placeholder="(same-origin)"
            className={inputCls('apiEndpoint')}
          />
          {errorMsg('apiEndpoint')}
          <p className="mt-1.5 text-[11px] text-surface-500">
            Leave empty to use the same origin. Set to a custom URL to proxy through another server.
          </p>
        </div>
      ),
    },
    {
      title: 'Storage',
      icon: HardDrive,
      iconColor: 'text-accent-amber',
      fields: (
        <div>
          <label className="text-xs text-surface-400 mb-1.5 block">
            Max Storage: <span className="text-surface-200 font-medium">{formatStorageMB(form.storageMax)}</span>
          </label>
          <div className="flex items-center gap-3">
            <input
              type="range"
              min={1024}
              max={102400}
              step={1024}
              value={form.storageMax}
              onChange={e => update('storageMax', Number(e.target.value))}
              className="flex-1 accent-brand-500 h-1.5 rounded-full appearance-none bg-surface-700 cursor-pointer"
              style={{ accentColor: '#14b8a6' }}
            />
            <input
              type="number"
              min={1}
              max={102400}
              value={form.storageMax}
              onChange={e => update('storageMax', Math.max(1, Math.min(102400, Number(e.target.value) || 0)))}
              className="w-20 rounded-lg bg-surface-900 border border-surface-700 px-2 py-1.5 text-xs text-surface-200 text-center focus:outline-none focus:border-brand-500"
            />
            <span className="text-xs text-surface-500">MB</span>
          </div>
          {errorMsg('storageMax')}
          <p className="mt-1.5 text-[11px] text-surface-500">
            Maximum storage the IPFS node should use. Applied server-side.
          </p>
        </div>
      ),
    },
    {
      title: 'Auto-Refresh',
      icon: RefreshCw,
      iconColor: 'text-accent-green',
      fields: (
        <div>
          <label className="text-xs text-surface-400 mb-1.5 block">
            Dashboard Refresh: <span className="text-surface-200 font-medium">{form.refreshInterval}s</span>
          </label>
          <div className="flex items-center gap-3">
            <input
              type="range"
              min={5}
              max={120}
              step={5}
              value={form.refreshInterval}
              onChange={e => update('refreshInterval', Number(e.target.value))}
              className="flex-1 accent-brand-500 h-1.5 rounded-full appearance-none bg-surface-700 cursor-pointer"
              style={{ accentColor: '#14b8a6' }}
            />
            <input
              type="number"
              min={5}
              max={120}
              value={form.refreshInterval}
              onChange={e => update('refreshInterval', Math.max(5, Math.min(120, Number(e.target.value) || 0)))}
              className="w-16 rounded-lg bg-surface-900 border border-surface-700 px-2 py-1.5 text-xs text-surface-200 text-center focus:outline-none focus:border-brand-500"
            />
            <span className="text-xs text-surface-500">sec</span>
          </div>
          {errorMsg('refreshInterval')}
          <p className="mt-1.5 text-[11px] text-surface-500">
            How often the dashboard auto-refreshes peer/bandwidth data.
          </p>
        </div>
      ),
    },
    {
      title: 'Theme',
      icon: form.theme === 'dark' ? Moon : Sun,
      iconColor: 'text-accent-amber',
      fields: (
        <div>
          <label className="text-xs text-surface-400 mb-2 block">Appearance</label>
          <div className="flex gap-2">
            {(['dark', 'light'] as const).map(theme => (
              <button
                key={theme}
                onClick={() => update('theme', theme)}
                className={`flex items-center gap-2 px-4 py-2.5 rounded-lg text-sm font-medium transition-colors ${
                  form.theme === theme
                    ? 'bg-brand-500/20 text-brand-400 border border-brand-500/30'
                    : 'bg-surface-900 text-surface-400 border border-surface-700 hover:border-surface-500'
                }`}
              >
                {theme === 'dark' ? <Moon className="w-4 h-4" /> : <Sun className="w-4 h-4" />}
                {theme.charAt(0).toUpperCase() + theme.slice(1)}
              </button>
            ))}
          </div>
          <p className="mt-1.5 text-[11px] text-surface-500">
            Theme preference is saved but only affects new sessions. Full theme switching coming soon.
          </p>
        </div>
      ),
    },
  ];

  return (
    <PortalLayout>
      {/* ── Header ── */}
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-white">Settings</h1>
        <p className="text-sm text-surface-400 mt-1">IPFS Portal configuration</p>
      </div>

      {/* ── Settings grid ── */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        {sections.map((s) => (
          <div key={s.title} className="glass rounded-xl p-5 animate-fade-in">
            <div className="flex items-center gap-2 mb-4">
              <s.icon className={`w-4 h-4 ${s.iconColor}`} />
              <h2 className="text-sm font-semibold text-white">{s.title}</h2>
            </div>
            {s.fields}
          </div>
        ))}
      </div>

      {/* ── Actions + status ── */}
      <div className="glass rounded-xl p-5 animate-fade-in">
        <div className="flex flex-wrap items-center gap-3">
          {/* Save */}
          <button
            onClick={handleSave}
            disabled={!dirty && !error}
            className="flex items-center gap-2 px-5 py-2.5 rounded-xl bg-brand-600 hover:bg-brand-500 disabled:opacity-40 disabled:cursor-not-allowed text-white text-sm font-medium transition-colors"
          >
            {saved ? (
              <><Check className="w-4 h-4 text-accent-green" /> Saved!</>
            ) : (
              <><Save className="w-4 h-4" /> Save Settings</>
            )}
          </button>

          {/* Reset */}
          <button
            onClick={handleReset}
            className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-surface-800 hover:bg-surface-700 text-surface-300 text-sm font-medium transition-colors"
          >
            <RotateCcw className="w-4 h-4" />
            Reset Defaults
          </button>

          {/* Dirty indicator */}
          {dirty && !saved && (
            <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-accent-amber/10 text-accent-amber text-xs">
              <AlertTriangle className="w-3 h-3" />
              Unsaved changes
            </span>
          )}

          {/* Error */}
          {error && (
            <span className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-accent-rose/10 text-accent-rose text-xs">
              <AlertTriangle className="w-3 h-3" />
              {error}
            </span>
          )}
        </div>
      </div>
    </PortalLayout>
  );
}