import React, { useEffect, useMemo, useState } from "react";
import { createRoot } from "react-dom/client";
import {
  BarChart3,
  Beef,
  Check,
  ChevronLeft,
  ClipboardList,
  ExternalLink,
  Globe,
  Instagram,
  LayoutDashboard,
  Lock,
  MapPin,
  Menu,
  MessageCircle,
  Minus,
  Plus,
  Search,
  ShoppingBag,
  Sparkles,
  Trash2,
  Users,
  X
} from "lucide-react";
import { loadDashboard, loadPublicPage, loginAdmin, postLead, postOrder } from "./services/api";
import { flush, setupCoreTracking, track, trackClickAndOpen, trackingIdentity } from "./tracking/tracker";
import type { CartItem, DashboardPayload, LinkItem, Product, ProductOptionItem, PublicPayload } from "./types";
import "./styles.css";

const brl = new Intl.NumberFormat("pt-BR", { style: "currency", currency: "BRL" });

function iconFor(link: LinkItem) {
  const props = { size: 20, strokeWidth: 2.4 };
  if (link.icon === "whatsapp" || link.link_type === "whatsapp") return <MessageCircle {...props} />;
  if (link.icon === "instagram") return <Instagram {...props} />;
  if (link.icon === "map-pin" || link.link_type === "map") return <MapPin {...props} />;
  if (link.icon === "menu" || link.link_type === "menu") return <ClipboardList {...props} />;
  if (link.icon === "sparkles") return <Sparkles {...props} />;
  return <Globe {...props} />;
}

function useRoute() {
  const [path, setPath] = useState(location.pathname);
  useEffect(() => {
    const update = () => setPath(location.pathname);
    window.addEventListener("popstate", update);
    return () => window.removeEventListener("popstate", update);
  }, []);
  return path;
}

function App() {
  const path = useRoute();
  const [payload, setPayload] = useState<PublicPayload | null>(null);

  useEffect(() => {
    const slug = path.split("/").filter(Boolean)[0] || "sabornabrasa";
    loadPublicPage(slug).then(setPayload);
  }, [path]);

  useEffect(() => {
    if (!payload) return;
    return setupCoreTracking(payload.page.id);
  }, [payload, path]);

  if (!payload) return <div className="boot">Carregando PulseLink...</div>;
  if (path.startsWith("/admin")) return <AdminApp />;
  if (path.includes("/cardapio")) return <MenuPage payload={payload} />;
  return <LinksPage payload={payload} />;
}

function LinksPage({ payload }: { payload: PublicPayload }) {
  const menuLink = payload.links.find((link) => link.link_type === "menu");

  return (
    <main className="link-page">
      <section className="phone-shell">
        <div className="hero-photo">
          <div className="statusbar">9:41</div>
          <div className="logo-mark">
            <Beef size={30} />
            <strong>{payload.account.name}</strong>
            <span>grill</span>
          </div>
        </div>
        <div className="link-content">
          <p className="slogan">{payload.page.slogan}</p>
          <div className="link-stack">
            {payload.links.map((link) => (
              <button
                className={link.link_type === "whatsapp" ? "link-button primary-link" : "link-button"}
                key={link.id}
                onClick={() =>
                  trackClickAndOpen(
                    {
                      event_name: link.link_type === "whatsapp" ? "whatsapp_click" : "link_click",
                      page_id: payload.page.id,
                      link_id: link.id,
                      metadata: { link_type: link.link_type, destination: link.url, position: link.position }
                    },
                    link.url
                  )
                }
              >
                <span className="link-icon">{iconFor(link)}</span>
                <span>{link.title}</span>
                <ExternalLink size={16} />
              </button>
            ))}
          </div>
          <div className="trust-row">
            <span>Qualidade</span>
            <span>Sabor</span>
            <span>Tradição</span>
          </div>
        </div>
      </section>
      <aside className="side-copy">
        <span className="eyebrow">PulseLink Sabor</span>
        <h1>Mais que um link: um cardápio que mede intenção e vira conversa.</h1>
        <p>
          A experiência pública segue o fluxo da imagem: link, cardápio, produto, captura do WhatsApp e pedido pronto.
        </p>
        {menuLink && (
          <button className="desktop-cta" onClick={() => trackClickAndOpen({ event_name: "link_click", link_id: menuLink.id }, menuLink.url)}>
            Ver cardápio
          </button>
        )}
      </aside>
    </main>
  );
}

function MenuPage({ payload }: { payload: PublicPayload }) {
  const [query, setQuery] = useState("");
  const [category, setCategory] = useState(0);
  const [selected, setSelected] = useState<Product | null>(null);
  const [cart, setCart] = useState<CartItem[]>([]);
  const [showCart, setShowCart] = useState(false);
  const [checkout, setCheckout] = useState(false);
  const [success, setSuccess] = useState(false);
  const [leadModal, setLeadModal] = useState(false);
  const [viewedProducts, setViewedProducts] = useState(() => new Set<number>());

  const products = useMemo(() => {
    return payload.products.filter((product) => {
      const matchesCategory = category === 0 || Number(product.category_id) === category;
      const matchesQuery = product.name.toLowerCase().includes(query.toLowerCase());
      return matchesCategory && matchesQuery;
    });
  }, [payload.products, category, query]);

  const featured = products.filter((product) => Number(product.is_featured) === 1);
  const total = cart.reduce((sum, item) => sum + item.quantity * (item.unit_price + item.options.reduce((a, option) => a + option.price, 0)), 0);

  function openProduct(product: Product, source: string) {
    setSelected(product);
    setViewedProducts((current) => {
      const next = new Set(current);
      next.add(product.id);
      if (next.size >= 2 && !localStorage.getItem("pl_lead_modal_skip")) {
        window.setTimeout(() => {
          track({ event_name: "lead_modal_view", page_id: payload.page.id, metadata: { trigger: "two_products" } }, "lead_modal:two_products");
          setLeadModal(true);
        }, 400);
      }
      return next;
    });
    track({ event_name: "product_view", page_id: payload.page.id, product_id: product.id, metadata: { source_section: source, price: product.price } });
  }

  function addItem(item: CartItem) {
    setCart((current) => [...current, item]);
    setSelected(null);
    setShowCart(true);
    track({ event_name: "cart_add", page_id: payload.page.id, product_id: item.product_id, metadata: { total: item.unit_price } });
  }

  return (
    <main className="menu-page">
      <header className="menu-hero">
        <button className="round-action" onClick={() => history.back()} aria-label="Voltar">
          <ChevronLeft size={22} />
        </button>
        <div className="brand-mini">
          <Beef size={26} />
          <strong>{payload.account.name}</strong>
          <small>online</small>
        </div>
        <button className="round-action cart-indicator" onClick={() => setShowCart(true)} aria-label="Abrir carrinho">
          <ShoppingBag size={20} />
          {cart.length > 0 && <span>{cart.length}</span>}
        </button>
      </header>

      <section className="menu-panel">
        <h1>O melhor sabor da nossa região</h1>
        <p>Carnes | Petiscos | Bebidas | Combos</p>
        <label className="search-box">
          <Search size={18} />
          <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Buscar um produto..." />
        </label>
        <div className="tabs">
          {payload.categories.map((cat) => (
            <button className={category === Number(cat.id) ? "active" : ""} key={cat.id} onClick={() => setCategory(Number(cat.id))}>
              {cat.name}
            </button>
          ))}
        </div>
        <SectionTitle title="Destaques" />
        <div className="product-grid">
          {featured.map((product) => (
            <ProductCard key={product.id} product={product} onOpen={() => openProduct(product, "featured")} />
          ))}
        </div>
        <SectionTitle title="Mais pedidos" />
        <div className="order-list">
          {products.map((product) => (
            <button className="order-row" key={product.id} onClick={() => openProduct(product, "category")}>
              <img src={product.image_url} alt="" />
              <span>
                <strong>{product.name}</strong>
                <small>{product.description}</small>
                <b>{product.price ? brl.format(Number(product.price)) : "Consultar"}</b>
              </span>
              <Plus size={20} />
            </button>
          ))}
        </div>
      </section>

      {selected && <ProductSheet product={selected} onClose={() => setSelected(null)} onAdd={addItem} />}
      {showCart && <CartSheet cart={cart} total={total} onClose={() => setShowCart(false)} onRemove={(id) => setCart((items) => items.filter((item) => item.cartId !== id))} onCheckout={() => { setShowCart(false); setCheckout(true); track({ event_name: "order_start", page_id: payload.page.id }); }} />}
      {checkout && (
        <CheckoutSheet
          total={total}
          cart={cart}
          whatsapp={payload.account.whatsapp}
          onClose={() => setCheckout(false)}
          onSuccess={() => {
            setCheckout(false);
            setSuccess(true);
          }}
        />
      )}
      {leadModal && <ProgressiveLeadModal onClose={() => setLeadModal(false)} />}
      {success && <SuccessModal onClose={() => setSuccess(false)} />}
    </main>
  );
}

function SectionTitle({ title }: { title: string }) {
  return <h2 className="section-title">{title}</h2>;
}

function ProductCard({ product, onOpen }: { product: Product; onOpen: () => void }) {
  useEffect(() => {
    const node = document.querySelector(`[data-product-id="${product.id}"]`);
    if (!node) return;
    let timer = 0;
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
          timer = window.setTimeout(() => {
            track({ event_name: "product_impression", product_id: product.id, metadata: { position: product.position } }, `impression:${product.id}`);
          }, 1000);
        } else {
          window.clearTimeout(timer);
        }
      },
      { threshold: [0.5] }
    );
    observer.observe(node);
    return () => {
      window.clearTimeout(timer);
      observer.disconnect();
    };
  }, [product.id, product.position]);

  return (
    <button className="product-card" data-product-id={product.id} onClick={onOpen}>
      <img src={product.image_url} alt="" />
      <strong>{product.name}</strong>
      <small>{product.description}</small>
      <span>
        {product.price ? brl.format(Number(product.price)) : "Consultar"}
        <Plus size={18} />
      </span>
    </button>
  );
}

function ProductSheet({ product, onClose, onAdd }: { product: Product; onClose: () => void; onAdd: (item: CartItem) => void }) {
  const [quantity, setQuantity] = useState(1);
  const [selected, setSelected] = useState<Array<{ id: number; group: string; name: string; price: number }>>([]);
  const [observation, setObservation] = useState("");
  const unitPrice = Number(product.price ?? 0);
  const optionsTotal = selected.reduce((sum, item) => sum + item.price, 0);
  const total = (unitPrice + optionsTotal) * quantity;

  function toggle(option: ProductOptionItem, group: string) {
    setSelected((current) => {
      const exists = current.some((item) => item.id === option.id);
      const next = exists ? current.filter((item) => item.id !== option.id) : [...current, { id: option.id, group, name: option.name, price: Number(option.price) }];
      track({ event_name: exists ? "addon_remove" : "addon_select", product_id: product.id, metadata: { option_selected: option.name, price: option.price } });
      return next;
    });
  }

  return (
    <div className="overlay">
      <section className="product-sheet">
        <img className="sheet-image" src={product.image_url} alt="" />
        <button className="floating-close" onClick={onClose} aria-label="Fechar">
          <X size={20} />
        </button>
        <div className="sheet-content">
          <h2>{product.name}</h2>
          <strong className="price">{unitPrice ? brl.format(unitPrice) : "Consultar"}</strong>
          <p>{product.description}</p>
          {product.options.map((option) => (
            <div className="option-group" key={option.id}>
              <h3>{option.name}</h3>
              {option.items.map((item) => (
                <label className="check-row" key={item.id}>
                  <input type="checkbox" checked={selected.some((entry) => entry.id === item.id)} onChange={() => toggle(item, option.name)} />
                  <span>{item.name}</span>
                  <b>+ {brl.format(Number(item.price))}</b>
                </label>
              ))}
            </div>
          ))}
          <label className="observation">
            Observação
            <textarea value={observation} onChange={(event) => { setObservation(event.target.value); track({ event_name: "observation_entered", product_id: product.id }, `obs:${product.id}`); }} placeholder="Ex.: sem cebola" />
          </label>
          <div className="quantity-row">
            <strong>Quantidade</strong>
            <span>
              <button onClick={() => setQuantity(Math.max(1, quantity - 1))} aria-label="Diminuir quantidade"><Minus size={18} /></button>
              <b>{quantity}</b>
              <button onClick={() => setQuantity(quantity + 1)} aria-label="Aumentar quantidade"><Plus size={18} /></button>
            </span>
          </div>
          <button
            className="checkout-button"
            onClick={() =>
              onAdd({
                cartId: crypto.randomUUID(),
                product_id: product.id,
                name: product.name,
                image_url: product.image_url,
                quantity,
                unit_price: unitPrice,
                options: selected,
                observation
              })
            }
          >
            Adicionar - {brl.format(total)}
          </button>
        </div>
      </section>
    </div>
  );
}

function CartSheet({ cart, total, onClose, onRemove, onCheckout }: { cart: CartItem[]; total: number; onClose: () => void; onRemove: (id: string) => void; onCheckout: () => void }) {
  return (
    <div className="overlay">
      <section className="modal-card cart-sheet">
        <button className="close-button" onClick={onClose} aria-label="Fechar"><X size={18} /></button>
        <h2>Seu pedido</h2>
        {cart.length === 0 && <p className="empty">Nenhum item adicionado.</p>}
        {cart.map((item) => (
          <div className="cart-row" key={item.cartId}>
            <img src={item.image_url} alt="" />
            <span>
              <strong>{item.quantity}x {item.name}</strong>
              <small>{item.options.map((option) => option.name).join(", ") || "Sem adicionais"}</small>
            </span>
            <b>{brl.format(item.quantity * (item.unit_price + item.options.reduce((sum, option) => sum + option.price, 0)))}</b>
            <button onClick={() => onRemove(item.cartId)} aria-label="Remover item"><Trash2 size={16} /></button>
          </div>
        ))}
        <div className="total-line"><span>Total:</span><strong>{brl.format(total)}</strong></div>
        <button className="whatsapp-button" disabled={!cart.length} onClick={onCheckout}>Continuar e enviar no WhatsApp</button>
        <button className="text-action" onClick={onClose}>Adicionar mais itens</button>
      </section>
    </div>
  );
}

function CheckoutSheet({ cart, total, whatsapp, onClose, onSuccess }: { cart: CartItem[]; total: number; whatsapp: string; onClose: () => void; onSuccess: () => void }) {
  const [phone, setPhone] = useState("");
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  async function submit() {
    track({ event_name: "lead_form_submit" });
    const order = await postOrder({
      account_id: 1,
      ...trackingIdentity,
      lead: { phone, name, email, source: "checkout" },
      items: cart
    });
    const message = order.message || buildLocalMessage(cart, total, { phone, name });
    track({ event_name: "order_created", order_id: order.order_id, metadata: { total } });
    track({ event_name: "whatsapp_order_click", order_id: order.order_id, metadata: { total } });
    flush();
    window.open(`https://wa.me/${whatsapp}?text=${encodeURIComponent(message)}`, "_blank", "noopener,noreferrer");
    onSuccess();
  }

  useEffect(() => {
    track({ event_name: "lead_form_view" }, "lead_form_view:checkout");
  }, []);

  return (
    <div className="overlay">
      <section className="modal-card checkout-sheet">
        <button className="close-button" onClick={onClose} aria-label="Fechar"><X size={18} /></button>
        <div className="logo-mark compact"><Beef size={24} /><strong>Quase lá!</strong></div>
        <p>Informe seu WhatsApp para enviarmos seu pedido.</p>
        <label className="input-row">
          WhatsApp
          <input value={phone} onFocus={() => track({ event_name: "lead_form_start" }, "lead_form_start")} onChange={(event) => setPhone(event.target.value)} placeholder="+55 (11) 91234-5678" inputMode="tel" />
        </label>
        <label className="input-row">
          Nome opcional
          <input value={name} onChange={(event) => setName(event.target.value)} placeholder="Seu nome" />
        </label>
        <label className="input-row">
          E-mail opcional
          <input value={email} onChange={(event) => setEmail(event.target.value)} placeholder="seuemail@exemplo.com" type="email" />
        </label>
        <button className="checkout-button" disabled={phone.replace(/\D/g, "").length < 10} onClick={submit}>
          Enviar pedido no WhatsApp
        </button>
        <span className="safe"><Lock size={14} /> Seus dados estão seguros.</span>
      </section>
    </div>
  );
}

function ProgressiveLeadModal({ onClose }: { onClose: () => void }) {
  const [phone, setPhone] = useState("");
  const [email, setEmail] = useState("");
  async function submit() {
    await postLead({ account_id: 1, phone, email, marketing_consent: true, consent_source: "progressive_modal" });
    track({ event_name: "lead_modal_submit" });
    onClose();
  }
  function skip() {
    localStorage.setItem("pl_lead_modal_skip", "1");
    track({ event_name: "lead_modal_skip" });
    onClose();
  }
  return (
    <div className="overlay">
      <section className="modal-card lead-modal">
        <button className="close-button" onClick={skip} aria-label="Fechar"><X size={18} /></button>
        <span className="gift">🎁</span>
        <h2>Quer receber novidades?</h2>
        <p>Deixe seu WhatsApp e e-mail para receber promoções e lançamentos.</p>
        <label className="input-row">WhatsApp<input value={phone} onChange={(event) => setPhone(event.target.value)} placeholder="+55 (11) 91234-5678" /></label>
        <label className="input-row">E-mail opcional<input value={email} onChange={(event) => setEmail(event.target.value)} placeholder="seuemail@exemplo.com" /></label>
        <button className="whatsapp-button" disabled={phone.replace(/\D/g, "").length < 10} onClick={submit}>Quero receber</button>
        <button className="text-action" onClick={skip}>Agora não</button>
      </section>
    </div>
  );
}

function SuccessModal({ onClose }: { onClose: () => void }) {
  return (
    <div className="overlay">
      <section className="modal-card success-modal">
        <button className="close-button" onClick={onClose} aria-label="Fechar"><X size={18} /></button>
        <span className="success-icon"><Check size={44} /></span>
        <h2>Pedido enviado!</h2>
        <p>Seu pedido foi preparado e enviado para o nosso WhatsApp.</p>
        <button className="outline-button" onClick={onClose}>Voltar ao cardápio</button>
      </section>
    </div>
  );
}

function buildLocalMessage(cart: CartItem[], total: number, lead: { phone: string; name: string }) {
  const lines = ["Olá! Quero fazer este pedido:", ""];
  cart.forEach((item) => {
    lines.push(`${item.quantity}x ${item.name}`);
    item.options.forEach((option) => lines.push(`- ${option.name}`));
    lines.push("");
  });
  lines.push(`Total: ${brl.format(total)}`);
  if (lead.name) lines.push(`Nome: ${lead.name}`);
  lines.push(`Telefone: ${lead.phone}`);
  lines.push("Pedido realizado pelo PulseLink.");
  return lines.join("\n");
}

function AdminApp() {
  const [auth, setAuth] = useState(() => localStorage.getItem("pl_admin_token"));
  const [email, setEmail] = useState("admin@pulselink.local");
  const [password, setPassword] = useState("password");
  const [loginError, setLoginError] = useState("");
  const [dashboard, setDashboard] = useState<DashboardPayload | null>(null);
  useEffect(() => {
    if (!auth) return;
    loadDashboard().then(setDashboard);
  }, [auth]);

  async function submitLogin(event: React.FormEvent) {
    event.preventDefault();
    setLoginError("");
    const result = await loginAdmin({ email, password });
    if (!result.token) {
      setLoginError(result.error || "Nao foi possivel entrar.");
      return;
    }
    localStorage.setItem("pl_admin_token", result.token);
    setAuth(result.token);
  }

  if (!auth) {
    return (
      <main className="admin-login-page">
        <form className="admin-login-card" onSubmit={submitLogin}>
          <span className="eyebrow">Administracao</span>
          <h1>Entrar no PulseLink</h1>
          <label className="input-row">
            E-mail
            <input value={email} onChange={(event) => setEmail(event.target.value)} type="email" />
          </label>
          <label className="input-row">
            Senha
            <input value={password} onChange={(event) => setPassword(event.target.value)} type="password" />
          </label>
          {loginError && <p className="login-error">{loginError}</p>}
          <button className="checkout-button" type="submit">Entrar</button>
          <p className="login-hint">Acesso inicial: admin@pulselink.local / password</p>
        </form>
      </main>
    );
  }

  const kpis = dashboard?.kpis ?? {};
  const kpiItems = [
    ["Visitantes únicos", kpis.unique_visitors ?? 0],
    ["Sessões", kpis.sessions ?? 0],
    ["Pageviews", kpis.pageviews ?? 0],
    ["Cliques", kpis.link_clicks ?? 0],
    ["WhatsApp", kpis.whatsapp_clicks ?? 0],
    ["Leads", kpis.leads ?? 0],
    ["Pedidos", kpis.orders ?? 0],
    ["Produtos vistos", kpis.products_viewed ?? 0]
  ];

  return (
    <main className="admin-shell">
      <aside className="admin-sidebar">
        <strong><LayoutDashboard size={20} /> PulseLink</strong>
        {["Dashboard", "Minha página", "Links", "Produtos", "Pedidos", "Leads", "Analytics", "Campanhas", "Configurações"].map((item) => (
          <button key={item}>{item}</button>
        ))}
        <button
          onClick={() => {
            localStorage.removeItem("pl_admin_token");
            setAuth(null);
          }}
        >
          Sair
        </button>
      </aside>
      <section className="admin-main">
        <header className="admin-topbar">
          <span className="eyebrow">Painel administrativo</span>
          <h1>Inteligência de links, cardápio e WhatsApp</h1>
          <div className="period-tabs"><button className="active">Hoje</button><button>7 dias</button><button>30 dias</button></div>
        </header>
        <div className="kpi-grid">
          {kpiItems.map(([label, value]) => (
            <article className="kpi-card" key={label}>
              <span>{label}</span>
              <strong>{value}</strong>
            </article>
          ))}
        </div>
        <div className="admin-grid">
          <article className="panel">
            <h2><BarChart3 size={18} /> Funil</h2>
            {(dashboard?.funnel ?? []).map((step) => (
              <div className="funnel-row" key={step.label}>
                <span>{step.label}</span>
                <b>{step.value}</b>
                <i style={{ width: `${Math.min(100, step.value)}%` }} />
              </div>
            ))}
          </article>
          <article className="panel">
            <h2><Users size={18} /> Origens</h2>
            {(dashboard?.sources.length ? dashboard.sources : [{ source: "Nenhum dado no período", sessions: 0 }]).map((source) => (
              <div className="source-row" key={source.source}><span>{source.source}</span><b>{source.sessions}</b></div>
            ))}
          </article>
          <article className="panel">
            <h2><ShoppingBag size={18} /> Produtos</h2>
            {(dashboard?.top_products.length ? dashboard.top_products : [{ name: "Nenhum produto visto", views: 0 }]).map((product) => (
              <div className="source-row" key={product.name}><span>{product.name}</span><b>{product.views}</b></div>
            ))}
          </article>
          <article className="panel">
            <h2>Analytics Health</h2>
            <p>Último evento: {dashboard?.health.last_event_at || "Nenhum evento recebido"}</p>
            <p>Eventos nas últimas 24h: {dashboard?.health.events_24h ?? 0}</p>
          </article>
        </div>
      </section>
    </main>
  );
}

createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);