'use client'

import { useState } from 'react'
import type { BillingSettingsRow } from '@/lib/types'

export function ShopBillingForm({
  shopId,
  initial,
}: {
  shopId: string
  initial: BillingSettingsRow | null
}) {
  const [price, setPrice] = useState(String(initial?.price_fcfa ?? 10000))
  const [wave, setWave] = useState(initial?.wave_number ?? '')
  const [orangeMoney, setOrangeMoney] = useState(initial?.orange_money_number ?? '')
  const [supportPhone, setSupportPhone] = useState(initial?.support_phone ?? '')
  const [supportWhatsApp, setSupportWhatsApp] = useState(initial?.support_whatsapp ?? '')
  const [saving, setSaving] = useState(false)
  const [message, setMessage] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)

  async function handleSubmit(event: React.FormEvent) {
    event.preventDefault()
    const parsedPrice = Number(price)

    if (!Number.isFinite(parsedPrice) || parsedPrice < 0) {
      setError('Le prix doit être un nombre positif ou nul.')
      return
    }

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

    const response = await fetch(`/api/admin/shops/${shopId}/billing`, {
      method: 'PATCH',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        price_fcfa: parsedPrice,
        wave_number: wave,
        orange_money_number: orangeMoney,
        support_phone: supportPhone,
        support_whatsapp: supportWhatsApp,
      }),
    })

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

    if (!response.ok) {
      setError(payload.error ?? 'Impossible de mettre à jour le billing de la boutique.')
      setSaving(false)
      return
    }

    setMessage(payload.message ?? 'Paramètres billing mis à jour.')
    setSaving(false)
  }

  return (
    <form className="container-stack" onSubmit={handleSubmit}>
      {message ? <div className="success">{message}</div> : null}
      {error ? <div className="error">{error}</div> : null}

      <div className="form-grid-3">
        <div className="field">
          <label>Prix (FCFA)</label>
          <input inputMode="numeric" value={price} onChange={(e) => setPrice(e.target.value)} />
        </div>
        <div className="field">
          <label>Wave</label>
          <input value={wave} onChange={(e) => setWave(e.target.value)} />
        </div>
        <div className="field">
          <label>Orange Money</label>
          <input value={orangeMoney} onChange={(e) => setOrangeMoney(e.target.value)} />
        </div>
        <div className="field">
          <label>Téléphone support</label>
          <input value={supportPhone} onChange={(e) => setSupportPhone(e.target.value)} />
        </div>
        <div className="field">
          <label>WhatsApp support</label>
          <input value={supportWhatsApp} onChange={(e) => setSupportWhatsApp(e.target.value)} />
        </div>
      </div>

      <div className="actions">
        <button type="submit" className="btn-primary" disabled={saving}>
          {saving ? 'Enregistrement…' : 'Mettre à jour cette boutique'}
        </button>
      </div>
    </form>
  )
}