"use client";

import { useEffect, useMemo, useState } from "react";
import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";
import { getSupabaseClient } from "@/lib/supabase";
import { getCompanyContext } from "@/lib/company-context";
import {
  ArrowDownAZ,
  ArrowUpZA,
  CalendarCheck,
  CalendarClock,
  CalendarOff,
  CalendarX,
  CheckSquare,
  FileText,
  LayoutList,
  Loader2,
  Search,
  Square,
} from "lucide-react";
import { Input } from "@/components/ui/input";
import { CustomSelect } from "@/components/ui/custom-select";
import { type OrderStatus } from "@/types/orders";
import { parseDateValue } from "@/utils/formatters";

type BatchOrderDocumentsModalProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
};

type OrderSummary = {
  id: string;
  number: number | string;
  clientName: string;
  createdAt: string;
  status: OrderStatus;
  deliveryDate: string | null;
};

type DeadlineFilter = "all" | "late" | "today" | "ontime" | "none";

const statusLabel: Record<OrderStatus, string> = {
  pending_production: "Aguardando",
  in_production: "Em Produção",
  finished: "Finalizado",
  delivered: "Entregue",
  canceled: "Cancelado",
};

function isConcludedOrder(status: OrderStatus) {
  return status === "finished" || status === "delivered" || status === "canceled";
}

function isDeadlineActionableOrder(order: Pick<OrderSummary, "status">) {
  return !isConcludedOrder(order.status);
}

function firstQuote<T>(value: T | T[] | null | undefined): T | null {
  if (!value) return null;
  return Array.isArray(value) ? value[0] ?? null : value;
}

export function BatchOrderDocumentsModal({ open, onOpenChange }: BatchOrderDocumentsModalProps) {
  const [loading, setLoading] = useState(false);
  const [orders, setOrders] = useState<OrderSummary[]>([]);
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [searchTerm, setSearchTerm] = useState("");
  const [isPrinting, setIsPrinting] = useState(false);
  const [sortOrder, setSortOrder] = useState<"desc" | "asc">("desc");
  const [statusFilter, setStatusFilter] = useState<OrderStatus | "all">("all");
  const [deadlineFilter, setDeadlineFilter] = useState<DeadlineFilter>("all");
  const [printMode, setPrintMode] = useState("order_pdf");

  useEffect(() => {
    if (open) {
      void fetchRecentOrders();
    } else {
      setSelectedIds(new Set());
      setSearchTerm("");
      setStatusFilter("all");
      setDeadlineFilter("all");
      setPrintMode("order_pdf");
    }
  }, [open]);

  async function fetchRecentOrders() {
    setLoading(true);
    try {
      const supabase = getSupabaseClient();
      const {
        data: { user },
      } = await supabase.auth.getUser();
      if (!user) return;

      const ctx = await getCompanyContext(supabase, user);
      const tenantIds = ctx.tenantIds?.length ? ctx.tenantIds : [user.id];

      const { data: ordersData, error } = await supabase
        .from("orders")
        .select("id, number, created_at, status, client_id, user_id, quotes(delivery_date)")
        .in("user_id", tenantIds)
        .order("created_at", { ascending: false })
        .limit(50);

      if (error) throw error;

      if (ordersData && ordersData.length > 0) {
        const clientIds = Array.from(new Set(ordersData.map((order) => order.client_id).filter(Boolean)));
        let clientsMap: Record<string, string> = {};

        if (clientIds.length > 0) {
          const { data: clientsData } = await supabase
            .from("clients")
            .select("id, name, company_name")
            .in("id", clientIds);

          if (clientsData) {
            clientsMap = clientsData.reduce((acc, client) => {
              acc[client.id] = client.company_name || client.name || "Sem Nome";
              return acc;
            }, {} as Record<string, string>);
          }
        }

        const summary: OrderSummary[] = ordersData.map((order) => ({
          id: order.id,
          number: order.number,
          clientName: clientsMap[order.client_id] || "Sem Nome",
          createdAt: order.created_at,
          status: order.status as OrderStatus,
          deliveryDate: firstQuote(order.quotes)?.delivery_date || null,
        }));

        setOrders(summary);
      } else {
        setOrders([]);
      }
    } catch (error) {
      console.error("Erro ao buscar pedidos:", error);
    } finally {
      setLoading(false);
    }
  }

  const filteredOrders = useMemo(() => {
    const todayDate = new Date();
    todayDate.setHours(0, 0, 0, 0);

    return orders
      .filter((order) => {
        const term = searchTerm.toLowerCase();
        const matchesTerm =
          String(order.number).includes(term) || order.clientName.toLowerCase().includes(term);

        if (!matchesTerm) return false;
        if (statusFilter !== "all" && order.status !== statusFilter) return false;

        if (deadlineFilter !== "all") {
          if (!isDeadlineActionableOrder(order)) return false;

          if (!order.deliveryDate) {
            return deadlineFilter === "none";
          }

          const deliveryDate = parseDateValue(order.deliveryDate);
          if (!deliveryDate) {
            return deadlineFilter === "none";
          }

          if (deadlineFilter === "none") return false;

          deliveryDate.setHours(0, 0, 0, 0);
          const diffDays = Math.round((deliveryDate.getTime() - todayDate.getTime()) / (1000 * 3600 * 24));

          if (deadlineFilter === "late" && diffDays >= 0) return false;
          if (deadlineFilter === "today" && diffDays !== 0) return false;
          if (deadlineFilter === "ontime" && diffDays < 0) return false;
        }

        return true;
      })
      .sort((a, b) => {
        const timeA = new Date(a.createdAt).getTime();
        const timeB = new Date(b.createdAt).getTime();
        return sortOrder === "desc" ? timeB - timeA : timeA - timeB;
      });
  }, [orders, searchTerm, statusFilter, deadlineFilter, sortOrder]);

  const selectedFilteredCount = filteredOrders.filter((order) => selectedIds.has(order.id)).length;

  const deadlineKpis = useMemo(() => {
    let late = 0;
    let today = 0;
    let ontime = 0;
    let none = 0;
    let all = 0;

    const todayDate = new Date();
    todayDate.setHours(0, 0, 0, 0);

    const baseOrders = orders.filter((order) => {
      const term = searchTerm.toLowerCase();
      const matchesTerm =
        String(order.number).includes(term) || order.clientName.toLowerCase().includes(term);
      const matchesStatus = statusFilter === "all" || order.status === statusFilter;
      return matchesTerm && matchesStatus;
    });

    for (const order of baseOrders) {
      all++;

      if (!isDeadlineActionableOrder(order)) continue;

      if (!order.deliveryDate) {
        none++;
        continue;
      }

      const deliveryDate = parseDateValue(order.deliveryDate);
      if (!deliveryDate) {
        none++;
        continue;
      }

      deliveryDate.setHours(0, 0, 0, 0);
      const diffDays = Math.round((deliveryDate.getTime() - todayDate.getTime()) / (1000 * 3600 * 24));

      if (diffDays < 0) late++;
      else if (diffDays === 0) today++;
      else ontime++;
    }

    return { all, late, today, ontime, none };
  }, [orders, searchTerm, statusFilter]);

  const kpiItems = [
    { id: "all" as const, title: "Todos", count: deadlineKpis.all, icon: LayoutList, bg: "#6F4BFF", accent: "#4A2CD8" },
    { id: "late" as const, title: "Em Atraso", count: deadlineKpis.late, icon: CalendarX, bg: "#FF2B67", accent: "#B31845" },
    { id: "today" as const, title: "Vence Hoje", count: deadlineKpis.today, icon: CalendarClock, bg: "#66C7FF", accent: "#2C98D4" },
    { id: "ontime" as const, title: "No Prazo", count: deadlineKpis.ontime, icon: CalendarCheck, bg: "#00C977", accent: "#078B56" },
    { id: "none" as const, title: "S/ Prazo", count: deadlineKpis.none, icon: CalendarOff, bg: "#7C6CFF", accent: "#5745E0" },
  ];

  const toggleSelection = (id: string) => {
    const nextSelectedIds = new Set(selectedIds);
    if (nextSelectedIds.has(id)) nextSelectedIds.delete(id);
    else nextSelectedIds.add(id);
    setSelectedIds(nextSelectedIds);
  };

  const toggleAll = () => {
    if (selectedFilteredCount === filteredOrders.length && filteredOrders.length > 0) {
      const nextSelectedIds = new Set(selectedIds);
      filteredOrders.forEach((order) => nextSelectedIds.delete(order.id));
      setSelectedIds(nextSelectedIds);
    } else {
      const nextSelectedIds = new Set(selectedIds);
      filteredOrders.forEach((order) => nextSelectedIds.add(order.id));
      setSelectedIds(nextSelectedIds);
    }
  };

  async function handleBatchPrint() {
    if (selectedIds.size === 0) return;

    setIsPrinting(true);
    try {
      const selectedOrderIds = Array.from(selectedIds);
      const iframe = document.createElement("iframe");
      iframe.setAttribute("aria-hidden", "true");
      iframe.style.position = "fixed";
      iframe.style.right = "0";
      iframe.style.bottom = "0";
      iframe.style.width = "0";
      iframe.style.height = "0";
      iframe.style.border = "0";
      iframe.style.opacity = "0";
      iframe.style.pointerEvents = "none";
      document.body.appendChild(iframe);

      const cleanup = () => {
        window.removeEventListener("message", handleMessage);
        window.clearTimeout(fallbackTimeout);
        if (document.body.contains(iframe)) {
          document.body.removeChild(iframe);
        }
        setIsPrinting(false);
      };

      const handleMessage = (event: MessageEvent) => {
        if (event.origin !== window.location.origin) return;
        if (event.data?.type !== "batch-orders-print-finished") return;
        cleanup();
      };

      const fallbackTimeout = window.setTimeout(() => {
        cleanup();
      }, 30000);

      window.addEventListener("message", handleMessage);
      iframe.src = `/dashboard/orders/print?ids=${encodeURIComponent(selectedOrderIds.join(","))}&autoprint=1&embedded=1&ts=${Date.now()}`;
    } catch (error) {
      console.error("Erro ao imprimir pedidos em massa:", error);
      setIsPrinting(false);
      alert("Ocorreu um erro ao gerar os pedidos para impressão.");
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className="max-w-5xl overflow-hidden border-0 p-0 flex flex-col max-h-[85vh]"
        onPointerDownOutside={(event) => event.preventDefault()}
        onEscapeKeyDown={(event) => event.preventDefault()}
      >
        <div className="border-b border-zinc-200 bg-white px-5 py-4 shrink-0">
          <div className="flex items-center gap-3">
            <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[var(--ks-color-primary-soft)] text-[var(--ks-color-primary)]">
              <FileText size={20} />
            </div>
            <div>
              <DialogTitle className="text-lg font-semibold text-zinc-900">
                Impressão Pedidos em Massa
              </DialogTitle>
              <DialogDescription className="text-sm text-zinc-500">
                Selecione os pedidos e imprima as vias de uma só vez.
              </DialogDescription>
            </div>
          </div>
        </div>

        <div className="flex flex-col gap-4 p-5 flex-1 min-h-0">
          <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-3">
            {kpiItems.map((kpi) => {
              const isActive = deadlineFilter === kpi.id;
              const Icon = kpi.icon;

              return (
                <button
                  key={kpi.id}
                  type="button"
                  onClick={() => setDeadlineFilter(isActive ? "all" : kpi.id)}
                  className="relative overflow-hidden flex flex-col gap-2 p-3 text-left transition-all duration-200 cursor-pointer border hover:-translate-y-0.5"
                  style={{
                    background: isActive
                      ? `linear-gradient(135deg, ${kpi.bg} 0%, ${kpi.accent} 100%)`
                      : "#ffffff",
                    boxShadow: isActive
                      ? "0 10px 26px rgba(20, 25, 40, 0.18)"
                      : "0 1px 6px rgba(18, 24, 40, 0.06)",
                    borderColor: isActive ? "transparent" : kpi.bg,
                    borderTopLeftRadius: "18px",
                    borderTopRightRadius: "8px",
                    borderBottomRightRadius: "18px",
                    borderBottomLeftRadius: "8px",
                  }}
                  title={`Filtrar por: ${kpi.title}`}
                >
                  <div className="relative z-10 flex justify-between items-start w-full">
                    <span
                      className="text-3xl font-black tracking-tight"
                      style={{ color: isActive ? "#FFFFFF" : kpi.accent }}
                    >
                      {kpi.count}
                    </span>
                    <div
                      className="p-1.5 rounded-lg border"
                      style={{
                        borderColor: isActive ? "rgba(255,255,255,0.2)" : `${kpi.bg}35`,
                        backgroundColor: isActive ? "rgba(0,0,0,0.10)" : "transparent",
                      }}
                    >
                      <Icon size={16} strokeWidth={2.4} style={{ color: isActive ? "#FFFFFF" : kpi.accent }} />
                    </div>
                  </div>

                  <span
                    className="relative z-10 font-extrabold text-[11px] uppercase tracking-[0.12em]"
                    style={{ color: isActive ? "rgba(255,255,255,0.95)" : kpi.accent }}
                  >
                    {kpi.title}
                  </span>
                </button>
              );
            })}
          </div>

          <div className="flex flex-wrap gap-3 items-center">
            <div className="flex-1 min-w-[200px]">
              <Input
                placeholder="Buscar por número ou cliente"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                icon={<Search size={14} />}
              />
            </div>

            <div className="w-full sm:w-auto flex-1 min-w-[170px] max-w-full sm:max-w-[200px]">
              <CustomSelect
                options={[
                  { value: "all", label: "Status da Etapa" },
                  { value: "pending_production", label: "Aguardando" },
                  { value: "in_production", label: "Em Produção" },
                  { value: "finished", label: "Finalizado" },
                  { value: "delivered", label: "Entregue" },
                  { value: "canceled", label: "Cancelado" },
                ]}
                value={statusFilter}
                onChange={(value) => setStatusFilter(value as OrderStatus | "all")}
                portal={false}
              />
            </div>

            <button
              type="button"
              onClick={() => setSortOrder(sortOrder === "desc" ? "asc" : "desc")}
              className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-zinc-200 bg-white text-zinc-500 hover:bg-zinc-50 hover:text-zinc-900 transition-colors"
              title={`Ordenar por data (${sortOrder === "desc" ? "Mais recentes" : "Mais antigos"})`}
            >
              {sortOrder === "desc" ? <ArrowDownAZ size={18} /> : <ArrowUpZA size={18} />}
            </button>

            <div className="w-[220px]">
              <CustomSelect
                options={[{ value: "order_pdf", label: "Via do Pedido (PDF)" }]}
                value={printMode}
                onChange={setPrintMode}
                portal={false}
              />
            </div>
          </div>

          <div className="flex-1 overflow-auto rounded-xl border border-zinc-200 bg-zinc-50/50">
            {loading ? (
              <div className="flex justify-center items-center h-full">
                <Loader2 className="w-6 h-6 animate-spin text-[var(--ks-color-primary)]" />
              </div>
            ) : filteredOrders.length === 0 ? (
              <div className="flex flex-col justify-center items-center h-full text-zinc-500 text-sm">
                Nenhum pedido encontrado.
              </div>
            ) : (
              <table className="w-full text-left text-sm">
                <thead className="bg-zinc-100/80 text-zinc-500 sticky top-0 z-10">
                  <tr>
                    <th className="p-3 font-semibold w-10">
                      <button onClick={toggleAll} className="text-zinc-400 hover:text-zinc-600 transition-colors">
                        {selectedFilteredCount === filteredOrders.length && filteredOrders.length > 0 ? (
                          <CheckSquare className="w-5 h-5 text-[var(--ks-color-primary)]" />
                        ) : (
                          <Square className="w-5 h-5" />
                        )}
                      </button>
                    </th>
                    <th className="p-3 font-semibold">Pedido</th>
                    <th className="p-3 font-semibold">Cliente</th>
                    <th className="p-3 font-semibold">Status</th>
                    <th className="p-3 font-semibold">Data</th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-zinc-200">
                  {filteredOrders.map((order) => {
                    const isSelected = selectedIds.has(order.id);
                    return (
                      <tr
                        key={order.id}
                        className={`hover:bg-white transition-colors cursor-pointer ${isSelected ? "bg-indigo-50/30" : ""}`}
                        onClick={() => toggleSelection(order.id)}
                      >
                        <td className="p-3">
                          {isSelected ? (
                            <CheckSquare className="w-5 h-5 text-[var(--ks-color-primary)]" />
                          ) : (
                            <Square className="w-5 h-5 text-zinc-300" />
                          )}
                        </td>
                        <td className="p-3 font-bold text-zinc-900">#{order.number}</td>
                        <td className="p-3 text-zinc-700">{order.clientName}</td>
                        <td className="p-3">
                          <span
                            className={`inline-flex items-center justify-center text-center border px-2 py-1 rounded-md text-[10px] font-bold uppercase tracking-wider leading-[1.2] shadow-sm ${
                              order.status === "finished" || order.status === "delivered"
                                ? "bg-emerald-50 text-emerald-700 border-emerald-200"
                                : order.status === "canceled"
                                  ? "bg-rose-50 text-rose-700 border-rose-200"
                                  : order.status === "in_production"
                                    ? "bg-sky-50 text-sky-700 border-sky-200"
                                    : "bg-slate-50 text-slate-600 border-slate-200"
                            }`}
                          >
                            {statusLabel[order.status]}
                          </span>
                        </td>
                        <td className="p-3 text-zinc-500">{new Date(order.createdAt).toLocaleDateString("pt-BR")}</td>
                      </tr>
                    );
                  })}
                </tbody>
              </table>
            )}
          </div>
        </div>

        <div className="border-t border-zinc-200 bg-zinc-50 px-5 py-4 shrink-0 flex items-center justify-between">
          <div className="text-sm font-medium text-zinc-600">
            <strong className="text-zinc-900">{selectedIds.size}</strong> pedidos selecionados
          </div>
          <div className="flex gap-2">
            <button
              type="button"
              onClick={handleBatchPrint}
              disabled={selectedIds.size === 0 || isPrinting}
              className="inline-flex h-10 items-center justify-center gap-2 rounded-xl bg-[var(--ks-color-primary)] px-5 text-sm font-semibold text-white transition-colors hover:bg-[var(--ks-color-primary-strong)] disabled:opacity-60"
            >
              {isPrinting ? (
                <>
                  <Loader2 className="w-4 h-4 animate-spin" />
                  Gerando...
                </>
              ) : (
                <>
                  <FileText size={16} />
                  Imprimir {selectedIds.size} Pedidos
                </>
              )}
            </button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}