import { Mail, Globe } from "lucide-react";

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/shared/components/ui/tabs";
import { Breadcrumb } from "@/shared/components/ui/breadcrumb";
import { SenderSettingsView } from "@/modules/senders/components/sender-settings-view";
import { DomainSettingsView } from "@/modules/domains/components/domain-settings-view";

export const dynamic = "force-dynamic";

export default async function DomainsSettingsPage() {
  return (
    <div className="w-full max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6">
      {/* Header section */}
      <div className="pb-4 border-b border-zinc-200/80">
        <Breadcrumb
          items={[
            { label: "Início", href: "/" },
            { label: "Domínios & Autenticação" },
          ]}
        />
      </div>

      {/* Tabs & Module Views */}
      <div>
        <Tabs defaultValue="senders" className="space-y-6">
          {/* TabsList enxuto e compacto alinhado à escala das tabs de Contatos */}
          <TabsList className="bg-zinc-100 border border-zinc-200/80 p-1 rounded-xl w-fit max-w-full self-start inline-flex justify-start gap-1 h-auto overflow-x-auto">
            <TabsTrigger
              value="senders"
              className="text-xs font-semibold h-9 py-1.5 px-3 text-zinc-700 data-[state=active]:bg-[#0F9FDF] data-[state=active]:text-white transition-all rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0F9FDF] focus-visible:ring-offset-2 flex items-center justify-center gap-2 cursor-pointer shrink-0"
            >
              <Mail className="w-4 h-4 shrink-0" aria-hidden="true" />
              <span>Remetentes (SMTP)</span>
            </TabsTrigger>
            <TabsTrigger
              value="domains"
              className="text-xs font-semibold h-9 py-1.5 px-3 text-zinc-700 data-[state=active]:bg-[#0F9FDF] data-[state=active]:text-white transition-all rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0F9FDF] focus-visible:ring-offset-2 flex items-center justify-center gap-2 cursor-pointer shrink-0"
            >
              <Globe className="w-4 h-4 shrink-0" aria-hidden="true" />
              <span>Autenticação de Domínios</span>
            </TabsTrigger>
          </TabsList>

          <TabsContent value="senders" className="focus-visible:outline-none pt-1">
            <SenderSettingsView />
          </TabsContent>
          <TabsContent value="domains" className="focus-visible:outline-none pt-1">
            <DomainSettingsView />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}