'use client'

import Link from 'next/link'
import { useEffect, useMemo, useState } from 'react'
import { StatusBadge } from '@/components/status-badge'
import { formatCurrencyFcfa, formatDateTime } from '@/lib/utils'
import type { AdminShopRow } from '@/lib/types'

type ApiResponse = {
  rows: AdminShopRow[]
  count: number
  page: number
  pageSize: number
}

export function ShopsScreen() {
  const [rows, setRows] = useState<AdminShopRow[]>([])
  const [count, setCount] = useState(0)
  const [page, setPage] = useState(1)
  const [pageSize] = useState(20)
  const [search, setSearch] = useState('')
  const [plan, setPlan] = useState('all')
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  const totalPages = useMemo(() => Math.max(Math.ceil(count / pageSize), 1), [count, pageSize])

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

    const params = new URLSearchParams({
      page: String(page),
      pageSize: String(pageSize),
      plan,
    })
    if (search.trim()) params.set('search', search.trim())

    const response = await fetch(`/api/admin/shops?${params.toString()}`, { 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
    }

    setRows(payload.rows)
    setCount(payload.count)
    setLoading(false)
  }

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

  function handleSubmit(event: React.FormEvent) {
    event.preventDefault()
    setPage(1)
    void load()
  }

  return (
    <div className="container-stack">
      <div className="topbar">
        <div>
          <h1>Boutiques</h1>
          <p>Vision synthétique des plans, coordonnées de facturation et expirations.</p>
        </div>
      </div>

      <section className="card container-stack">
        <form className="toolbar" onSubmit={handleSubmit}>
          <div className="field">
            <label>Recherche</label>
            <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Nom ou téléphone" />
          </div>

          <div className="field">
            <label>Plan</label>
            <select value={plan} onChange={(e) => { setPlan(e.target.value); setPage(1) }}>
              <option value="all">Tous</option>
              <option value="free">Free</option>
              <option value="pro">Pro</option>
            </select>
          </div>

          <div className="field">
            <label>Page</label>
            <div className="actions">
              <button type="button" className="btn-secondary btn-small" onClick={() => setPage((p) => Math.max(1, p - 1))}>
                ←
              </button>
              <button type="button" className="btn-secondary btn-small" onClick={() => setPage((p) => Math.min(totalPages, p + 1))}>
                →
              </button>
              <button type="button" className="btn-ghost btn-small">{page}/{totalPages}</button>
            </div>
          </div>

          <button type="submit" className="btn-primary">Filtrer</button>
        </form>

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

        <div className="table-wrap">
          <table className="table">
            <thead>
              <tr>
                <th>Boutique</th>
                <th>Plan</th>
                <th>Activation</th>
                <th>Expiration</th>
                <th>Tarif</th>
                <th>Support</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row) => (
                <tr key={row.shop_id}>
                  <td>
                    <strong>{row.shop_name}</strong>
                    <span className="muted">{row.shop_phone || '—'}</span>
                  </td>
                  <td>
                    <div className="actions">
                      <StatusBadge value={row.plan || 'unknown'} />
                    </div>
                  </td>
                  <td>
                    <StatusBadge value={row.is_active ? 'active' : 'inactive'} />
                  </td>
                  <td>{formatDateTime(row.expires_at)}</td>
                  <td>{formatCurrencyFcfa(row.price_fcfa)}</td>
                  <td>
                    <strong>{row.support_phone || '—'}</strong>
                    <span className="muted">{row.support_whatsapp || '—'}</span>
                  </td>
                  <td>
                    <Link className="btn-secondary btn-small" href={`/dashboard/shops/${row.shop_id}`}>
                      Ouvrir
                    </Link>
                  </td>
                </tr>
              ))}
              {!loading && rows.length === 0 ? (
                <tr>
                  <td colSpan={7} className="muted">Aucune boutique trouvée.</td>
                </tr>
              ) : null}
            </tbody>
          </table>
        </div>

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