import React, { useState } from "react";
import { View } from "../types";
import DashboardDayView from "../components/dashboard/DashboardDayView";
import DashboardSellerView from "../components/dashboard/DashboardSellerView";
import OrdersView from "../components/dashboard/OrdersView";
import ProductsSoldView from "../components/dashboard/ProductsSoldView";
import PreorderView from "../components/dashboard/PreorderView";
import ConfirmDialog from "../components/ConfirmDialog";
import { shoppingService } from "../src/services/shopping.service";

interface SalesDashboardViewProps {
  onNavigate: (view: View) => void;
  onNewOrder?: () => void;
}

const SalesDashboardView: React.FC<SalesDashboardViewProps> = ({
  onNavigate,
  onNewOrder,
}) => {
  const [activeTab, setActiveTab] = useState("dashboard");
  const [showNewOrderDialog, setShowNewOrderDialog] = useState(false);
  const [showContinueOrNewDialog, setShowContinueOrNewDialog] = useState(false);
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  // Verificar se há carrinho (itens no carrinho)
  const hasCartItems = () => {
    return localStorage.getItem("cart");
  };

  // Verificar se há dados do pedido atual
  const hasOrderData = () => {
    const hasCart = localStorage.getItem("cart");
    const hasCustomer = localStorage.getItem("customer");
    const hasAddress = localStorage.getItem("address");
    const hasPaymentPlan = localStorage.getItem("paymentPlan");
    const hasBilling = localStorage.getItem("billing");
    const hasDataDelivery = localStorage.getItem("dataDelivery");
    const hasInvoiceStore = localStorage.getItem("invoiceStore");
    const hasPartner = localStorage.getItem("partner");

    return (
      hasCart ||
      hasCustomer ||
      hasAddress ||
      hasPaymentPlan ||
      hasBilling ||
      hasDataDelivery ||
      hasInvoiceStore ||
      hasPartner
    );
  };

  const handleNewOrderClick = () => {
    // Se houver carrinho, perguntar se quer continuar ou iniciar novo
    if (hasCartItems()) {
      setShowContinueOrNewDialog(true);
      return;
    }

    // Se não houver carrinho mas houver outros dados, mostrar confirmação normal
    if (hasOrderData()) {
      setShowNewOrderDialog(true);
      return;
    }

    // Se não houver nenhum dado, limpar direto sem confirmação
    if (onNewOrder) {
      onNewOrder();
    } else {
      // Se não tiver onNewOrder, fazer a limpeza localmente
      shoppingService.clearShoppingData();
      onNavigate(View.PRODUCT_SEARCH);
    }
  };

  const handleContinueOrder = () => {
    // Fechar o dialog e navegar para /sales/home (já estamos na dashboard, apenas fechar)
    setShowContinueOrNewDialog(false);
    // Se já estamos na dashboard, não precisa navegar, apenas fechar o dialog
  };

  const handleStartNewOrder = () => {
    // Fechar o dialog de continuar/iniciar e abrir o de confirmação
    setShowContinueOrNewDialog(false);
    setShowNewOrderDialog(true);
  };

  const handleConfirmNewOrder = () => {
    if (onNewOrder) {
      onNewOrder();
    } else {
      // Se não tiver onNewOrder, fazer a limpeza localmente
      shoppingService.clearShoppingData();
      onNavigate(View.PRODUCT_SEARCH);
    }
    setShowNewOrderDialog(false);
  };

  const sidebarItems = [
    {
      id: "new",
      label: "Novo pedido",
      primary: true,
      action: () => onNavigate(View.PRODUCT_SEARCH),
    },
    {
      id: "dashboard",
      label: "Dashboard Venda dia",
      icon: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z",
    },
    {
      id: "dashboardseller",
      label: "Dashboard Vendedor",
      icon: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z",
    },
    {
      id: "orders",
      label: "Pedidos de venda",
      icon: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2",
    },
    {
      id: "product-order",
      label: "Produtos Vendidos",
      icon: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z",
    },
    {
      id: "preorder",
      label: "Orçamentos pendentes",
      icon: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z",
      primary: false,
    },
  ];

  return (
    <div className="flex h-full bg-[#f8fafc] relative">
      {/* Overlay para mobile quando sidebar está aberto */}
      {isSidebarOpen && (
        <div
          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
          onClick={() => setIsSidebarOpen(false)}
        />
      )}

      {/* Sidebar Modernizada - Drawer em mobile, sidebar em desktop */}
      <aside
        className={`fixed lg:relative inset-y-0 left-0 z-50 lg:z-auto w-72 bg-white border-r border-slate-200 flex flex-col p-4 lg:p-6 overflow-y-auto transform transition-transform duration-300 ease-out ${
          isSidebarOpen ? "translate-x-0" : "-translate-x-full lg:translate-x-0"
        }`}
      >
        {/* Botão fechar em mobile */}
        <div className="flex justify-end mb-4 lg:hidden">
          <button
            onClick={() => setIsSidebarOpen(false)}
            className="p-2 text-slate-400 hover:text-slate-600 rounded-lg"
          >
            <svg
              className="w-6 h-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2"
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>

        <div className="mb-6 lg:mb-8">
          <button
            onClick={() => {
              handleNewOrderClick();
              setIsSidebarOpen(false);
            }}
            className="w-full bg-orange-500 text-white p-3 lg:p-4 rounded-2xl font-extrabold uppercase text-xs tracking-widest shadow-lg shadow-orange-500/20 hover:bg-orange-600 transition-all flex items-center justify-center group touch-manipulation"
          >
            <svg
              className="w-5 h-5 mr-2 group-hover:rotate-90 transition-transform"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="2.5"
                d="M12 4v16m8-8H4"
              />
            </svg>
            Novo Pedido
          </button>
        </div>

        <nav className="flex-1 space-y-2">
          {sidebarItems.slice(1).map((item) => (
            <button
              key={item.id}
              onClick={() => {
                if (item.action) {
                  item.action();
                } else {
                  setActiveTab(item.id);
                }
                setIsSidebarOpen(false); // Fechar sidebar em mobile após seleção
              }}
              className={`w-full flex items-center px-4 py-3 lg:py-4 rounded-2xl text-sm font-bold transition-all touch-manipulation ${
                activeTab === item.id
                  ? "bg-[#002147] text-white shadow-xl shadow-blue-900/10"
                  : item.id === "preorder"
                  ? "text-blue-600 hover:bg-blue-50 border border-blue-200"
                  : "text-slate-500 hover:bg-slate-50"
              }`}
            >
              <svg
                className="w-5 h-5 mr-3"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2"
                  d={item.icon}
                />
              </svg>
              {item.label}
            </button>
          ))}
        </nav>
      </aside>

      {/* Botão para abrir sidebar em mobile */}
      <button
        onClick={() => setIsSidebarOpen(true)}
        className="fixed top-20 left-4 z-30 lg:hidden bg-white p-3 rounded-xl shadow-lg border border-slate-200 text-slate-600 hover:bg-slate-50 transition-all touch-manipulation"
      >
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2"
            d="M4 6h16M4 12h16M4 18h16"
          />
        </svg>
      </button>

      {/* Área de Conteúdo */}
      <main className="flex-1 p-3 lg:p-6 overflow-auto custom-scrollbar">
        <div className="max-w-[1400px] mx-auto">
          {activeTab === "dashboard" && <DashboardDayView />}
          {activeTab === "orders" && <OrdersView />}
          {activeTab === "dashboardseller" && <DashboardSellerView />}
          {activeTab === "product-order" && <ProductsSoldView />}
          {activeTab === "preorder" && <PreorderView />}
        </div>
      </main>

      {/* Dialog - Continuar ou Iniciar Novo Pedido */}
      <ConfirmDialog
        isOpen={showContinueOrNewDialog}
        onClose={handleContinueOrder}
        onConfirm={handleStartNewOrder}
        type="info"
        title="Carrinho Existente"
        message={
          <>
            Você já possui um carrinho com itens.
            <br />
            <br />
            Deseja iniciar um novo pedido e limpar todos os dados do pedido
            atual?
          </>
        }
        confirmText="Iniciar Novo Pedido"
        cancelText="Cancelar"
      />

      {/* Dialog de Confirmação - Novo Pedido */}
      <ConfirmDialog
        isOpen={showNewOrderDialog}
        onClose={() => setShowNewOrderDialog(false)}
        onConfirm={handleConfirmNewOrder}
        type="warning"
        title="Novo Pedido"
        message={
          <>
            Deseja iniciar um novo pedido?
            <br />
            <br />
            <span className="text-sm font-bold text-slate-700">
              Todos os dados do pedido atual serão perdidos:
            </span>
            <ul className="text-xs text-slate-600 mt-2 space-y-1 list-disc list-inside">
              <li>Itens do carrinho</li>
              <li>Dados do cliente</li>
              <li>Endereço de entrega</li>
              <li>Plano de pagamento</li>
              <li>Dados financeiros</li>
              <li>Informações de entrega</li>
            </ul>
            <br />
            <span className="text-xs text-slate-400 block">
              Esta ação não pode ser desfeita.
            </span>
          </>
        }
        confirmText="Sim, Iniciar Novo Pedido"
        cancelText="Cancelar"
      />
    </div>
  );
};

export default SalesDashboardView;