import React, { useEffect, useState } from "react";
import { collection, query, where, onSnapshot, Timestamp, addDoc, setDoc, doc, serverTimestamp } from "firebase/firestore";
import { db } from "../../firebase";
import { useAuth } from "../../context/AuthContext";
import { negocioService, type Negocio } from "../../services/negocioService";
import { toast } from "react-hot-toast";
import {
  UtensilsCrossed, CalendarCheck, ShoppingBag, DollarSign, QrCode,
  Monitor, BookOpen, Package, FileText, CreditCard, Receipt, Brain,
  Bot, ExternalLink, ChevronRight,
} from "lucide-react";

interface KPIs {
  comandasActivas: number;
  reservasHoy: number;
  ticketsPendientes: number;
  ventasHoy: number;
}

const MODULOS = [
  { id: "pos",         emoji: "💳", label: "Punto de venta",  desc: "Cobra rápido con imágenes",         href: "/restaurante/pos",         from: "#16a34a", to: "#22c55e" },
  { id: "comandas",    emoji: "🍳", label: "Comandas",         desc: "Pantalla de cocina en tiempo real",  href: "/restaurante/comandas",    from: "#ea580c", to: "#f97316" },
  { id: "menu_qr",    emoji: "📱", label: "Menú & QR",        desc: "Edita la carta y genera QR",         href: "/restaurante/menu",        from: "#0284c7", to: "#0ea5e9" },
  { id: "inventario", emoji: "📦", label: "Inventario",       desc: "Stock, imágenes y alertas",          href: "/restaurante/inventario",  from: "#7c3aed", to: "#a855f7" },
  { id: "gastos",     emoji: "📊", label: "Gastos",           desc: "Registra y analiza costos",          href: "/restaurante/gastos",      from: "#dc2626", to: "#f87171" },
  { id: "reservas",   emoji: "📅", label: "Reservas",         desc: "Mesas y reservaciones",              href: "/restaurante/reservas",    from: "#0891b2", to: "#22d3ee" },
  { id: "gerente_ia", emoji: "🧠", label: "Gerente IA",       desc: "Análisis inteligente del negocio",   href: "/restaurante/gerente",     from: "#4f46e5", to: "#818cf8" },
  { id: "compras",    emoji: "🛒", label: "Agrovida Foods",   desc: "Insumos con descuento 20%",          href: "/restaurante/compras",     from: "#d97706", to: "#fbbf24" },
  { id: "facturacion",emoji: "🧾", label: "Facturación DIAN", desc: "Facturas con sello DIAN",            href: "/restaurante/facturacion", from: "#475569", to: "#64748b" },
  { id: "meta_ads",   emoji: "📣", label: "Meta Ads IA",     desc: "Lanza campañas en Facebook e Instagram con IA", href: "/negocio/meta-ads", from: "#1877f2", to: "#0a52c4" },
];

// ── Pantalla de recuperación para registros incompletos ──────────────────────
function CompletarRegistro({ uid, email, nombre }: { uid: string; email: string; nombre: string }) {
  const [restaurante, setRestaurante] = useState("");
  const [telefono, setTelefono] = useState("");
  const [loading, setLoading] = useState(false);

  async function handleCompletar(e: React.FormEvent) {
    e.preventDefault();
    if (!restaurante.trim()) { toast.error("Escribe el nombre del establecimiento"); return; }
    setLoading(true);
    try {
      const modulos = ["reservas", "menu_qr", "comandas", "pos", "finanzas", "inventario", "gastos"];
      const negRef = await addDoc(collection(db, "negocios"), {
        nombre: restaurante.trim(),
        tipo: "restaurante",
        ownerUid: uid,
        ownerId: uid,
        ownerNombre: nombre,
        ownerEmail: email.toLowerCase(),
        telefono: telefono.trim(),
        ciudad: "",
        suscripcion: {
          status: "trial",
          precioMensualCOP: 90000,
          periodoActual: new Date().toISOString().slice(0, 7),
          renovacion: new Date(Date.now() + 7 * 86400000).toISOString(),
          historialPagos: [],
        },
        modulosActivos: modulos,
        creadoEn: serverTimestamp(),
      });
      await setDoc(doc(db, "users", uid), {
        negocioId: negRef.id,
        rolNegocio: "owner",
        negocioTipo: "restaurante",
        modulosAutorizados: modulos,
      }, { merge: true });
      toast.success("¡Registro completado! Recargando…");
      setTimeout(() => window.location.reload(), 1200);
    } catch (err: any) {
      toast.error("Error al completar: " + (err.message || "intenta de nuevo"));
    } finally {
      setLoading(false);
    }
  }

  return (
    <div style={{ minWidth: "100%", display: "flex", alignItems: "center", justifyContent: "center", background: "#f1f5f9", padding: 24, fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif" }}>
      <div style={{ width: "100%", maxWidth: 440, background: "#fff", borderRadius: 24, boxShadow: "0 12px 40px rgba(0,0,0,.08)", overflow: "hidden" }}>
        <div style={{ background: "linear-gradient(135deg,#ea580c,#9a3412)", padding: "28px 28px 24px" }}>
          <div style={{ fontSize: 28, marginBottom: 8 }}>🍽️</div>
          <div style={{ fontSize: 20, fontWeight: 900, color: "#fff" }}>Completa tu registro</div>
          <div style={{ fontSize: 12, color: "rgba(255,255,255,.75)", marginTop: 4 }}>Tu cuenta existe pero falta el nombre del establecimiento</div>
        </div>
        <form onSubmit={handleCompletar} style={{ padding: 28, display: "flex", flexDirection: "column", gap: 14 }}>
          <div>
            <label style={{ fontSize: 11, fontWeight: 700, color: "#6b7280", textTransform: "uppercase", letterSpacing: ".06em", display: "block", marginBottom: 6 }}>Nombre del restaurante / establecimiento *</label>
            <input
              value={restaurante} onChange={e => setRestaurante(e.target.value)}
              placeholder="Ej: La Hacienda, Brioche, El Rincón…"
              required
              style={{ width: "100%", height: 48, borderRadius: 12, border: "1.5px solid #e5e7eb", padding: "0 14px", fontSize: 14, outline: "none", boxSizing: "border-box" }}
            />
          </div>
          <div>
            <label style={{ fontSize: 11, fontWeight: 700, color: "#6b7280", textTransform: "uppercase", letterSpacing: ".06em", display: "block", marginBottom: 6 }}>Teléfono (opcional)</label>
            <input
              value={telefono} onChange={e => setTelefono(e.target.value)}
              placeholder="3001234567"
              style={{ width: "100%", height: 48, borderRadius: 12, border: "1.5px solid #e5e7eb", padding: "0 14px", fontSize: 14, outline: "none", boxSizing: "border-box" }}
            />
          </div>
          <button type="submit" disabled={loading}
            style={{ height: 50, borderRadius: 12, border: "none", background: "linear-gradient(135deg,#ea580c,#9a3412)", color: "#fff", fontSize: 14, fontWeight: 900, cursor: loading ? "not-allowed" : "pointer", opacity: loading ? .7 : 1 }}>
            {loading ? "Completando…" : "Completar y entrar →"}
          </button>
        </form>
      </div>
    </div>
  );
}

export const RestauranteDashboard: React.FC = () => {
  const { profile } = useAuth();
  // Admin puede pasar ?negocioId=xxx para ver el panel de otro negocio
  const urlNegocioId = new URLSearchParams(window.location.search).get("negocioId");
  const negocioId = urlNegocioId || profile?.negocioId || "";

  const [negocio, setNegocio] = useState<Negocio | null>(null);
  const [kpis, setKpis] = useState<KPIs>({ comandasActivas: 0, reservasHoy: 0, ticketsPendientes: 0, ventasHoy: 0 });

  // Cargar el negocio para obtener su nombre real
  useEffect(() => {
    if (!negocioId) return;
    negocioService.getNegocio(negocioId).then(setNegocio).catch(() => {});
  }, [negocioId]);

  useEffect(() => {
    if (!negocioId) return;
    const unsubs: (() => void)[] = [];

    unsubs.push(onSnapshot(
      query(collection(db, "negocio_comandas"), where("negocioId", "==", negocioId), where("estado", "in", ["pendiente", "preparando"])),
      snap => setKpis(k => ({ ...k, comandasActivas: snap.size }))
    ));

    const hoyStr = new Date().toISOString().slice(0, 10);
    unsubs.push(onSnapshot(
      query(collection(db, "negocio_reservas"), where("negocioId", "==", negocioId), where("fecha", "==", hoyStr)),
      snap => setKpis(k => ({ ...k, reservasHoy: snap.size }))
    ));

    unsubs.push(onSnapshot(
      query(collection(db, "negocio_tickets"), where("negocioId", "==", negocioId), where("estado", "==", "pendiente_pago")),
      snap => setKpis(k => ({ ...k, ticketsPendientes: snap.size }))
    ));

    const inicioHoy = Timestamp.fromDate((() => { const d = new Date(); d.setHours(0,0,0,0); return d; })());
    const finHoy    = Timestamp.fromDate((() => { const d = new Date(); d.setHours(23,59,59,999); return d; })());
    unsubs.push(onSnapshot(
      query(collection(db, "negocio_tickets"), where("negocioId", "==", negocioId), where("estado", "==", "pagado"), where("creadoEn", ">=", inicioHoy), where("creadoEn", "<=", finHoy)),
      snap => setKpis(k => ({ ...k, ventasHoy: snap.docs.reduce((a, d) => a + (d.data().total ?? 0), 0) }))
    ));

    return () => unsubs.forEach(u => u());
  }, [negocioId]);

  const nombreRestaurante = negocio?.nombre ?? (profile as any)?.nombreNegocio ?? "Mi Restaurante";
  const hora = new Date().getHours();
  const saludo = hora < 12 ? "Buenos días" : hora < 18 ? "Buenas tardes" : "Buenas noches";

  // Usuario registrado pero sin negocio creado → pantalla de recuperación
  if (!urlNegocioId && profile && !profile.negocioId && profile.rolNegocio === "owner") {
    return (
      <CompletarRegistro
        uid={profile.uid}
        email={profile.email ?? ""}
        nombre={profile.nombre ?? ""}
      />
    );
  }

  return (
    <div style={{ background: "#f1f5f9", minWidth: "100%", fontFamily: "-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif" }}>
      <div style={{ maxWidth: 900, margin: "0 auto", padding: "20px 16px 100px" }}>

        {/* ── HERO HEADER ── */}
        <div style={{ position: "relative", borderRadius: 24, overflow: "hidden", marginBottom: 20 }}>
          <div style={{ background: "linear-gradient(145deg,#7a1f0a,#c2410c,#ea580c)", padding: "28px 24px 24px" }}>
            {/* Orbes */}
            <div style={{ position: "absolute", top: -30, right: -30, width: 140, height: 140, borderRadius: "50%", background: "radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 70%)", pointerEvents: "none" }} />
            <div style={{ position: "absolute", bottom: -20, left: "30%", width: 100, height: 100, borderRadius: "50%", background: "radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%)", pointerEvents: "none" }} />
            <div style={{ position: "relative" }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
                <span style={{ fontSize: 22 }}>🍽️</span>
                <span style={{ color: "rgba(255,255,255,.7)", fontSize: 12, fontWeight: 600 }}>{saludo}</span>
              </div>
              <h1 style={{ fontSize: 24, fontWeight: 900, color: "#fff", margin: "0 0 4px", letterSpacing: "-.02em" }}>{nombreRestaurante}</h1>
              <p style={{ color: "rgba(255,255,255,.6)", fontSize: 12, margin: 0 }}>
                {new Date().toLocaleDateString("es-CO", { weekday: "long", day: "numeric", month: "long" })}
              </p>
            </div>
          </div>

          {/* KPIs dentro del header */}
          <div style={{ background: "#fff", borderTop: "1px solid rgba(0,0,0,.06)", display: "grid", gridTemplateColumns: "repeat(4,1fr)" }}>
            {[
              { emoji: "🍳", label: "Comandas", value: kpis.comandasActivas, accent: "#f97316" },
              { emoji: "📅", label: "Reservas hoy", value: kpis.reservasHoy, accent: "#38bdf8" },
              { emoji: "🎫", label: "Pendientes", value: kpis.ticketsPendientes, accent: "#fbbf24" },
              { emoji: "💰", label: "Ventas hoy", value: `$${(kpis.ventasHoy/1000).toFixed(0)}k`, accent: "#4ade80" },
            ].map((k, i) => (
              <div key={i} style={{ padding: "14px 12px", textAlign: "center", borderRight: i < 3 ? "1px solid rgba(0,0,0,.06)" : "none" }}>
                <div style={{ fontSize: 18, marginBottom: 4 }}>{k.emoji}</div>
                <div style={{ fontSize: 18, fontWeight: 900, color: k.accent, lineHeight: 1 }}>{k.value}</div>
                <div style={{ fontSize: 9, color: "#94a3b8", fontWeight: 700, textTransform: "uppercase", letterSpacing: ".04em", marginTop: 3 }}>{k.label}</div>
              </div>
            ))}
          </div>
        </div>

        {/* ── ACCESO RÁPIDO menú público ── */}
        {negocioId && (
          <a href={`/m/${negocioId}`} target="_blank" rel="noopener noreferrer"
            style={{
              display: "flex", alignItems: "center", gap: 12, textDecoration: "none",
              background: "#fff", border: "1px solid #e2e8f0",
              borderRadius: 16, padding: "12px 16px", marginBottom: 20,
            }}>
            <span style={{ fontSize: 20 }}>🔗</span>
            <div style={{ flex: 1 }}>
              <div style={{ color: "#1e293b", fontSize: 13, fontWeight: 700 }}>Menú público</div>
              <div style={{ color: "#94a3b8", fontSize: 11 }}>agrovidacol.com/m/{negocioId}</div>
            </div>
            <ExternalLink style={{ width: 14, height: 14, color: "#cbd5e1" }} />
          </a>
        )}

        {/* ── MÓDULOS ── */}
        <div style={{ marginBottom: 8 }}>
          <div style={{ fontSize: 10, fontWeight: 800, color: "#94a3b8", textTransform: "uppercase", letterSpacing: ".12em", marginBottom: 14 }}>
            Módulos
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 10 }}>
            {MODULOS.map(m => (
              <a key={m.id} href={m.href}
                style={{
                  textDecoration: "none",
                  background: "#fff",
                  borderRadius: 20, overflow: "hidden",
                  border: "1px solid #e2e8f0",
                  boxShadow: "0 4px 16px rgba(0,0,0,.08)",
                  display: "flex", flexDirection: "column",
                  transition: "transform .15s",
                }}
                onMouseEnter={e => (e.currentTarget as HTMLAnchorElement).style.transform = "translateY(-2px)"}
                onMouseLeave={e => (e.currentTarget as HTMLAnchorElement).style.transform = ""}
              >
                {/* Gradient top */}
                <div style={{
                  height: 70,
                  background: `linear-gradient(145deg,${m.from},${m.to})`,
                  display: "flex", alignItems: "center", justifyContent: "center",
                  position: "relative", overflow: "hidden",
                  flexShrink: 0,
                }}>
                  <div style={{ position: "absolute", inset: 0, background: "radial-gradient(circle at 30% 30%,rgba(255,255,255,.18) 0%,transparent 70%)", pointerEvents: "none" }} />
                  <span style={{ fontSize: 28, filter: "drop-shadow(0 4px 8px rgba(0,0,0,.4))", position: "relative" }}>{m.emoji}</span>
                </div>
                {/* Info */}
                <div style={{ padding: "10px 12px 12px" }}>
                  <div style={{ color: "#1e293b", fontSize: 12, fontWeight: 800, lineHeight: 1.2, marginBottom: 3 }}>{m.label}</div>
                  <div style={{ color: "#94a3b8", fontSize: 10, lineHeight: 1.4 }}>{m.desc}</div>
                </div>
              </a>
            ))}
          </div>
        </div>

        {/* ── BANNER MESERO IA ── */}
        <div style={{ marginTop: 20, borderRadius: 24, overflow: "hidden", position: "relative" }}>
          <div style={{ background: "linear-gradient(145deg,#1e1060,#4f46e5,#7c3aed)", padding: "22px 20px" }}>
            <div style={{ position: "absolute", top: -20, right: -20, width: 120, height: 120, borderRadius: "50%", background: "radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%)", pointerEvents: "none" }} />
            <div style={{ position: "relative", display: "flex", gap: 14, alignItems: "flex-start" }}>
              <div style={{
                width: 48, height: 48, borderRadius: 15, flexShrink: 0,
                background: "rgba(255,255,255,.15)", backdropFilter: "blur(8px)",
                display: "flex", alignItems: "center", justifyContent: "center", fontSize: 22,
              }}>🤖</div>
              <div style={{ flex: 1 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
                  <span style={{ color: "#fff", fontSize: 15, fontWeight: 900 }}>Mesero IA activado</span>
                  <span style={{ background: "#4ade80", color: "#052e16", fontSize: 8, fontWeight: 900, padding: "2px 7px", borderRadius: 100, letterSpacing: ".05em" }}>LIVE</span>
                </div>
                <p style={{ color: "rgba(255,255,255,.65)", fontSize: 12, lineHeight: 1.5, margin: "0 0 14px" }}>
                  Tus clientes acceden al menú con QR → chatean con el Mesero IA → el pedido aparece automáticamente en Comandas y en Caja.
                </p>
                {negocioId && (
                  <a href={`/m/${negocioId}/chat`} target="_blank" rel="noopener noreferrer"
                    style={{
                      display: "inline-flex", alignItems: "center", gap: 6,
                      background: "rgba(255,255,255,.15)", color: "#fff",
                      fontSize: 12, fontWeight: 700, padding: "8px 16px", borderRadius: 12,
                      textDecoration: "none", border: "1px solid rgba(255,255,255,.2)",
                    }}>
                    Ver chat del cliente <ExternalLink style={{ width: 12, height: 12 }} />
                  </a>
                )}
              </div>
            </div>
          </div>
        </div>

        {/* Banner suscripción */}
        <SubscriptionBanner negocioId={negocioId} />
      </div>
    </div>
  );
};

const SubscriptionBanner: React.FC<{ negocioId: string }> = ({ negocioId }) => {
  const [estado, setEstado] = useState<string>("trial");
  const [diasRestantes, setDiasRestantes] = useState<number>(7);

  useEffect(() => {
    if (!negocioId) return;
    const unsub = onSnapshot(collection(db, "negocios"), snap => {
      const d = snap.docs.find(d => d.id === negocioId);
      if (d) {
        const data = d.data();
        setEstado(data.suscripcion?.estado ?? "trial");
        if (data.suscripcion?.trialFin) {
          const fin = data.suscripcion.trialFin.toDate ? data.suscripcion.trialFin.toDate() : new Date(data.suscripcion.trialFin);
          setDiasRestantes(Math.max(0, Math.ceil((fin.getTime() - Date.now()) / 86400000)));
        }
      }
    });
    return unsub;
  }, [negocioId]);

  if (estado === "activa") return null;

  return (
    <div style={{ marginTop: 16, background: "rgba(245,158,11,.1)", border: "1px solid rgba(245,158,11,.25)", borderRadius: 20, padding: "16px 18px" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
        <span style={{ fontSize: 18 }}>⏳</span>
        <span style={{ color: "#fbbf24", fontWeight: 800, fontSize: 13 }}>
          {estado === "trial" ? `Prueba gratis · ${diasRestantes} días restantes` : "Suscripción inactiva"}
        </span>
      </div>
      <p style={{ color: "#78716c", fontSize: 12, margin: "0 0 14px", lineHeight: 1.5 }}>
        Activa tu suscripción para continuar usando todos los módulos sin límites.
      </p>
      <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
        <a href={`https://wa.me/573024204914?text=Hola, quiero activar mi suscripción restaurante (negocioId: ${negocioId})`}
          target="_blank" rel="noopener noreferrer"
          style={{ background: "#16a34a", color: "#fff", fontSize: 12, fontWeight: 700, padding: "8px 16px", borderRadius: 12, textDecoration: "none" }}>
          Pagar por WhatsApp
        </a>
        <a href="/negocio"
          style={{ background: "rgba(245,158,11,.2)", color: "#fbbf24", fontSize: 12, fontWeight: 700, padding: "8px 16px", borderRadius: 12, textDecoration: "none", border: "1px solid rgba(245,158,11,.3)" }}>
          Ver opciones de pago
        </a>
      </div>
    </div>
  );
};