"use client";

import { useState, useEffect, useCallback } from "react";
import { getSupabaseClient } from "@/lib/supabase";
import { getCompanyContext, getEffectiveCompanyRole } from "@/lib/company-context";
import { Save, Loader2, Building2, MapPin, Phone, MessageCircle, AlertTriangle, Trash2, X } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { CustomSelect } from "@/components/ui/custom-select";
import { BR_STATES, fetchCities, fetchCnpj, fetchCep } from "@/utils/locations";
import { PageHeader } from "@/components/ui/page-header";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import ImageUpload from "@/components/image-upload";

import { CompanyProfileForm } from "./company-profile-form";

export default function SettingsPage() {
  return (
    <div className="space-y-6">
      <PageHeader
        eyebrow="Configurações"
        title="Dados da empresa"
        subtitle="Centralize endereço e contatos que alimentam o catálogo e os orçamentos."
      />
      <CompanyProfileForm />
      <DangerZoneReset />
    </div>
  );
}

const dependencyMap: Record<string, { deps: string[], message: string }> = {
  bank_accounts: {
    deps: ["financial", "payables", "pdv"],
    message: "Contas bancárias marcou automaticamente transações financeiras, contas a pagar e PDV."
  },
  categories: {
    deps: ["products", "catalog", "orders", "quotes"],
    message: "Categorias marcou produtos e o histórico vinculado de pedidos/orçamentos."
  },
  products: {
    deps: ["catalog", "orders", "quotes"],
    message: "Produtos marcou o catálogo e o histórico de pedidos/orçamentos."
  },
  clients: {
    deps: ["orders", "quotes", "financial", "payables"],
    message: "Clientes marcou os pedidos, orçamentos e obrigações financeiras."
  },
  employees: {
    deps: ["orders", "quotes", "commissions", "pdv"],
    message: "Funcionários marcou seus respectivos pedidos, orçamentos, comissões e PDV."
  },
  suppliers: {
    deps: ["products", "catalog", "orders", "quotes", "payables"],
    message: "Fornecedores marcou os produtos e contas a pagar atrelados."
  },
  quotes: {
    deps: ["orders"],
    message: "Orçamentos marcou os pedidos gerados."
  },
  orders: {
    deps: ["financial", "commissions", "pdv"],
    message: "Pedidos marcou transações, comissões e sessões de caixa."
  }
};

function DangerZoneReset() {
  const [isAdmin, setIsAdmin] = useState(false);
  const [loadingCheck, setLoadingCheck] = useState(true);
  
  const [isOpen, setIsOpen] = useState(false);
  const [step, setStep] = useState<1 | 2>(1);
  const [selection, setSelection] = useState<string[]>([]);
  const [confirmText, setConfirmText] = useState("");
  const [isDeleting, setIsDeleting] = useState(false);
  const [errorMsg, setErrorMsg] = useState("");
  const [errorDetails, setErrorDetails] = useState<string[]>([]);
  const [successMsg, setSuccessMsg] = useState("");
  const [autoSelectMsg, setAutoSelectMsg] = useState("");

  const options = [
    { id: "orders", label: "Pedidos, itens e histórico de produção" },
    { id: "quotes", label: "Orçamentos e artes" },
    { id: "products", label: "Produtos, imagens e galeria" },
    { id: "clients", label: "Clientes" },
    { id: "categories", label: "Categorias" },
    { id: "financial", label: "Transações financeiras e pagamentos" },
    { id: "payables", label: "Contas a pagar" },
    { id: "bank_accounts", label: "Contas bancárias" },
    { id: "commissions", label: "Comissões, planos e eventos" },
    { id: "pdv", label: "PDV (sessões de caixa e movimentações)" },
    { id: "catalog", label: "Catálogo (seções, cupons, banners, stories)" },
    { id: "production", label: "Materiais, máquinas e mão de obra" },
    { id: "suppliers", label: "Fornecedores e integrações" },
    { id: "employees", label: "Funcionários vinculados" },
    { id: "storage", label: "Todas as imagens do storage" },
    { id: "settings", label: "Configurações da empresa e catálogo" },
  ];

  useEffect(() => {
    async function checkRole() {
      try {
        const supabase = getSupabaseClient();
        const { data: { user } } = await supabase.auth.getUser();
        if (user) {
          const ctx = await getCompanyContext(supabase, user);
          const role = getEffectiveCompanyRole(ctx, user.id);
          if (role === "owner" || role === "admin") {
            setIsAdmin(true);
          }
        }
      } catch (err) {
        console.error("Erro ao verificar nível de admin", err);
      } finally {
        setLoadingCheck(false);
      }
    }
    checkRole();
  }, []);

  if (loadingCheck || !isAdmin) return null;

  const allSelected = selection.length === options.length;

  const handleToggle = (id: string) => {
    setAutoSelectMsg("");
    if (id === "all") {
      setSelection(allSelected ? [] : options.map((o) => o.id));
      return;
    }

    setSelection((prev) => {
      const isChecking = !prev.includes(id);
      if (!isChecking) {
        return prev.filter((x) => x !== id);
      }

      // Checking: apply auto-dependencies
      const newSelection = [...prev, id];
      const messages: string[] = [];
      const queue = [id];

      while (queue.length > 0) {
        const current = queue.shift()!;
        const depInfo = dependencyMap[current as keyof typeof dependencyMap];
        if (depInfo) {
          const addedProps = depInfo.deps.filter(d => !newSelection.includes(d));
          if (addedProps.length > 0) {
            newSelection.push(...addedProps);
            queue.push(...addedProps);
            if (!messages.includes(depInfo.message)) {
              messages.push(depInfo.message);
            }
          }
        }
      }

      if (messages.length > 0) {
        setAutoSelectMsg("Vinculação inteligente: " + messages.join(" "));
      }

      return newSelection;
    });
  };

  const handleProceed = () => {
    if (selection.length === 0) {
      setErrorMsg("Selecione pelo menos um item para apagar.");
      return;
    }
    setErrorMsg("");
    setErrorDetails([]);
    setStep(2);
  };

  const executeReset = async () => {
    if (confirmText !== "APAGAR") {
      setErrorMsg("Você precisa digitar APAGAR exatamente assim para confirmar.");
      return;
    }

    setIsDeleting(true);
    setErrorMsg("");
    setErrorDetails([]);
    try {
      const res = await fetch("/api/system/reset", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          confirm: "APAGAR",
          modules: allSelected ? ["all"] : selection,
        }),
      });

      const payload = await res.json();
      if (!res.ok) {
        if (payload.details) setErrorDetails(payload.details);
        throw new Error(payload.error || "Erro ao zerar o sistema.");
      }

      const count = allSelected ? "todos os dados" : `${selection.length} módulo(s)`;
      setSuccessMsg(`Sistema zerado com sucesso! ${count} foram varridos permanentemente.`);
      setTimeout(() => {
        window.location.reload();
      }, 2500);
    } catch (err: unknown) {
      setErrorMsg(err instanceof Error ? err.message : "Erro ao zerar o sistema.");
      setIsDeleting(false);
    }
  };

  const resetModal = () => {
    setIsOpen(false);
    setStep(1);
    setSelection([]);
    setConfirmText("");
    setErrorMsg("");
    setErrorDetails([]);
    setSuccessMsg("");
    setAutoSelectMsg("");
  };

  return (
    <>
      <div className="max-w-4xl mx-auto pb-20 -mt-10">
        <div className="ks-surface p-6 border-rose-200 relative overflow-hidden">
          <div className="absolute top-0 right-0 p-8 opacity-[0.03] pointer-events-none">
             <AlertTriangle size={150} />
          </div>
          <h2 className="text-lg font-semibold text-rose-700 mb-2 flex items-center gap-2">
            <Trash2 className="w-5 h-5 text-rose-600" />
            Zona de Perigo
          </h2>
          <p className="text-sm text-slate-600 mb-6 max-w-2xl">
            Ações irreversíveis. Aqui você pode limpar <strong>absolutamente todos</strong> os dados do seu sistema ou escolher módulos específicos.
            Ideal se você realizou muitos testes e quer recomeçar do zero.
          </p>

          <Button
            onClick={() => setIsOpen(true)}
            variant="ghost"
            className="bg-rose-50 hover:bg-rose-100 text-rose-700 font-semibold border border-rose-200"
          >
            Zerar Sistema
          </Button>
        </div>
      </div>

      <AnimatePresence>
        {isOpen && (
          <div className="fixed inset-0 z-50 flex items-center justify-center px-4 bg-slate-900/40 backdrop-blur-sm">
            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: 10 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: 10 }}
              className="bg-white rounded-2xl shadow-xl border border-slate-200 w-full max-w-lg overflow-hidden"
            >
              <div className="flex items-center justify-between px-6 py-4 border-b border-slate-100 bg-rose-50/50">
                <h3 className="font-semibold text-rose-800 flex items-center gap-2">
                  <AlertTriangle size={16} className="text-rose-500" />
                  Zerar Sistema
                </h3>
                {!isDeleting && !successMsg && (
                  <button onClick={resetModal} className="text-slate-400 hover:text-slate-700 transition">
                    <X size={20} />
                  </button>
                )}
              </div>

              <div className="p-6">
                {successMsg ? (
                  <div className="py-6 flex flex-col items-center justify-center text-center">
                    <div className="w-12 h-12 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mb-4">
                      <Trash2 size={24} />
                    </div>
                    <h4 className="text-emerald-700 font-semibold mb-2">Sistema Zerado!</h4>
                    <p className="text-sm text-slate-600">{successMsg}</p>
                    <p className="text-xs text-slate-400 mt-4">Reiniciando o painel...</p>
                  </div>
                ) : step === 1 ? (
                  <div className="space-y-4">
                    <p className="text-sm text-slate-600 font-medium">Selecione o que deseja apagar permanentemente:</p>

                    <div className="border border-slate-200 rounded-xl divide-y divide-slate-100 max-h-[340px] overflow-y-auto">
                      {/* MARCAR TUDO */}
                      <label className="flex items-center gap-3 px-3 py-2.5 hover:bg-rose-50/50 cursor-pointer transition sticky top-0 bg-white z-10 border-b border-slate-200">
                        <input
                          type="checkbox"
                          checked={allSelected}
                          onChange={() => handleToggle("all")}
                          className="w-4 h-4 rounded text-rose-500 border-slate-300 focus:ring-rose-500 shrink-0 accent-rose-500"
                        />
                        <span className="text-sm font-bold text-slate-800">MARCAR TUDO</span>
                        <span className="ml-auto text-[10px] text-rose-500 font-semibold uppercase tracking-wider">
                          {selection.length}/{options.length}
                        </span>
                      </label>
                      {options.map((opt) => (
                        <label key={opt.id} className="flex items-center gap-3 px-3 py-2 hover:bg-slate-50 cursor-pointer transition">
                          <input
                            type="checkbox"
                            checked={selection.includes(opt.id)}
                            onChange={() => handleToggle(opt.id)}
                            className="w-4 h-4 rounded text-rose-500 border-slate-300 focus:ring-rose-500 shrink-0 accent-rose-500"
                          />
                          <span className="text-[13px] text-slate-700">{opt.label}</span>
                        </label>
                      ))}
                    </div>

                    {autoSelectMsg && (
                      <div className="p-3 bg-blue-50/80 border border-blue-100 rounded-xl text-blue-800 text-[12px] font-medium flex gap-2 items-start text-left leading-relaxed">
                        <AlertTriangle size={15} className="shrink-0 mt-0.5 text-blue-600" />
                        <span>{autoSelectMsg}</span>
                      </div>
                    )}

                    {errorMsg && <p className="text-xs text-rose-600 font-medium">{errorMsg}</p>}

                    <div className="pt-2 flex justify-end gap-2">
                       <Button variant="ghost" onClick={resetModal}>Cancelar</Button>
                       <Button className="bg-slate-900 hover:bg-slate-800" onClick={handleProceed}>
                         Prosseguir ({selection.length})
                       </Button>
                    </div>
                  </div>
                ) : (
                  <div className="space-y-4">
                    <div className="p-3 bg-rose-50 border border-rose-100 rounded-xl text-rose-800 text-sm font-medium">
                      ⚠️ Você vai <strong>APAGAR PERMANENTEMENTE</strong>{" "}
                      {allSelected
                        ? "TODOS os dados do sistema"
                        : `${selection.length} módulo(s) selecionado(s)`}
                      . Essa ação não tem volta.
                    </div>

                    <div className="border border-slate-200 rounded-xl bg-slate-50/50 max-h-[140px] overflow-y-auto">
                      {options
                        .filter((o) => selection.includes(o.id))
                        .map((opt) => (
                          <div key={opt.id} className="flex items-center gap-2 px-3 py-1.5 text-[12px] text-slate-600 border-b border-slate-100 last:border-b-0">
                            <span className="text-rose-400 shrink-0">✕</span>
                            {opt.label}
                          </div>
                        ))}
                    </div>

                    <div>
                      <p className="text-sm text-slate-600 mb-2 font-medium">
                        Para confirmar, digite <span className="font-bold text-rose-700 select-none">APAGAR</span> abaixo:
                      </p>
                      <Input
                        value={confirmText}
                        onChange={(e) => setConfirmText(e.target.value.toUpperCase())}
                        placeholder="APAGAR"
                        autoFocus
                      />
                    </div>

                    {errorMsg && (
                      <div className="p-3 bg-red-50 border border-red-100 rounded-xl text-red-800 text-[13px] font-medium flex flex-col gap-2 text-left leading-relaxed">
                        <div className="flex gap-2 items-start">
                          <AlertTriangle size={15} className="shrink-0 mt-0.5 text-red-600" />
                          <span>{errorMsg}</span>
                        </div>
                        {errorDetails.length > 0 && (
                          <ul className="text-[11px] text-red-600 list-inside space-y-1 mt-1 font-mono bg-red-100/50 p-2 rounded-lg break-all max-h-32 overflow-y-auto">
                            {errorDetails.map((detail, idx) => (
                              <li key={idx}>• {detail}</li>
                            ))}
                          </ul>
                        )}
                      </div>
                    )}

                    <div className="pt-2 flex justify-between gap-2">
                       <Button variant="ghost" onClick={() => setStep(1)} disabled={isDeleting}>Voltar</Button>
                       <Button
                         onClick={executeReset}
                         disabled={isDeleting || confirmText !== "APAGAR"}
                         className="bg-rose-600 hover:bg-rose-700 text-white disabled:opacity-40"
                         icon={isDeleting && <Loader2 className="w-4 h-4 animate-spin" />}
                       >
                         {isDeleting ? "Destruindo..." : "Apagar Agora"}
                       </Button>
                    </div>
                  </div>
                )}
              </div>
            </motion.div>
          </div>
        )}
      </AnimatePresence>
    </>
  );
}