"use client";

import { useEffect, useState, useRef } from "react";
import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";
import { Printer, Download, Tag } from "lucide-react";
import { OrderLabelPreview } from "./order-label-preview";
import { type OrderLabelPayload } from "@/lib/orders/order-label-print";
import * as htmlToImage from "html-to-image";
import QRCode from "qrcode";
import { getSupabaseClient } from "@/lib/supabase";
import { getCompanyContext } from "@/lib/company-context";
import { buildPublicOrderStatusUrl, ensureOrderPublicStatusToken } from "@/lib/orders/public-status-link";

type OrderLabelPrintModalProps = {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  orderId?: string | null;
  orderNumber?: number | string | null;
};

export function OrderLabelPrintModal({
  open,
  onOpenChange,
  orderId,
  orderNumber,
}: OrderLabelPrintModalProps) {
  const previewRef = useRef<HTMLDivElement>(null);
  const [isDownloading, setIsDownloading] = useState(false);
  const [loading, setLoading] = useState(false);
  const [payload, setPayload] = useState<OrderLabelPayload | null>(null);
  const [qrCodeDataUrl, setQrCodeDataUrl] = useState<string | null>(null);

  useEffect(() => {
    if (!open || !orderId) {
      setPayload(null);
      setQrCodeDataUrl(null);
      return;
    }

    async function loadData() {
      setLoading(true);
      try {
        const supabase = getSupabaseClient();
        const { data: { user } } = await supabase.auth.getUser();
        if (!user) throw new Error("Não autenticado");

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

        // Fetch Order
        const { data: orderData, error: orderError } = await supabase
          .from("orders")
          .select("*, quotes(id, delivery_date, share_token)")
          .eq("id", orderId)
          .in("user_id", tenantIds)
          .single();

        if (orderError) throw orderError;

        // Fetch Client and Profile
        const [{ data: clientData }, { data: profileData }] = await Promise.all([
          supabase
            .from("clients")
            .select("*")
            .eq("id", orderData.client_id)
            .in("user_id", tenantIds)
            .maybeSingle(),
          supabase
            .from("profiles")
            .select("*")
            .eq("id", orderData.user_id)
            .maybeSingle(),
        ]);

        const generatedPayload: OrderLabelPayload = {
          company: {
            name: profileData?.catalog_name || profileData?.store_name || "Empresa",
            logoUrl: profileData?.logo_url || profileData?.catalog_logo_url || null,
            phone: profileData?.company_phone || profileData?.phone || null,
            whatsapp: profileData?.company_whatsapp || profileData?.whatsapp || null,
            address: profileData?.address || null,
            cnpj: profileData?.cnpj || null,
          },
          order: {
            id: orderData.id,
            number: orderData.number,
            createdAt: orderData.created_at,
            totalAmount: orderData.total_amount,
            paidAmount: orderData.paid_amount,
            financialStatus: orderData.financial_status,
            status: orderData.status,
            notes: orderData.notes || orderData.internal_notes || null,
          },
          client: {
            name: clientData?.name || null,
            companyName: clientData?.company_name || null,
            phone: clientData?.phone || null,
            whatsapp: clientData?.whatsapp || null,
            document: clientData?.document || null,
            addressStreet: clientData?.address_street || null,
            addressNumber: clientData?.address_number || null,
            addressComplement: clientData?.address_complement || null,
            addressNeighborhood: clientData?.address_neighborhood || null,
            addressCity: clientData?.address_city || null,
            addressState: clientData?.address_state || null,
            addressZip: clientData?.address_zip || null,
            notes: clientData?.notes || null,
          },
          quote: {
            deliveryDate: Array.isArray(orderData.quotes) ? orderData.quotes[0]?.delivery_date : orderData.quotes?.delivery_date || null,
          },
        };

        setPayload(generatedPayload);

        const shareToken = await ensureOrderPublicStatusToken({
          orderId: orderData.id,
          user,
          existingToken: orderData.share_token,
          existingEnabled: orderData.share_enabled,
        });

        const profileSlug = profileData?.slug;
        const profileOwnerId = orderData.user_id;

        const { data: domainData } = profileOwnerId
          ? await supabase
              .from("profile_custom_domains")
              .select("domain,verified")
              .eq("profile_id", profileOwnerId)
              .maybeSingle()
          : { data: null };

        const customDomain = String(domainData?.domain || "").trim().toLowerCase();
        const customDomainVerified = Boolean(domainData?.verified);
        
        const origin = typeof window !== "undefined" ? window.location.origin : "https://ktalogu.com.br";
        const resolvedUrl = process.env.NEXT_PUBLIC_PUBLIC_CATALOG_BASE_URL || origin;
        const publicBaseUrl = resolvedUrl.replace(":3002", ":3001").replace(/\/\/admin\./, "//").replace(/\/$/, "");
        const qrUrl =
          buildPublicOrderStatusUrl(
            publicBaseUrl,
            {
              slug: profileSlug,
              custom_domain: customDomain,
              custom_domain_verified: customDomainVerified,
            },
            shareToken
          ) || String(orderData.number);

        const qrCode = await QRCode.toDataURL(qrUrl, {
          width: 256,
          margin: 1,
          color: {
            dark: "#4425a7",
            light: "#ffffff",
          },
        });
        setQrCodeDataUrl(qrCode);
      } catch (err) {
        console.error("Error loading order label data:", err);
      } finally {
        setLoading(false);
      }
    }

    loadData();
  }, [open, orderId]);

  async function handleDownloadPNG() {
    if (!previewRef.current || !payload) return;
    try {
      setIsDownloading(true);
      const dataUrl = await htmlToImage.toPng(previewRef.current, {
        quality: 1,
        pixelRatio: 3, // High quality
      });
      const link = document.createElement("a");
      link.download = `etiqueta-pedido-${orderNumber || payload.order.id.slice(0, 8)}.png`;
      link.href = dataUrl;
      link.click();
    } catch (error) {
      console.error("Error generating PNG:", error);
    } finally {
      setIsDownloading(false);
    }
  }

  function handlePrint() {
    if (!previewRef.current) return;
    
    // Create an iframe to print the component content
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
    
    const content = previewRef.current.outerHTML;
    const printDocument = iframe.contentWindow?.document;
    
    if (printDocument) {
      printDocument.open();
      printDocument.write(`
        <!DOCTYPE html>
        <html>
          <head>
            <title>Imprimir Etiqueta</title>
            <style>
              @page { margin: 0; size: auto; }
              body { margin: 0; display: flex; justify-content: center; align-items: center; padding: 20px; }
            </style>
          </head>
          <body>
            ${content}
          </body>
        </html>
      `);
      printDocument.close();
      
      // Wait for images to load if any
      setTimeout(() => {
        iframe.contentWindow?.focus();
        iframe.contentWindow?.print();
        setTimeout(() => {
          document.body.removeChild(iframe);
        }, 1000);
      }, 500);
    }
  }

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-xl overflow-hidden border-0 p-0">
        <DialogTitle className="sr-only">
          Etiqueta do pedido{orderNumber ? ` #${orderNumber}` : ""}
        </DialogTitle>
        <DialogDescription className="sr-only">
          Visualize a etiqueta do pedido e escolha entre baixar em PNG ou imprimir.
        </DialogDescription>
        <div className="bg-zinc-50 flex flex-col max-h-[90vh]">
          <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)]">
                <Tag size={20} />
              </div>
              <div>
                <h3 className="text-lg font-semibold text-zinc-900">
                  Etiqueta do pedido{orderNumber ? ` #${orderNumber}` : ""}
                </h3>
                <p className="text-sm text-zinc-500">
                  Visualize a etiqueta gerada.
                </p>
              </div>
            </div>
          </div>

          <div className="flex-1 overflow-auto p-6 flex items-center justify-center bg-zinc-100/50">
            {loading || !payload || !qrCodeDataUrl ? (
              <div className="flex flex-col items-center justify-center py-10 text-zinc-400">
                <div className="h-8 w-8 animate-spin rounded-full border-2 border-[var(--ks-color-primary)] border-t-transparent" />
                <p className="mt-4 text-sm font-medium">Gerando etiqueta...</p>
              </div>
            ) : (
              <div className="shadow-xl ring-1 ring-zinc-900/5 bg-white overflow-hidden rounded-md">
                <OrderLabelPreview 
                  ref={previewRef}
                  payload={payload}
                  qrCodeDataUrl={qrCodeDataUrl}
                />
              </div>
            )}
          </div>

          <div className="flex items-center gap-3 border-t border-zinc-200 bg-white px-5 py-4 shrink-0">
            <button
              type="button"
              onClick={handleDownloadPNG}
              disabled={loading || !payload || isDownloading}
              className="inline-flex h-11 flex-1 items-center justify-center gap-2 rounded-2xl border border-zinc-200 bg-white px-4 text-sm font-semibold text-zinc-700 transition-colors hover:bg-zinc-100 disabled:opacity-60"
            >
              <Download size={16} />
              {isDownloading ? "Baixando..." : "Baixar PNG"}
            </button>
            <button
              type="button"
              onClick={handlePrint}
              disabled={loading || !payload}
              className="inline-flex h-11 flex-1 items-center justify-center gap-2 rounded-2xl bg-[var(--ks-color-primary)] px-4 text-sm font-semibold text-white transition-colors hover:bg-[var(--ks-color-primary-strong)] disabled:opacity-60"
            >
              <Printer size={16} />
              Imprimir
            </button>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}