import { useState, useEffect, useCallback } from 'react'
import { ShieldCheck, ArrowLeft, RefreshCw, ToggleLeft, ToggleRight, Check, X, Database, Trash2, AlertTriangle } from 'lucide-react'
import { getAdminSettings, setAdminSetting, getLoginLogs, getDbInfo, purgeDb } from '../api/client'

const PAGE_SIZE = 50

function ToggleRow({ label, description, enabled, onChange, loading }) {
  return (
    <div className="flex items-center justify-between gap-4 py-3">
      <div>
        <p className="text-sm font-medium text-gray-200">{label}</p>
        <p className="text-xs text-gray-500 mt-0.5">{description}</p>
      </div>
      <button
        onClick={onChange}
        disabled={loading}
        title={enabled ? 'Désactiver' : 'Activer'}
        className="flex-shrink-0 disabled:opacity-50 transition-opacity"
      >
        {enabled
          ? <ToggleRight size={32} className="text-indigo-400" />
          : <ToggleLeft  size={32} className="text-gray-600" />
        }
      </button>
    </div>
  )
}

export default function AdminPage({ onBack }) {
  const [activeTab, setActiveTab] = useState('settings') // 'settings' | 'logs' | 'database'

  // ─── Settings ────────────────────────────────────────────────────────────
  const [settings,        setSettings]        = useState(null)
  const [settingsLoading, setSettingsLoading] = useState(true)
  const [settingsError,   setSettingsError]   = useState(null)
  const [toggleLoading,   setToggleLoading]   = useState(false)

  const loadSettings = useCallback(async () => {
    setSettingsLoading(true)
    setSettingsError(null)
    try {
      const data = await getAdminSettings()
      setSettings(data)
    } catch (err) {
      setSettingsError(err.message)
    } finally {
      setSettingsLoading(false)
    }
  }, [])

  useEffect(() => { loadSettings() }, [loadSettings])

  const toggleRegistration = async () => {
    if (!settings) return
    const newValue = settings.registration_open === 'true' ? 'false' : 'true'
    setToggleLoading(true)
    try {
      await setAdminSetting('registration_open', newValue)
      setSettings(prev => ({ ...prev, registration_open: newValue }))
    } catch (err) {
      setSettingsError(err.message)
    } finally {
      setToggleLoading(false)
    }
  }

  // ─── Login logs ──────────────────────────────────────────────────────────
  const [logs,        setLogs]        = useState([])
  const [logsTotal,   setLogsTotal]   = useState(0)
  const [logsPage,    setLogsPage]    = useState(0)
  const [logsLoading, setLogsLoading] = useState(true)
  const [logsError,   setLogsError]   = useState(null)
  const [filterUser,  setFilterUser]  = useState('')
  const [filterSuccess, setFilterSuccess] = useState('all') // 'all' | 'true' | 'false'

  const loadLogs = useCallback(async (page = 0) => {
    setLogsLoading(true)
    setLogsError(null)
    try {
      const data = await getLoginLogs(PAGE_SIZE, page * PAGE_SIZE)
      setLogs(data.logs)
      setLogsTotal(data.total)
      setLogsPage(page)
    } catch (err) {
      setLogsError(err.message)
    } finally {
      setLogsLoading(false)
    }
  }, [])

  useEffect(() => { loadLogs(0) }, [loadLogs])

  const filteredLogs = logs.filter(log => {
    const matchUser    = filterUser === '' || log.username.toLowerCase().includes(filterUser.toLowerCase())
    const matchSuccess = filterSuccess === 'all' || String(log.success) === filterSuccess
    return matchUser && matchSuccess
  })

  const totalPages = Math.ceil(logsTotal / PAGE_SIZE)

  // ─── Database management ─────────────────────────────────────────────────
  const [dbInfo,        setDbInfo]        = useState(null)
  const [dbInfoLoading, setDbInfoLoading] = useState(false)
  const [dbInfoError,   setDbInfoError]   = useState(null)
  const [purgeLoading,  setPurgeLoading]  = useState(false)
  const [purgeResult,   setPurgeResult]   = useState(null)
  const [purgeError,    setPurgeError]    = useState(null)
  const [confirmState,  setConfirmState]  = useState(null) // { table, period, fromTs?, toTs? }
  // Custom range
  const [customFrom, setCustomFrom] = useState('')
  const [customTo,   setCustomTo]   = useState('')

  const loadDbInfo = useCallback(async () => {
    setDbInfoLoading(true)
    setDbInfoError(null)
    try {
      const data = await getDbInfo()
      setDbInfo(data)
    } catch (err) {
      setDbInfoError(err.message)
    } finally {
      setDbInfoLoading(false)
    }
  }, [])

  useEffect(() => {
    if (activeTab === 'database') loadDbInfo()
  }, [activeTab, loadDbInfo])

  const requestPurge = (table, period, extraOpts = {}) => {
    setPurgeResult(null)
    setPurgeError(null)
    setConfirmState({ table, period, ...extraOpts })
  }

  const confirmPurge = async () => {
    if (!confirmState) return
    setPurgeLoading(true)
    setPurgeResult(null)
    setPurgeError(null)
    try {
      const result = await purgeDb(confirmState)
      const total  = Object.values(result.deleted).reduce((a, b) => a + b, 0)
      setPurgeResult(`${total} entrée${total !== 1 ? 's' : ''} supprimée${total !== 1 ? 's' : ''}.`)
      loadDbInfo()
    } catch (err) {
      setPurgeError(err.message)
    } finally {
      setPurgeLoading(false)
      setConfirmState(null)
    }
  }

  const periodLabel = {
    last_24h: '24 dernières heures',
    last_7d:  '7 derniers jours',
    last_30d: '30 derniers jours',
    all:      'toutes les entrées',
    custom:   'la période personnalisée',
  }

  const tableLabel = {
    vps_stats:  'Statistiques VPS',
    login_logs: 'Logs de connexion',
    all:        'toutes les tables',
  }

  function fmtTs(ts) {
    if (!ts) return '—'
    return new Date(ts * 1000).toLocaleString('fr-FR')
  }

  function fmtCount(n) {
    return new Intl.NumberFormat('fr-FR').format(n)
  }

  return (
    <div className="min-h-screen bg-gray-950 text-gray-100">
      <div className="max-w-5xl mx-auto px-4 py-10">
        <button
          onClick={onBack}
          className="flex items-center gap-1.5 text-sm text-gray-400 hover:text-gray-200 mb-6 transition-colors"
        >
          <ArrowLeft size={15} />
          Retour au tableau de bord
        </button>

        <div className="flex items-center gap-3 mb-6">
          <div className="p-2 rounded-xl bg-violet-500/15">
            <ShieldCheck size={20} className="text-violet-400" />
          </div>
          <h1 className="text-lg font-semibold">Administration</h1>
        </div>

        {/* ── Tabs ── */}
        <div className="flex gap-1 mb-8 border-b border-gray-800">
          {[
            { key: 'settings', label: 'Paramètres' },
            { key: 'logs',     label: 'Connexions' },
            { key: 'database', label: 'Base de données' },
          ].map(tab => (
            <button
              key={tab.key}
              onClick={() => setActiveTab(tab.key)}
              className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
                activeTab === tab.key
                  ? 'border-indigo-500 text-indigo-400'
                  : 'border-transparent text-gray-500 hover:text-gray-300'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>

        {/* ── Tab: Paramètres ── */}
        {activeTab === 'settings' && (
          <section className="bg-gray-900 border border-gray-800 rounded-2xl p-6">
            <h2 className="text-sm font-semibold text-gray-300 mb-1">Paramètres</h2>
            <p className="text-xs text-gray-500 mb-4">Configuration globale de l'application.</p>

            {settingsError && (
              <div className="bg-red-950/40 border border-red-800/50 rounded-lg px-3 py-2 text-xs text-red-300 mb-3">
                {settingsError}
              </div>
            )}

            {settingsLoading
              ? <p className="text-xs text-gray-500">Chargement…</p>
              : (
                <div className="divide-y divide-gray-800">
                  <ToggleRow
                    label="Inscriptions ouvertes"
                    description="Permet à de nouveaux utilisateurs de créer un compte."
                    enabled={settings?.registration_open === 'true'}
                    onChange={toggleRegistration}
                    loading={toggleLoading}
                  />
                </div>
              )
            }
          </section>
        )}

        {/* ── Tab: Connexions ── */}
        {activeTab === 'logs' && (
          <section className="bg-gray-900 border border-gray-800 rounded-2xl p-6">
            <div className="flex items-center justify-between mb-4 gap-4 flex-wrap">
              <div>
                <h2 className="text-sm font-semibold text-gray-300">Tentatives de connexion</h2>
                <p className="text-xs text-gray-500 mt-0.5">{logsTotal} entrée{logsTotal !== 1 ? 's' : ''} au total</p>
              </div>
              <div className="flex items-center gap-2 flex-wrap">
                <input
                  type="text"
                  placeholder="Filtrer par utilisateur…"
                  value={filterUser}
                  onChange={(e) => setFilterUser(e.target.value)}
                  className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:border-indigo-500 transition-colors w-44"
                />
                <select
                  value={filterSuccess}
                  onChange={(e) => setFilterSuccess(e.target.value)}
                  className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:border-indigo-500 transition-colors"
                >
                  <option value="all">Tous</option>
                  <option value="true">Succès</option>
                  <option value="false">Échecs</option>
                </select>
                <button
                  onClick={() => loadLogs(logsPage)}
                  disabled={logsLoading}
                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs bg-gray-800 hover:bg-gray-700 disabled:opacity-50 transition-colors"
                >
                  <RefreshCw size={12} className={logsLoading ? 'animate-spin' : ''} />
                  Actualiser
                </button>
              </div>
            </div>

            {logsError && (
              <div className="bg-red-950/40 border border-red-800/50 rounded-lg px-3 py-2 text-xs text-red-300 mb-3">
                {logsError}
              </div>
            )}

            {logsLoading && logs.length === 0
              ? <p className="text-xs text-gray-500 py-8 text-center">Chargement…</p>
              : filteredLogs.length === 0
                ? <p className="text-xs text-gray-500 py-8 text-center">Aucune entrée.</p>
                : (
                  <div className="overflow-x-auto -mx-2">
                    <table className="w-full text-xs">
                      <thead>
                        <tr className="text-left text-gray-500 border-b border-gray-800">
                          <th className="pb-2 px-2 font-medium">Date / Heure</th>
                          <th className="pb-2 px-2 font-medium">Utilisateur</th>
                          <th className="pb-2 px-2 font-medium">Adresse IP</th>
                          <th className="pb-2 px-2 font-medium">Résultat</th>
                          <th className="pb-2 px-2 font-medium">Détail</th>
                        </tr>
                      </thead>
                      <tbody className="divide-y divide-gray-800/60">
                        {filteredLogs.map(log => (
                          <tr key={log.id} className="hover:bg-gray-800/30 transition-colors">
                            <td className="py-2 px-2 text-gray-400 whitespace-nowrap font-mono">
                              {new Date(log.ts).toLocaleString('fr-FR')}
                            </td>
                            <td className="py-2 px-2 text-gray-200 font-mono">{log.username}</td>
                            <td className="py-2 px-2 text-gray-400 font-mono">{log.ip}</td>
                            <td className="py-2 px-2">
                              {log.success
                                ? (
                                  <span className="inline-flex items-center gap-1 text-emerald-400">
                                    <Check size={11} /> Succès
                                  </span>
                                ) : (
                                  <span className="inline-flex items-center gap-1 text-red-400">
                                    <X size={11} /> Échec
                                  </span>
                                )
                              }
                            </td>
                            <td className="py-2 px-2 text-gray-500">{log.reason || '—'}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  </div>
                )
            }

            {totalPages > 1 && (
              <div className="flex items-center justify-between mt-4 pt-4 border-t border-gray-800">
                <button
                  onClick={() => loadLogs(logsPage - 1)}
                  disabled={logsPage === 0 || logsLoading}
                  className="px-3 py-1.5 rounded-lg text-xs bg-gray-800 hover:bg-gray-700 disabled:opacity-40 transition-colors"
                >
                  ← Précédent
                </button>
                <span className="text-xs text-gray-500">
                  Page {logsPage + 1} / {totalPages}
                </span>
                <button
                  onClick={() => loadLogs(logsPage + 1)}
                  disabled={logsPage >= totalPages - 1 || logsLoading}
                  className="px-3 py-1.5 rounded-lg text-xs bg-gray-800 hover:bg-gray-700 disabled:opacity-40 transition-colors"
                >
                  Suivant →
                </button>
              </div>
            )}
          </section>
        )}

        {/* ── Tab: Base de données ── */}
        {activeTab === 'database' && (
          <div className="space-y-6">
            {/* En-tête */}
            <div className="flex items-center justify-between">
              <div>
                <h2 className="text-sm font-semibold text-gray-300">Gestion de la base de données</h2>
                <p className="text-xs text-gray-500 mt-0.5">Supprimez les données historiques par table et par période.</p>
              </div>
              <button
                onClick={loadDbInfo}
                disabled={dbInfoLoading}
                className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs bg-gray-800 hover:bg-gray-700 disabled:opacity-50 transition-colors"
              >
                <RefreshCw size={12} className={dbInfoLoading ? 'animate-spin' : ''} />
                Actualiser
              </button>
            </div>

            {dbInfoError && (
              <div className="bg-red-950/40 border border-red-800/50 rounded-lg px-3 py-2 text-xs text-red-300">
                {dbInfoError}
              </div>
            )}
            {purgeResult && (
              <div className="bg-emerald-950/40 border border-emerald-800/50 rounded-lg px-3 py-2 text-xs text-emerald-300">
                {purgeResult}
              </div>
            )}
            {purgeError && (
              <div className="bg-red-950/40 border border-red-800/50 rounded-lg px-3 py-2 text-xs text-red-300">
                {purgeError}
              </div>
            )}

            {/* Cards par table */}
            {[
              { key: 'vps_stats',  label: 'Statistiques VPS',    icon: <Database size={15} className="text-indigo-400" /> },
              { key: 'login_logs', label: 'Logs de connexion',   icon: <Database size={15} className="text-violet-400" /> },
            ].map(({ key, label, icon }) => {
              const info = dbInfo?.[key]
              return (
                <section key={key} className="bg-gray-900 border border-gray-800 rounded-2xl p-6">
                  <div className="flex items-center gap-2 mb-4">
                    {icon}
                    <h3 className="text-sm font-semibold text-gray-300">{label}</h3>
                    {info && (
                      <span className="ml-auto text-xs text-gray-500">
                        {fmtCount(info.count)} entrée{info.count !== 1 ? 's' : ''}
                        {info.oldest_ts && ` · du ${fmtTs(info.oldest_ts)} au ${fmtTs(info.newest_ts)}`}
                      </span>
                    )}
                  </div>

                  <div className="flex flex-wrap gap-2">
                    {[
                      { period: 'last_24h', label: '24 dernières heures' },
                      { period: 'last_7d',  label: '7 derniers jours'    },
                      { period: 'last_30d', label: '30 derniers jours'   },
                      { period: 'all',      label: 'Tout effacer',       danger: true },
                    ].map(({ period, label: btnLabel, danger }) => (
                      <button
                        key={period}
                        onClick={() => requestPurge(key, period)}
                        disabled={purgeLoading || dbInfoLoading}
                        className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs transition-colors disabled:opacity-50 ${
                          danger
                            ? 'bg-red-950/50 hover:bg-red-900/60 text-red-400 border border-red-800/50'
                            : 'bg-gray-800 hover:bg-gray-700 text-gray-300'
                        }`}
                      >
                        <Trash2 size={11} />
                        {btnLabel}
                      </button>
                    ))}
                  </div>
                </section>
              )
            })}

            {/* Période personnalisée */}
            <section className="bg-gray-900 border border-gray-800 rounded-2xl p-6">
              <h3 className="text-sm font-semibold text-gray-300 mb-1">Période personnalisée</h3>
              <p className="text-xs text-gray-500 mb-4">Supprimez les données comprises entre deux dates précises.</p>

              <div className="flex flex-wrap items-end gap-3">
                <div>
                  <label className="block text-xs text-gray-500 mb-1">Du</label>
                  <input
                    type="datetime-local"
                    value={customFrom}
                    onChange={e => setCustomFrom(e.target.value)}
                    className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:border-indigo-500 transition-colors"
                  />
                </div>
                <div>
                  <label className="block text-xs text-gray-500 mb-1">Au</label>
                  <input
                    type="datetime-local"
                    value={customTo}
                    onChange={e => setCustomTo(e.target.value)}
                    className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:border-indigo-500 transition-colors"
                  />
                </div>
                <div>
                  <label className="block text-xs text-gray-500 mb-1">Table</label>
                  <select
                    id="custom-table"
                    defaultValue="all"
                    className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:border-indigo-500 transition-colors"
                  >
                    <option value="all">Toutes</option>
                    <option value="vps_stats">Statistiques VPS</option>
                    <option value="login_logs">Logs de connexion</option>
                  </select>
                </div>
                <button
                  disabled={!customFrom || !customTo || purgeLoading}
                  onClick={() => {
                    const tbl = document.getElementById('custom-table').value
                    const fromTs = Math.floor(new Date(customFrom).getTime() / 1000)
                    const toTs   = Math.floor(new Date(customTo).getTime()   / 1000)
                    requestPurge(tbl, 'custom', { fromTs, toTs })
                  }}
                  className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs bg-red-950/50 hover:bg-red-900/60 text-red-400 border border-red-800/50 transition-colors disabled:opacity-50"
                >
                  <Trash2 size={11} />
                  Supprimer
                </button>
              </div>
            </section>
          </div>
        )}

        {/* ── Modale de confirmation de purge ── */}
        {confirmState && (
          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
            <div className="bg-gray-900 border border-gray-700 rounded-2xl p-6 max-w-sm w-full shadow-2xl">
              <div className="flex items-center gap-3 mb-4">
                <div className="p-2 rounded-xl bg-red-500/15">
                  <AlertTriangle size={18} className="text-red-400" />
                </div>
                <h3 className="text-sm font-semibold">Confirmer la suppression</h3>
              </div>
              <p className="text-xs text-gray-400 mb-6">
                Vous êtes sur le point de supprimer{' '}
                <span className="text-gray-200 font-medium">{periodLabel[confirmState.period]}</span>{' '}
                dans{' '}
                <span className="text-gray-200 font-medium">{tableLabel[confirmState.table]}</span>.
                Cette action est irréversible.
              </p>
              <div className="flex gap-3 justify-end">
                <button
                  onClick={() => setConfirmState(null)}
                  className="px-4 py-2 rounded-lg text-xs bg-gray-800 hover:bg-gray-700 transition-colors"
                >
                  Annuler
                </button>
                <button
                  onClick={confirmPurge}
                  disabled={purgeLoading}
                  className="px-4 py-2 rounded-lg text-xs bg-red-600 hover:bg-red-700 disabled:opacity-50 transition-colors text-white font-medium"
                >
                  {purgeLoading ? 'Suppression…' : 'Supprimer'}
                </button>
              </div>
            </div>
          </div>
        )}

      </div>
    </div>
  )
}
