"use client";

import { useState, useEffect, useRef } from "react";
import { getSupabaseClient } from "@/lib/supabase";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Settings, Loader2, ChevronDown, Palette, Printer } from "lucide-react";
import { Input } from "@/components/ui/input";
import { BatchOrderLabelsModal } from "./orders/batch-order-labels-modal";
import { BatchOrderDocumentsModal } from "./orders/batch-order-documents-modal";

export function StatusPageCustomizationModal() {
  const [open, setOpen] = useState(false);
  const [modalOpen, setModalOpen] = useState(false);
  const [batchModalOpen, setBatchModalOpen] = useState(false);
  const [batchDocumentsModalOpen, setBatchDocumentsModalOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  const [isLoading, setIsLoading] = useState(false);
  const [isSaving, setIsSaving] = useState(false);

  const [colors, setColors] = useState({
    status_page_bg_color: "#f5f7fb",
    status_page_box_bg_color: "#ffffff",
    status_page_icon_color: "#4b2ae6",
    status_page_text_color: "#09090b",
    status_page_button_color: "#4b2ae6",
  });

  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
        setOpen(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  useEffect(() => {
    if (modalOpen) {
      loadSettings();
    }
  }, [modalOpen]);

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

      const { data, error } = await supabase
        .from("profiles")
        .select("status_page_bg_color, status_page_box_bg_color, status_page_icon_color, status_page_text_color, status_page_button_color")
        .eq("id", user.id)
        .single();

      if (error) throw error;
      
      if (data) {
        setColors({
          status_page_bg_color: data.status_page_bg_color || "#f5f7fb",
          status_page_box_bg_color: data.status_page_box_bg_color || "#ffffff",
          status_page_icon_color: data.status_page_icon_color || "#4b2ae6",
          status_page_text_color: data.status_page_text_color || "#09090b",
          status_page_button_color: data.status_page_button_color || "#4b2ae6",
        });
      }
    } catch (err) {
      console.error("Erro ao carregar configurações:", err);
    } finally {
      setIsLoading(false);
    }
  }

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

      const { error } = await supabase
        .from("profiles")
        .update({
          status_page_bg_color: colors.status_page_bg_color,
          status_page_box_bg_color: colors.status_page_box_bg_color,
          status_page_icon_color: colors.status_page_icon_color,
          status_page_text_color: colors.status_page_text_color,
          status_page_button_color: colors.status_page_button_color,
        })
        .eq("id", user.id);

      if (error) throw error;
      setModalOpen(false);
    } catch (err) {
      console.error("Erro ao salvar configurações:", err);
    } finally {
      setIsSaving(false);
    }
  }

  function resetToDefaults() {
    setColors({
      status_page_bg_color: "#f5f7fb",
      status_page_box_bg_color: "#ffffff",
      status_page_icon_color: "#4b2ae6",
      status_page_text_color: "#09090b",
      status_page_button_color: "#4b2ae6",
    });
  }

  return (
    <div className="relative" ref={containerRef}>
      <button
        onClick={() => setOpen(!open)}
        className="flex items-center gap-2 px-3 py-2 text-sm font-semibold text-[var(--ks-color-text-muted)] hover:text-[var(--ks-color-text-primary)] hover:bg-[var(--ks-color-bg-hover)] rounded-lg transition-colors"
      >
        <Settings size={18} />
        <span className="hidden sm:inline">Configurações de pedido</span>
        <ChevronDown size={14} className={`transition-transform ${open ? "rotate-180" : ""}`} />
      </button>

      {open && (
        /* No celular o gatilho fica colado na borda esquerda; ancorado em
           `right-0` o painel de 288px se abria para fora da tela e ficava
           cortado. Aqui ele abre a partir da esquerda e nunca passa da
           largura da viewport. No desktop segue alinhado a direita. */
        <div className="absolute left-0 right-auto md:left-auto md:right-0 top-full mt-2 w-[min(18rem,calc(100vw-2rem))] md:w-72 bg-white rounded-xl shadow-[0_4px_24px_rgba(0,0,0,0.1)] border border-zinc-200 py-2 z-50 animate-in fade-in zoom-in-95 origin-top-left md:origin-top-right">
          <button
            onClick={() => {
              setOpen(false);
              setBatchDocumentsModalOpen(true);
            }}
            className="w-full text-left px-4 py-3 hover:bg-zinc-50 transition-colors flex items-start gap-3"
          >
            <div className="w-8 h-8 rounded-lg bg-sky-50 text-sky-600 flex items-center justify-center shrink-0 mt-0.5">
              <Printer size={16} />
            </div>
            <div className="flex flex-col">
              <span className="text-sm font-semibold text-zinc-900 leading-tight">Impressão Pedidos em Massa</span>
              <span className="text-[11px] text-zinc-500 mt-1 leading-snug">Imprima a via de vários pedidos de uma vez</span>
            </div>
          </button>

          <button
            onClick={() => {
              setOpen(false);
              setBatchModalOpen(true);
            }}
            className="w-full text-left px-4 py-3 hover:bg-zinc-50 transition-colors flex items-start gap-3"
          >
            <div className="w-8 h-8 rounded-lg bg-emerald-50 text-emerald-600 flex items-center justify-center shrink-0 mt-0.5">
              <Printer size={16} />
            </div>
            <div className="flex flex-col">
              <span className="text-sm font-semibold text-zinc-900 leading-tight">Etiquetas e protocolos em massa</span>
              <span className="text-[11px] text-zinc-500 mt-1 leading-snug">Imprima etiquetas ou protocolos de entrega de vários pedidos de uma vez</span>
            </div>
          </button>

          <button
            onClick={() => {
              setOpen(false);
              setModalOpen(true);
            }}
            className="w-full text-left px-4 py-3 hover:bg-zinc-50 transition-colors flex items-start gap-3"
          >
            <div className="w-8 h-8 rounded-lg bg-violet-50 text-violet-600 flex items-center justify-center shrink-0 mt-0.5">
              <Palette size={16} />
            </div>
            <div className="flex flex-col">
              <span className="text-sm font-semibold text-zinc-900 leading-tight">Personalização Link de Status</span>
              <span className="text-[11px] text-zinc-500 mt-1 leading-snug">Altere as cores e a aparência da página do cliente</span>
            </div>
          </button>
        </div>
      )}

      <Dialog open={modalOpen} onOpenChange={setModalOpen}>
        <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle className="text-xl font-bold">Personalização Link de Status</DialogTitle>
          <DialogDescription>
            Escolha as cores que serão usadas na página pública de acompanhamento do pedido do seu cliente.
          </DialogDescription>
        </DialogHeader>

        {isLoading ? (
          <div className="flex justify-center items-center py-10">
            <Loader2 className="w-6 h-6 animate-spin text-zinc-400" />
          </div>
        ) : (
          <div className="space-y-6 py-4">
            <div className="space-y-4">
              
              <div className="flex items-center justify-between gap-4 p-3 border rounded-xl bg-zinc-50/50">
                <div className="flex-1">
                  <div className="text-sm font-bold text-zinc-800">Cor de Fundo da Página</div>
                  <div className="text-xs text-zinc-500">Cor geral de fundo onde o box flutua</div>
                </div>
                <div className="relative h-10 w-16 overflow-hidden rounded-lg border shadow-sm shrink-0">
                  <input 
                    type="color" 
                    value={colors.status_page_bg_color} 
                    onChange={(e) => setColors({ ...colors, status_page_bg_color: e.target.value })}
                    className="absolute -top-2 -left-2 w-24 h-24 cursor-pointer"
                  />
                </div>
              </div>

              <div className="flex items-center justify-between gap-4 p-3 border rounded-xl bg-zinc-50/50">
                <div className="flex-1">
                  <div className="text-sm font-bold text-zinc-800">Cor de Fundo do Box</div>
                  <div className="text-xs text-zinc-500">Cor do cartão central onde ficam os dados</div>
                </div>
                <div className="relative h-10 w-16 overflow-hidden rounded-lg border shadow-sm shrink-0">
                  <input 
                    type="color" 
                    value={colors.status_page_box_bg_color} 
                    onChange={(e) => setColors({ ...colors, status_page_box_bg_color: e.target.value })}
                    className="absolute -top-2 -left-2 w-24 h-24 cursor-pointer"
                  />
                </div>
              </div>

              <div className="flex items-center justify-between gap-4 p-3 border rounded-xl bg-zinc-50/50">
                <div className="flex-1">
                  <div className="text-sm font-bold text-zinc-800">Cor de Destaque / Ícones</div>
                  <div className="text-xs text-zinc-500">Cor da linha do tempo, ícones ativos e botões</div>
                </div>
                <div className="relative h-10 w-16 overflow-hidden rounded-lg border shadow-sm shrink-0">
                  <input 
                    type="color" 
                    value={colors.status_page_icon_color} 
                    onChange={(e) => setColors({ ...colors, status_page_icon_color: e.target.value })}
                    className="absolute -top-2 -left-2 w-24 h-24 cursor-pointer"
                  />
                </div>
              </div>

              <div className="flex items-center justify-between gap-4 p-3 border rounded-xl bg-zinc-50/50">
                <div className="flex-1">
                  <div className="text-sm font-bold text-zinc-800">Cor da Fonte (Títulos)</div>
                  <div className="text-xs text-zinc-500">Cor dos textos principais para garantir contraste</div>
                </div>
                <div className="relative h-10 w-16 overflow-hidden rounded-lg border shadow-sm shrink-0">
                  <input 
                    type="color" 
                    value={colors.status_page_text_color} 
                    onChange={(e) => setColors({ ...colors, status_page_text_color: e.target.value })}
                    className="absolute -top-2 -left-2 w-24 h-24 cursor-pointer"
                  />
                </div>
              </div>

              <div className="flex items-center justify-between gap-4 p-3 border rounded-xl bg-zinc-50/50">
                <div className="flex-1">
                  <div className="text-sm font-bold text-zinc-800">Cor do Botão WhatsApp</div>
                  <div className="text-xs text-zinc-500">Cor do botão principal de ação (Falar no WhatsApp)</div>
                </div>
                <div className="relative h-10 w-16 overflow-hidden rounded-lg border shadow-sm shrink-0">
                  <input 
                    type="color" 
                    value={colors.status_page_button_color} 
                    onChange={(e) => setColors({ ...colors, status_page_button_color: e.target.value })}
                    className="absolute -top-2 -left-2 w-24 h-24 cursor-pointer"
                  />
                </div>
              </div>

            </div>
          </div>
        )}

        <DialogFooter className="flex items-center sm:justify-between w-full">
          <button 
            type="button" 
            onClick={resetToDefaults}
            disabled={isSaving}
            className="text-xs font-semibold text-zinc-500 hover:text-zinc-800 underline underline-offset-2 disabled:opacity-50"
          >
            Restaurar Padrões
          </button>
          <div className="flex items-center gap-2 mt-4 sm:mt-0">
            <Button variant="outline" onClick={() => setModalOpen(false)} disabled={isSaving}>Cancelar</Button>
            <Button onClick={handleSave} disabled={isLoading || isSaving}>
              {isSaving ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
              Salvar Personalização
            </Button>
          </div>
        </DialogFooter>
      </DialogContent>
    </Dialog>

    <BatchOrderLabelsModal open={batchModalOpen} onOpenChange={setBatchModalOpen} />
    <BatchOrderDocumentsModal open={batchDocumentsModalOpen} onOpenChange={setBatchDocumentsModalOpen} />
  </div>
  );
}