import React from "react";
import { View } from "../types";

interface HomeMenuViewProps {
  onNavigate: (view: View) => void;
  user: { name: string; store: string };
  onLogout: () => void;
}

const HomeMenuView: React.FC<HomeMenuViewProps> = ({
  onNavigate,
  user,
  onLogout,
}) => {
  const menus = [
    {
      id: View.SALES_DASHBOARD,
      title: "Vendas e Relatórios",
      desc: "Acompanhe metas, pedidos e performance em tempo real.",
      color: "bg-blue-600",
      icon: (
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2.5"
            d="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"
          />
        </svg>
      ),
    },
    {
      id: View.PRODUCT_SEARCH,
      title: "Catálogo de Produtos",
      desc: "Pesquise, consulte estoque e inicie novos pedidos.",
      color: "bg-orange-500",
      icon: (
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2.5"
            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
          />
        </svg>
      ),
    },
    {
      id: View.HOME_MENU,
      title: "Mestre Jurunense",
      desc: "Gestão administrativa e parametrização do sistema.",
      color: "bg-emerald-600",
      icon: (
        <svg
          className="w-6 h-6"
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            strokeWidth="2.5"
            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
          />
        </svg>
      ),
    },
  ];

  const userInitials = user?.name
    ? user.name
        .split(".")
        .map((n) => n[0])
        .join("")
        .substring(0, 2)
        .toUpperCase()
    : "U";

  return (
    <div className="min-h-screen bg-[#f8fafc] p-4 lg:p-6">
      <div className="max-w-7xl mx-auto">
        {/* Top Header Section - Perfil e Logout */}
        <div className="flex flex-col md:flex-row justify-between items-center mb-8 bg-white p-4 rounded-2xl shadow-sm border border-slate-100">
          <div className="flex items-center space-x-3 mb-3 md:mb-0">
            <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center text-orange-600 font-black text-sm shadow-inner border-2 border-orange-200/50">
              {userInitials}
            </div>
            <div>
              <span className="text-[9px] font-black text-slate-400 uppercase tracking-[0.2em] block mb-0.5">
                Usuário Conectado
              </span>
              <h2 className="text-base font-black text-[#002147] leading-none">
                {user?.name || "Usuário"}
              </h2>
              <span className="text-xs font-bold text-slate-500 mt-0.5 block uppercase tracking-wide">
                Filial: {user?.store || "Loja"}
              </span>
            </div>
          </div>

          <div className="flex items-center space-x-4">
            <div className="h-10 w-[1px] bg-slate-100 hidden md:block mx-4"></div>
            <button
              onClick={onLogout}
              className="flex items-center space-x-2 px-5 py-2.5 bg-slate-50 text-[#002147] rounded-xl font-black text-[10px] uppercase tracking-widest hover:bg-red-50 hover:text-red-500 transition-all group"
            >
              <span>Encerrar Sessão</span>
              <svg
                className="w-5 h-5 group-hover:translate-x-1 transition-transform"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2.5"
                  d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
                />
              </svg>
            </button>
          </div>
        </div>

        <div className="mb-8">
          <h1 className="text-2xl font-black text-[#002147] mb-1 tracking-tight">
            VENDAWEB JURUNENSE
          </h1>
          <p className="text-slate-500 text-sm font-medium">
            Selecione uma das ferramentas abaixo para operar no sistema.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
          {menus.map((menu) => (
            <button
              key={menu.title}
              onClick={() => onNavigate(menu.id)}
              className="group relative bg-white p-6 rounded-2xl shadow-sm hover:shadow-lg hover:shadow-slate-200 transition-all text-left overflow-hidden transform hover:-translate-y-1 border border-slate-50"
            >
              <div className="absolute top-0 right-0 p-6 opacity-5 transition-transform group-hover:scale-110 group-hover:opacity-10">
                {menu.icon}
              </div>

              <div
                className={`${menu.color} w-12 h-12 rounded-2xl flex items-center justify-center text-white mb-5 shadow-lg transition-transform group-hover:rotate-6`}
              >
                {menu.icon}
              </div>

              <h3 className="text-lg font-black text-[#002147] mb-2">
                {menu.title}
              </h3>
              <p className="text-slate-500 text-sm leading-relaxed font-medium">
                {menu.desc}
              </p>

              <div className="mt-8 flex items-center text-orange-600 font-black text-xs uppercase tracking-widest opacity-0 transition-opacity group-hover:opacity-100">
                Acessar agora
                <svg
                  className="w-4 h-4 ml-2"
                  fill="none"
                  stroke="currentColor"
                  viewBox="0 0 24 24"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="3"
                    d="M14 5l7 7m0 0l-7 7m7-7H3"
                  />
                </svg>
              </div>
            </button>
          ))}
        </div>

        {/* Informações Auxiliares */}
        <div className="mt-12 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-5">
          <div className="bg-[#002147] rounded-2xl p-6 text-white flex items-center justify-between overflow-hidden relative group cursor-pointer hover:shadow-lg transition-all border border-[#003366]">
            <div className="relative z-10">
              <span className="text-orange-400 font-black text-[9px] uppercase tracking-[0.3em] mb-2 block">
                Novidade
              </span>
              <h4 className="text-lg font-black mb-1 leading-tight">
                Treinamento Mestre SMART
              </h4>
              <p className="text-blue-200/80 font-medium text-xs">
                Confira os novos módulos de treinamento disponíveis na
                plataforma.
              </p>
            </div>
            <div className="bg-white/10 p-3 rounded-full relative z-10 group-hover:scale-110 transition-transform backdrop-blur-md">
              <svg
                className="w-7 h-7"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2.5"
                  d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
                />
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2.5"
                  d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                />
              </svg>
            </div>
            <div className="absolute right-[-20px] bottom-[-20px] w-64 h-64 bg-orange-500/10 rounded-full blur-3xl"></div>
          </div>

          <div className="bg-white rounded-2xl p-6 border border-slate-100 flex items-center justify-between group cursor-pointer hover:shadow-lg transition-all">
            <div>
              <span className="text-emerald-500 font-black text-[9px] uppercase tracking-[0.3em] mb-2 block flex items-center">
                <span className="w-1.5 h-1.5 bg-emerald-500 rounded-full mr-1.5 animate-pulse"></span>
                Obrigatório
              </span>
              <h4 className="text-lg font-black text-[#002147] mb-1 leading-tight">
                Atualização Cadastral
              </h4>
              <p className="text-slate-500 font-medium text-xs">
                Mantenha seus dados e documentos sempre em dia para evitar
                bloqueios.
              </p>
            </div>
            <div className="bg-emerald-50 p-4 rounded-2xl group-hover:bg-emerald-100 transition-colors">
              <svg
                className="w-6 h-6 text-emerald-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2.5"
                  d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
                />
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2.5"
                  d="M12 11V9m0 2v2m0-2h-2m2 0h2"
                />
              </svg>
            </div>
          </div>
        </div>
        <div className="mt-12 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-1 gap-5">
          <div className="bg-white rounded-2xl p-6 border border-slate-100 flex items-center justify-between md:col-span-2 xl:col-span-1 group cursor-pointer hover:shadow-lg transition-all">
            <div>
              <span className="text-slate-400 font-black text-[9px] uppercase tracking-[0.3em] mb-2 block">
                Suporte
              </span>
              <h4 className="text-lg font-black text-[#002147] mb-1 leading-tight">
                Central de Ajuda
              </h4>
              <p className="text-slate-500 font-medium text-xs">
                Dúvidas técnicas ou problemas com o sistema?
              </p>
            </div>
            <button className="bg-slate-100 group-hover:bg-slate-200 p-4 rounded-2xl transition-colors">
              <svg
                className="w-6 h-6 text-slate-600"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="2.5"
                  d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
                />
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HomeMenuView;