import { useState, useEffect } from 'react'
import { PageHeader } from '@/components/admin'
import { Textarea } from '@/components/ui/Textarea'
import { adminApi } from '@/api/admin'
import { toast } from '@/lib/toast'
import { cn } from '@/lib/utils'

export function SettingsPage() {
  const [settings, setSettings] = useState<Record<string, unknown>>({})
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)

  useEffect(() => {
    adminApi.listSettings()
      .then((data) => setSettings(data.settings || {}))
      .catch(() => toast.error('Failed to load settings'))
      .finally(() => setLoading(false))
  }, [])

  const maintenanceMode = Boolean(settings.maintenance_mode)
  const maintenanceMessage = String(settings.maintenance_message || '')
  const emailVerificationEnabled = settings.email_verification_enabled !== false

  const handleSave = async () => {
    setSaving(true)
    try {
      const data = await adminApi.updateSettings(settings)
      setSettings(data.settings || {})
      toast.success('Settings saved')
    } catch {
      toast.error('Failed to save settings')
    } finally {
      setSaving(false)
    }
  }

  if (loading) {
    return (
      <div className="space-y-6">
        <PageHeader title="Platform Settings" description="Global platform configuration" />
        <div className="h-40 animate-pulse rounded-lg bg-accent" />
      </div>
    )
  }

  return (
    <div className="space-y-6">
      <PageHeader title="Platform Settings" description="Global platform configuration" />

      <div className="max-w-xl space-y-6 bg-card border border-border rounded-xl p-6">
        <div className="flex items-center justify-between">
          <div>
            <h3 className="font-medium text-foreground">Email Verification</h3>
            <p className="text-sm text-muted-foreground">
              When enabled, unverified users see a banner prompting them to verify their email.
            </p>
          </div>
          <button
            onClick={() => setSettings({ ...settings, email_verification_enabled: !emailVerificationEnabled })}
            className={cn(
              'h-6 w-10 rounded-full transition-colors',
              emailVerificationEnabled ? 'bg-gradient-brand' : 'bg-accent'
            )}
          >
            <div className={cn(
              'h-4 w-4 rounded-full bg-white transition-transform',
              emailVerificationEnabled ? 'translate-x-5' : 'translate-x-1'
            )} />
          </button>
        </div>

        <div className="flex items-center justify-between">
          <div>
            <h3 className="font-medium text-foreground">Maintenance Mode</h3>
            <p className="text-sm text-muted-foreground">
              When enabled, users will see a maintenance message instead of the app.
            </p>
          </div>
          <button
            onClick={() => setSettings({ ...settings, maintenance_mode: !maintenanceMode })}
            className={cn(
              'h-6 w-10 rounded-full transition-colors',
              maintenanceMode ? 'bg-red-400' : 'bg-accent'
            )}
          >
            <div className={cn(
              'h-4 w-4 rounded-full bg-white transition-transform',
              maintenanceMode ? 'translate-x-5' : 'translate-x-1'
            )} />

          </button>
        </div>

        {maintenanceMode && (
          <div>
            <label className="mb-1 block text-sm font-medium text-foreground">Maintenance Message</label>
            <Textarea
              value={maintenanceMessage}
              onChange={(e) => setSettings({ ...settings, maintenance_message: e.target.value })}
              rows={3}
              placeholder="We're performing scheduled maintenance. Please check back later."
            />
          </div>
        )}

        <div className="border-t border-border pt-4">
          <button
            onClick={handleSave}
            disabled={saving}
            className={cn(
              'rounded-md px-4 py-2 text-sm font-medium',
              'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
              'disabled:opacity-50'
            )}
          >
            {saving ? 'Saving...' : 'Save Settings'}
          </button>
        </div>
      </div>
    </div>
  )
}

export default SettingsPage