'use client'

import { useEffect, useMemo, useState } from 'react'
import { StatusBadge } from '@/components/status-badge'
import { formatCurrencyFcfa, formatDateTime } from '@/lib/utils'
import type { AdminSubscriptionRequestRow, ProfileRow } from '@/lib/types'

type EnrichedRow = AdminSubscriptionRequestRow & {
  requesterProfile?: ProfileRow | null
  decidedByProfile?: ProfileRow | null
}

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

export function SubscriptionRequestsScreen() {
  const [rows, setRows] = useState<EnrichedRow[]>([])
  const [count, setCount] = useState(0)
  const [page, setPage] = useState(1)
  const [pageSize] = useState(20)
  const [status, setStatus] = useState('pending')
  const [search, setSearch] = useState('')
  const [loading, setLoading] = useState(true)
  const [message, setMessage] = useState<string | null>(null)
  const [error, setError] = useState<string | null>(null)
  const [busyId, setBusyId] = useState<number | 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),
      status,
    })

    if (search.trim()) {
      params.set('search', search.trim())
    }

    const response = await fetch(
      `/api/admin/subscription-requests?${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, status])

  async function handleApprove(id: number, months = 1) {
    setBusyId(id)
    setError(null)
    setMessage(null)

    const response = await fetch(
      `/api/admin/subscription-requests/${id}/approve`,
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ months }),
      },
    )

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

    if (!response.ok) {
      setError(payload.error ?? 'Impossible d’approuver la demande.')
      setBusyId(null)
      return
    }

    setMessage(payload.message ?? 'Demande approuvée.')
    setBusyId(null)
    await load()
  }

  async function handleReject(id: number) {
    const reason = window.prompt('Motif de rejet', '') ?? ''

    setBusyId(id)
    setError(null)
    setMessage(null)

    const response = await fetch(
      `/api/admin/subscription-requests/${id}/reject`,
      {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ reason }),
      },
    )

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

    if (!response.ok) {
      setError(payload.error ?? 'Impossible de rejeter la demande.')
      setBusyId(null)
      return
    }

    setMessage(payload.message ?? 'Demande rejetée.')
    setBusyId(null)
    await load()
  }

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

  return (
    <div className="container-stack">
      <div className="topbar">
        <div>
          <h1>Demandes d’abonnement</h1>
          <p>Traitement manuel des paiements et activation du plan de boutique.</p>
        </div>
      </div>

      <section className="card container-stack">
        <form className="toolbar" onSubmit={handleSearchSubmit}>
          <div className="field">
            <label>Recherche</label>
            <input
              placeholder="Boutique, téléphone, note..."
              value={search}
              onChange={(event) => setSearch(event.target.value)}
            />
          </div>

          <div className="field">
            <label>Statut</label>
            <select
              value={status}
              onChange={(event) => {
                setStatus(event.target.value)
                setPage(1)
              }}
            >
              <option value="pending">Pending</option>
              <option value="approved">Approved</option>
              <option value="rejected">Rejected</option>
              <option value="cancelled">Cancelled</option>
              <option value="all">Tous</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>

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

        <div className="table-wrap">
          <table className="table">
            <thead>
              <tr>
                <th>ID</th>
                <th>Boutique</th>
                <th>Demandeur</th>
                <th>Montant</th>
                <th>Méthode</th>
                <th>Date</th>
                <th>Statut</th>
                <th>Action</th>
              </tr>
            </thead>

            <tbody>
              {rows.map((row) => (
                <tr
                  key={row.id}
                  style={{
                    background:
                      row.status === 'pending' ? 'rgba(255, 248, 225, 0.85)' : undefined,
                  }}
                >
                  <td>#{row.id}</td>

                  <td>
                    <strong>{row.shop_name}</strong>
                    <span className="muted">{row.shop_phone || '—'}</span>
                  </td>

                  <td>
                    <strong>{row.requesterProfile?.full_name || row.user_id}</strong>
                    <span className="muted">
                      {row.requesterProfile?.phone || row.payer_phone || '—'}
                    </span>
                  </td>

                  <td>
                    <strong style={{ fontSize: '1rem' }}>
                      {formatCurrencyFcfa(row.amount_fcfa)}
                    </strong>
                  </td>

                  <td>
                    <div>{row.method}</div>
                    <div className="muted" style={{ fontSize: '0.8rem' }}>
                      {row.payer_phone || '—'}
                    </div>
                  </td>

                  <td>{formatDateTime(row.created_at)}</td>

                  <td>
                    <div className="container-stack" style={{ gap: '0.45rem' }}>
                      <StatusBadge value={row.status} />
                      {row.decided_at ? (
                        <span className="muted">
                          {formatDateTime(row.decided_at)}
                          {row.decidedByProfile?.full_name
                            ? ` · ${row.decidedByProfile.full_name}`
                            : ''}
                        </span>
                      ) : null}
                    </div>
                  </td>

                  <td>
                    <div
                      className="actions"
                      style={{ display: 'flex', gap: '0.45rem', flexWrap: 'wrap' }}
                    >
                      <button
                        type="button"
                        className="btn-primary btn-small"
                        disabled={row.status !== 'pending' || busyId === row.id}
                        onClick={() => handleApprove(row.id, 1)}
                      >
                        1 mois
                      </button>

                      <button
                        type="button"
                        className="btn-secondary btn-small"
                        disabled={row.status !== 'pending' || busyId === row.id}
                        onClick={() => handleApprove(row.id, 3)}
                      >
                        3 mois
                      </button>

                      <button
                        type="button"
                        className="btn-danger btn-small"
                        disabled={row.status !== 'pending' || busyId === row.id}
                        onClick={() => handleReject(row.id)}
                      >
                        Rejeter
                      </button>
                    </div>

                    {row.note ? (
                      <div className="footer-note" style={{ marginTop: '0.45rem' }}>
                        {row.note}
                      </div>
                    ) : null}

                    {row.proof_url ? (
                      <div className="footer-note" style={{ marginTop: '0.5rem' }}>
                        <a href={row.proof_url} target="_blank" rel="noreferrer">
                          Voir la preuve
                        </a>

                        <div style={{ marginTop: '0.4rem' }}>
                          <img
                            src={row.proof_url}
                            alt="preuve"
                            style={{
                              width: 120,
                              height: 80,
                              objectFit: 'cover',
                              borderRadius: 8,
                              border: '1px solid #ddd',
                              cursor: 'pointer',
                              display: 'block',
                            }}
                            onClick={() => {
                              if (row.proof_url) {
                                window.open(row.proof_url, '_blank')
                              }
                            }}
                          />
                        </div>
                      </div>
                    ) : (
                      <div className="footer-note" style={{ marginTop: '0.45rem' }}>
                        Aucune preuve
                      </div>
                    )}
                  </td>
                </tr>
              ))}

              {!loading && rows.length === 0 ? (
                <tr>
                  <td colSpan={8} className="muted">
                    Aucune demande trouvée.
                  </td>
                </tr>
              ) : null}
            </tbody>
          </table>
        </div>

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