'use client'

import { useEffect, useMemo, useState } from 'react'
import type { RuntimeSettingsRow } from '@/lib/types'

type ApiResponse = RuntimeSettingsRow

type FormState = {
  app_name: string
  business_name: string
  website_url: string
  support_email: string
  support_phone: string
  support_whatsapp: string
  wave_number: string
  orange_money_number: string
  subscription_price_fcfa: string
  payment_instructions: string
}

const emptyForm: FormState = {
  app_name: 'SenKredi',
  business_name: 'SenKredi',
  website_url: '',
  support_email: '',
  support_phone: '',
  support_whatsapp: '',
  wave_number: '',
  orange_money_number: '',
  subscription_price_fcfa: '10000',
  payment_instructions: '',
}

export function SettingsScreen() {
  const [form, setForm] = useState<FormState>(emptyForm)
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
  const [applying, setApplying] = useState(false)
  const [error, setError] = useState<string | null>(null)
  const [message, setMessage] = useState<string | null>(null)

  async function load() {
    setLoading(true)
    setError(null)

    const response = await fetch('/api/admin/runtime-settings', { cache: 'no-store' })
    const payload = (await response.json()) as ApiResponse | { error: string }

    if (!response.ok || 'error' in payload) {
      setError('error' in payload ? payload.error : 'Erreur de chargement')
      setLoading(false)
      return
    }

    setForm({
      app_name: payload.app_name ?? 'SenKredi',
      business_name: payload.business_name ?? 'SenKredi',
      website_url: payload.website_url ?? '',
      support_email: payload.support_email ?? '',
      support_phone: payload.support_phone ?? '',
      support_whatsapp: payload.support_whatsapp ?? '',
      wave_number: payload.wave_number ?? '',
      orange_money_number: payload.orange_money_number ?? '',
      subscription_price_fcfa: String(payload.subscription_price_fcfa ?? 10000),
      payment_instructions: payload.payment_instructions ?? '',
    })

    setLoading(false)
  }

  useEffect(() => {
    void load()
  }, [])

  const parsedPrice = useMemo(() => {
    const raw = Number(form.subscription_price_fcfa)
    return Number.isFinite(raw) && raw >= 0 ? raw : null
  }, [form.subscription_price_fcfa])

  function update<K extends keyof FormState>(key: K, value: FormState[K]) {
    setForm((current) => ({ ...current, [key]: value }))
  }

  async function handleSave(event: React.FormEvent) {
    event.preventDefault()

    if (parsedPrice === null) {
      setError('Le prix doit être un nombre positif ou nul.')
      return
    }

    setSaving(true)
    setError(null)
    setMessage(null)

    const response = await fetch('/api/admin/runtime-settings', {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        ...form,
        subscription_price_fcfa: parsedPrice,
      }),
    })

    const payload = (await response.json()) as ApiResponse | { error?: string; message?: string }

    if (!response.ok) {
      setError(('error' in payload && payload.error) || 'Impossible d’enregistrer la configuration.')
      setSaving(false)
      return
    }

    setMessage('Configuration SenKredi enregistrée.')
    setSaving(false)
    await load()
  }

  async function handleApplyToShops() {
    if (parsedPrice === null) {
      setError('Le prix doit être un nombre positif ou nul.')
      return
    }

    const ok = window.confirm(
      'Appliquer ces valeurs à toutes les boutiques existantes ? Cela mettra à jour shop_billing_settings pour chaque boutique.',
    )
    if (!ok) return

    setApplying(true)
    setError(null)
    setMessage(null)

    const response = await fetch('/api/admin/runtime-settings/apply-to-shops', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        ...form,
        subscription_price_fcfa: parsedPrice,
      }),
    })

    const payload = (await response.json()) as { error?: string; message?: string; updated?: number }

    if (!response.ok) {
      setError(payload.error ?? 'Impossible d’appliquer la configuration aux boutiques.')
      setApplying(false)
      return
    }

    setMessage(payload.message ?? `Configuration appliquée à ${payload.updated ?? 0} boutique(s).`)
    setApplying(false)
  }

  return (
    <div className="container-stack">
      <div className="topbar">
        <div>
          <h1>Configuration SenKredi</h1>
          <p>Gère les informations globales changeantes : prix, moyens de paiement, support et identité commerciale.</p>
        </div>
      </div>

      {message ? <div className="success">{message}</div> : null}
      {error ? <div className="error">{error}</div> : null}

      <form className="container-stack" onSubmit={handleSave}>
        <section className="card container-stack">
          <div>
            <h2>Identité</h2>
            <p className="muted">Nom affiché et informations générales du service.</p>
          </div>

          <div className="form-grid">
            <div className="field">
              <label>Nom de l’application</label>
              <input value={form.app_name} onChange={(e) => update('app_name', e.target.value)} />
            </div>
            <div className="field">
              <label>Nom commercial</label>
              <input value={form.business_name} onChange={(e) => update('business_name', e.target.value)} />
            </div>
            <div className="field">
              <label>Site web</label>
              <input value={form.website_url} onChange={(e) => update('website_url', e.target.value)} placeholder="https://..." />
            </div>
            <div className="field">
              <label>Email support</label>
              <input value={form.support_email} onChange={(e) => update('support_email', e.target.value)} placeholder="support@..." />
            </div>
          </div>
        </section>

        <section className="card container-stack">
          <div>
            <h2>Abonnement & encaissement</h2>
            <p className="muted">Valeurs globales utilisées pour les nouveaux paramètres de facturation et les communications support.</p>
          </div>

          <div className="form-grid-3">
            <div className="field">
              <label>Prix abonnement mensuel (FCFA)</label>
              <input
                inputMode="numeric"
                value={form.subscription_price_fcfa}
                onChange={(e) => update('subscription_price_fcfa', e.target.value)}
              />
            </div>
            <div className="field">
              <label>Numéro Wave</label>
              <input value={form.wave_number} onChange={(e) => update('wave_number', e.target.value)} />
            </div>
            <div className="field">
              <label>Numéro Orange Money</label>
              <input value={form.orange_money_number} onChange={(e) => update('orange_money_number', e.target.value)} />
            </div>
          </div>

          <div className="field">
            <label>Instructions de paiement</label>
            <textarea
              value={form.payment_instructions}
              onChange={(e) => update('payment_instructions', e.target.value)}
              placeholder="Exemple : envoyer la preuve par WhatsApp avec le Shop ID..."
            />
          </div>
        </section>

        <section className="card container-stack">
          <div>
            <h2>Support technique</h2>
            <p className="muted">Canaux de contact visibles dans le paywall et le parcours d’activation.</p>
          </div>

          <div className="form-grid-3">
            <div className="field">
              <label>Téléphone support</label>
              <input value={form.support_phone} onChange={(e) => update('support_phone', e.target.value)} />
            </div>
            <div className="field">
              <label>WhatsApp support</label>
              <input value={form.support_whatsapp} onChange={(e) => update('support_whatsapp', e.target.value)} />
            </div>
            <div className="field">
              <label>Email support</label>
              <input value={form.support_email} onChange={(e) => update('support_email', e.target.value)} />
            </div>
          </div>
        </section>

        <section className="card container-stack">
          <div>
            <h2>Actions</h2>
            <p className="muted">Enregistre d’abord la configuration, puis propage-la aux boutiques existantes si nécessaire.</p>
          </div>

          <div className="actions">
            <button type="submit" className="btn-primary" disabled={saving || loading}>
              {saving ? 'Enregistrement…' : 'Enregistrer la configuration'}
            </button>
            <button type="button" className="btn-secondary" disabled={applying || loading} onClick={() => void handleApplyToShops()}>
              {applying ? 'Application…' : 'Appliquer à toutes les boutiques'}
            </button>
            <button type="button" className="btn-ghost" disabled={loading} onClick={() => void load()}>
              Actualiser
            </button>
          </div>

          <div className="notice">
            La page <strong>Boutiques</strong> permet ensuite de faire des ajustements spécifiques boutique par boutique, sans modifier les valeurs globales SenKredi.
          </div>
        </section>
      </form>

      {loading ? <div className="muted">Chargement…</div> : null}
    </div>
  )
}