"use client"

import { useEffect, useState } from "react"
import { Card } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Badge } from "@/components/ui/badge"
import { toast } from "@/hooks/use-toast"
import {
  Instagram,
  Loader2,
  CheckCircle2,
  AlertTriangle,
  RefreshCw,
  ExternalLink,
} from "lucide-react"

/**
 * Configuración del feed de Instagram de la portada.
 *
 * El token de Instagram dura 60 días y se renueva solo por cron; esta pantalla
 * sirve para cargarlo la primera vez, ver cuánto le queda y renovarlo a mano si
 * hiciera falta. El token nunca se muestra de vuelta.
 */

interface EstadoIG {
  activo: boolean
  hayToken: boolean
  vence: string | null
  diasRestantes: number | null
  usuario: string | null
  publicaciones: number
  funcionando: boolean
}

export default function AdminInstagramPage() {
  const [estado, setEstado] = useState<EstadoIG | null>(null)
  const [cargando, setCargando] = useState(true)
  const [guardando, setGuardando] = useState(false)
  const [token, setToken] = useState("")
  const [appSecret, setAppSecret] = useState("")
  const [usuario, setUsuario] = useState("vipplaysport")

  const cargar = async () => {
    try {
      const res = await fetch("/api/admin/instagram")
      if (!res.ok) throw new Error()
      const d: EstadoIG = await res.json()
      setEstado(d)
      if (d.usuario) setUsuario(d.usuario)
    } catch {
      toast({ title: "No se pudo leer la configuración", variant: "destructive" })
    } finally {
      setCargando(false)
    }
  }

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

  const enviar = async (cuerpo: Record<string, unknown>, exito: string) => {
    setGuardando(true)
    try {
      const res = await fetch("/api/admin/instagram", {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(cuerpo),
      })
      const d = await res.json()
      if (!res.ok) throw new Error(d?.error || "Error al guardar")
      toast({ title: exito })
      setToken("")
      setAppSecret("")
      await cargar()
    } catch (e: any) {
      toast({
        title: "No se pudo guardar",
        description: e?.message,
        variant: "destructive",
        duration: 10000,
      })
    } finally {
      setGuardando(false)
    }
  }

  if (cargando) {
    return (
      <div className="p-6 flex items-center gap-2 text-muted-foreground">
        <Loader2 className="h-4 w-4 animate-spin" />
        Cargando…
      </div>
    )
  }

  const vencePronto = estado?.diasRestantes !== null && (estado?.diasRestantes ?? 99) < 15

  return (
    <div className="p-4 md:p-6 max-w-3xl space-y-6">
      <div className="flex items-center gap-3">
        <div className="p-2 rounded-full bg-naranja-vip/15">
          <Instagram className="h-6 w-6 text-naranja-vip" />
        </div>
        <div>
          <h1 className="text-2xl font-bold text-verde-bosque">Feed de Instagram</h1>
          <p className="text-sm text-muted-foreground">
            Muestra tus últimas publicaciones en la portada de la web
          </p>
        </div>
      </div>

      {/* Estado actual */}
      <Card className="p-6">
        <div className="flex items-start justify-between gap-4">
          <div>
            <Label htmlFor="ig-activo" className="text-base font-semibold">
              Mostrar el feed en la web
            </Label>
            <p className="text-sm text-muted-foreground mt-1">
              {estado?.hayToken
                ? estado.funcionando
                  ? `Conectado: se están leyendo ${estado.publicaciones} publicaciones.`
                  : "Hay un token guardado, pero Instagram no devuelve publicaciones."
                : "Todavía no hay conexión con Instagram. Sigue los pasos de abajo."}
            </p>
          </div>
          <div className="flex items-center gap-3 shrink-0">
            <Badge variant={estado?.activo ? "default" : "secondary"}>
              {estado?.activo ? "Visible" : "Oculto"}
            </Badge>
            <Switch
              id="ig-activo"
              checked={Boolean(estado?.activo)}
              disabled={guardando || !estado?.hayToken}
              onCheckedChange={(v) =>
                enviar({ activo: v }, v ? "Feed visible en la web" : "Feed oculto")
              }
            />
          </div>
        </div>

        {estado?.hayToken && (
          <div className="mt-5 flex flex-wrap items-center gap-3 border-t pt-4">
            <span className="flex items-center gap-2 text-sm">
              {estado.funcionando ? (
                <CheckCircle2 className="h-4 w-4 text-green-600" />
              ) : (
                <AlertTriangle className="h-4 w-4 text-amber-600" />
              )}
              {estado.diasRestantes !== null && (
                <span className={vencePronto ? "text-amber-700 font-medium" : "text-muted-foreground"}>
                  La conexión vence en {estado.diasRestantes} días
                  {vencePronto && " — conviene renovarla"}
                </span>
              )}
            </span>
            <Button
              variant="outline"
              size="sm"
              disabled={guardando}
              onClick={() => enviar({ refrescar: true }, "Conexión renovada por 60 días más")}
              className="gap-2"
            >
              <RefreshCw className="h-3.5 w-3.5" />
              Renovar ahora
            </Button>
          </div>
        )}
      </Card>

      {/* Conectar */}
      <Card className="p-6 space-y-4">
        <h2 className="font-semibold text-verde-bosque">
          {estado?.hayToken ? "Reemplazar la conexión" : "Conectar con Instagram"}
        </h2>

        <div>
          <Label htmlFor="ig-usuario">Usuario de Instagram</Label>
          <Input
            id="ig-usuario"
            value={usuario}
            onChange={(e) => setUsuario(e.target.value)}
            placeholder="vipplaysport"
            className="mt-1.5"
          />
          <p className="text-xs text-muted-foreground mt-1">
            Solo para el enlace y el nombre que se muestra. Sin la arroba.
          </p>
        </div>

        <div>
          <Label htmlFor="ig-token">Token de acceso</Label>
          <Input
            id="ig-token"
            value={token}
            onChange={(e) => setToken(e.target.value)}
            placeholder="Pega aquí el token que te dio Meta"
            className="mt-1.5 font-mono text-xs"
            autoComplete="off"
          />
        </div>

        <div>
          <Label htmlFor="ig-secret">
            Clave secreta de la app <span className="text-muted-foreground">(opcional)</span>
          </Label>
          <Input
            id="ig-secret"
            type="password"
            value={appSecret}
            onChange={(e) => setAppSecret(e.target.value)}
            placeholder="Solo si el token es de corta duración"
            className="mt-1.5 font-mono text-xs"
            autoComplete="off"
          />
          <p className="text-xs text-muted-foreground mt-1">
            Si pegas el token corto (el que dura una hora), añade la clave secreta
            y lo convertimos en uno de 60 días. Ni el token ni la clave se vuelven
            a mostrar después de guardarlos.
          </p>
        </div>

        <Button
          disabled={guardando || !token.trim()}
          onClick={() =>
            enviar(
              { token, usuario, ...(appSecret.trim() ? { appSecret } : {}) },
              "Instagram conectado"
            )
          }
          className="bg-naranja-vip hover:bg-naranja-vip/90"
        >
          {guardando ? <Loader2 className="h-4 w-4 animate-spin mr-2" /> : null}
          Guardar y probar
        </Button>
      </Card>

      {/* Guía */}
      <Card className="p-6 bg-muted/30">
        <h2 className="font-semibold text-verde-bosque mb-3">Cómo obtener el token (una vez)</h2>
        <ol className="space-y-3 text-sm text-muted-foreground list-decimal pl-5">
          <li>
            En la app de Instagram, entra a <strong>Configuración → Tipo de cuenta</strong> y cambia
            a <strong>cuenta profesional</strong> (con «Creador» basta; es gratis y se puede
            revertir). La API oficial ya no funciona con cuentas personales.
          </li>
          <li>
            Entra a{" "}
            <a
              href="https://developers.facebook.com/apps"
              target="_blank"
              rel="noopener noreferrer"
              className="text-naranja-vip hover:underline inline-flex items-center gap-1"
            >
              developers.facebook.com/apps <ExternalLink className="h-3 w-3" />
            </a>{" "}
            y crea una app. Elige el caso de uso <strong>«Otro» → «Empresa»</strong> y añádele el
            producto <strong>Instagram</strong>.
          </li>
          <li>
            En <strong>Instagram → Configuración de la API</strong>, agrega tu cuenta como{" "}
            <strong>tester</strong> y acéptalo desde{" "}
            <a
              href="https://www.instagram.com/accounts/manage_access/"
              target="_blank"
              rel="noopener noreferrer"
              className="text-naranja-vip hover:underline inline-flex items-center gap-1"
            >
              instagram.com/accounts/manage_access <ExternalLink className="h-3 w-3" />
            </a>
            .
          </li>
          <li>
            Genera el token con el permiso <code className="text-xs">instagram_business_basic</code>{" "}
            (no hacen falta más) y pégalo arriba.
          </li>
        </ol>
        <p className="text-xs text-muted-foreground mt-4 border-t pt-3">
          <strong>No hace falta la revisión de Meta</strong> mientras solo leas tu propia cuenta con
          ella agregada como tester. La renovación de la conexión es automática (una vez al día), así
          que esto se hace una sola vez.
        </p>
      </Card>
    </div>
  )
}