import Link from "next/link";
import { ArrowLeft, SquarePen, MailCheck } from "lucide-react";

import { Badge } from "@/shared/components/ui/badge";
import { buttonVariants } from "@/shared/components/ui/button";
import { Breadcrumb } from "@/shared/components/ui/breadcrumb";
import { DispatchCampaignCard } from "../components/dispatch-campaign-card";
import { CampaignPreviewCard } from "../components/campaign-preview-card";
import { DashboardRelatorio } from "../components/dashboard-relatorio";
import { getCampaignStatusLabel, getCampaignStatusBadgeStyle } from "../utils/status-labels";

interface CampaignDetailViewProps {
  campaign: {
    id: string;
    title: string;
    subject: string;
    senderId: string;
    contactListId: string | null;
    status: string;
    htmlBody: string;
    sender: {
      name: string;
      fromEmail: string;
    };
  };
  senders: { id: string; name: string; fromEmail: string }[];
  contactLists: { id: string; name: string; contactCount: number }[];
}

export function CampaignDetailView({ campaign, senders, contactLists }: CampaignDetailViewProps) {
  return (
    <div className="w-full max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6">
      {/* Top Header Navigation */}
      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 border-b border-zinc-200/80 pb-4">
        <div className="flex items-center gap-3 flex-wrap">
          <Breadcrumb
            items={[
              { label: "Início", href: "/" },
              { label: "Campanhas & E-mails", href: "/campaigns" },
              { label: campaign.title },
            ]}
          />
          <Badge
            variant="outline"
            className={`text-xs font-bold px-2.5 py-1 uppercase tracking-wider ${getCampaignStatusBadgeStyle(campaign.status)}`}
          >
            {getCampaignStatusLabel(campaign.status)}
          </Badge>
        </div>

        <div className="flex items-center gap-2 flex-wrap">
          <Link
            href="/"
            className={buttonVariants({ variant: "outline", size: "sm" }) + " border-zinc-300 text-zinc-700 hover:bg-zinc-100 text-xs font-semibold h-10 px-4 rounded-xl"}
          >
            <ArrowLeft className="w-4 h-4 mr-1.5" />
            Voltar para Dashboard
          </Link>

          <Link
            href="/campaigns/new"
            className={buttonVariants({ variant: "outline", size: "sm" }) + " border-[#0F9FDF]/30 text-[#0F9FDF] hover:bg-[#E7F6FD] text-xs font-bold h-10 px-4 rounded-xl"}
          >
            <SquarePen className="w-4 h-4 mr-1.5 text-[#0F9FDF]" />
            Abrir no Builder Visual
          </Link>
        </div>
      </div>

      {/* 1. Dispatch Configuration Card with Inputs */}
      <DispatchCampaignCard
        campaign={{
          id: campaign.id,
          title: campaign.title,
          subject: campaign.subject,
          senderId: campaign.senderId,
          contactListId: campaign.contactListId,
          status: campaign.status,
        }}
        senders={senders}
        contactLists={contactLists}
      />

      {/* 2. Newsletter Draft Preview Card */}
      <CampaignPreviewCard
        htmlBody={campaign.htmlBody}
        title={campaign.title}
        subject={campaign.subject}
        senderName={campaign.sender?.name}
        senderEmail={campaign.sender?.fromEmail}
      />

      {/* 3. Dispatch Metrics & Failures Report */}
      <div className="mt-4 space-y-3">
        <h2 className="text-lg sm:text-xl font-extrabold text-zinc-900 flex items-center gap-2">
          <MailCheck className="w-5 h-5 text-emerald-600 shrink-0" />
          <span>Métricas de Disparo &amp; Relatório de Entregabilidade</span>
        </h2>
        <DashboardRelatorio campaignId={campaign.id} />
      </div>
    </div>
  );
}