'use client';

import { useEffect, useState } from 'react';
import { useI18n } from '../../components/I18nProvider';

type SiteSettings = {
  requireLoginForContactDetails: boolean;
};

export default function AdminSettingsPage() {
  const { t } = useI18n();
  const [settings, setSettings] = useState<SiteSettings | null>(null);
  const [loading, setLoading] = useState(true);
  const [saving, setSaving] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [message, setMessage] = useState<string | null>(null);
  const [isAdmin, setIsAdmin] = useState(false);

  useEffect(() => {
    async function load() {
      setLoading(true);
      setError(null);
      try {
        const meRes = await fetch('/api/auth/me', { cache: 'no-store' });
        const me = await meRes.json();
        if (me.user?.role !== 'ADMIN') {
          setError(t('adminRequired'));
          setLoading(false);
          return;
        }

        setIsAdmin(true);
        const res = await fetch('/api/admin/settings', { cache: 'no-store' });
        const data = await res.json();
        if (!res.ok) {
          setError(data.error || 'Failed to load settings');
        } else {
          setSettings(data.settings);
        }
      } catch (err) {
        console.error(err);
        setError('Failed to load settings');
      } finally {
        setLoading(false);
      }
    }

    load();
  }, [t]);

  async function save(next: Partial<SiteSettings>) {
    if (!isAdmin) return;
    setSaving(true);
    setMessage(null);
    setError(null);
    try {
      const res = await fetch('/api/admin/settings', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(next),
      });
      const data = await res.json();
      if (!res.ok) {
        setError(data.error || 'Failed to save settings');
      } else {
        setSettings(data.settings);
        setMessage(t('settingsSaved'));
      }
    } catch (err) {
      console.error(err);
      setError('Failed to save settings');
    } finally {
      setSaving(false);
    }
  }

  function toggleRequireLoginForContactDetails() {
    if (!settings) return;
    save({ requireLoginForContactDetails: !settings.requireLoginForContactDetails });
  }

  return (
    <main className="panel" style={{ maxWidth: 960, margin: '40px auto' }}>
      <h1>{t('adminSettingsTitle')}</h1>
      <p>{t('adminSettingsLead')}</p>
      {loading ? <p>{t('loading')}</p> : null}
      {message ? <p style={{ color: 'green' }}>{message}</p> : null}
      {error ? <p style={{ color: 'red' }}>{error}</p> : null}

      {!loading && settings ? (
        <div style={{ display: 'grid', gap: 16, marginTop: 16 }}>
          <section
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'flex-start',
              border: '1px solid #e5e7eb',
              borderRadius: 12,
              padding: 16,
              background: 'linear-gradient(135deg, rgba(14,165,233,0.08), rgba(30,64,175,0.08))',
            }}
          >
            <div style={{ maxWidth: 520 }}>
              <h2 style={{ margin: '0 0 8px' }}>{t('settingContactVisibilityTitle')}</h2>
              <p style={{ margin: 0, color: '#475569' }}>{t('settingContactVisibilityHelp')}</p>
            </div>
            <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontWeight: 600 }}>
              <input
                type="checkbox"
                checked={settings.requireLoginForContactDetails}
                onChange={toggleRequireLoginForContactDetails}
                disabled={saving}
              />
              <span>{t('settingRequireLoginForContact')}</span>
            </label>
          </section>
        </div>
      ) : null}
    </main>
  );
}