"use client";

import { useState, useMemo } from "react";
import Link from "next/link";
import { Plus, Search, Mail, CheckCircle2, FileText, ChevronRight, AlertTriangle } from "lucide-react";

import { Badge } from "@/shared/components/ui/badge";
import { Card, CardHeader, CardTitle, CardContent } from "@/shared/components/ui/card";
import { Breadcrumb } from "@/shared/components/ui/breadcrumb";
import { getCampaignStatusLabel, getCampaignStatusBadgeStyle } from "../utils/status-labels";

interface CampaignItem {
  id: string;
  title: string;
  subject: string;
  status: string;
  sender: {
    name: string;
  };
}

interface CampaignsSummary {
  campaignsCount: number;
  total: number;
  success: number;
  failed: number;
  pending: number;
}

interface CampaignsModuleViewProps {
  campaigns: CampaignItem[];
  summary: CampaignsSummary;
}

export function CampaignsModuleView({ campaigns, summary }: CampaignsModuleViewProps) {
  const [searchTerm, setSearchTerm] = useState("");
  const [statusFilter, setStatusFilter] = useState<"ALL" | "SENT" | "DRAFT">("ALL");

  const deliveryRate = summary.total > 0 ? Math.round((summary.success / summary.total) * 100) : null;

  const filteredCampaigns = useMemo(() => {
    return campaigns.filter((c) => {
      const matchesSearch =
        c.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
        c.subject.toLowerCase().includes(searchTerm.toLowerCase());
      const matchesStatus = statusFilter === "ALL" ? true : c.status === statusFilter;
      return matchesSearch && matchesStatus;
    });
  }, [campaigns, searchTerm, statusFilter]);

  return (
    <div className="w-full max-w-[1600px] mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6 pb-12">
      {/* Top Title & Header Actions */}
      <div className="flex items-center justify-between gap-4 pb-4 border-b border-zinc-200/80">
        <Breadcrumb
          items={[
            { label: "Início", href: "/" },
            { label: "Campanhas & E-mails" },
          ]}
        />

        <Link
          href="/campaigns/new"
          className="inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl bg-[#0F9FDF] hover:bg-[#0C87BD] text-xs font-bold text-white shadow-xs transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0F9FDF] focus-visible:ring-offset-2 shrink-0"
        >
          <Plus className="w-4 h-4" />
          <span>Nova Campanha</span>
        </Link>
      </div>

      {/* KPI Grid Row: 4 cols desktop, 2 cols tablet, 1 col mobile */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5">
          <CardHeader className="p-0 pb-2">
            <CardTitle className="text-xs font-bold uppercase tracking-wider text-zinc-500">
              Envios Totais
            </CardTitle>
          </CardHeader>
          <CardContent className="p-0 text-2xl font-extrabold text-zinc-900">
            {summary.total.toLocaleString("pt-BR")}
          </CardContent>
        </Card>

        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5">
          <CardHeader className="p-0 pb-2">
            <CardTitle className="text-xs font-bold uppercase tracking-wider text-zinc-500">
              Entregues
            </CardTitle>
          </CardHeader>
          <CardContent className="p-0 flex items-baseline gap-2">
            <span className="text-2xl font-extrabold text-emerald-600">
              {summary.success.toLocaleString("pt-BR")}
            </span>
            {deliveryRate !== null && (
              <span className="text-xs font-semibold text-emerald-700">{deliveryRate}% taxa</span>
            )}
          </CardContent>
        </Card>

        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5">
          <CardHeader className="p-0 pb-2">
            <CardTitle className="text-xs font-bold uppercase tracking-wider text-zinc-500">
              Falhas
            </CardTitle>
          </CardHeader>
          <CardContent className="p-0 text-2xl font-extrabold text-rose-600">
            {summary.failed.toLocaleString("pt-BR")}
          </CardContent>
        </Card>

        <Card className="bg-white border border-zinc-200/80 shadow-xs rounded-2xl p-5">
          <CardHeader className="p-0 pb-2">
            <CardTitle className="text-xs font-bold uppercase tracking-wider text-zinc-500">
              Total de Campanhas
            </CardTitle>
          </CardHeader>
          <CardContent className="p-0 text-2xl font-extrabold text-zinc-900">
            {summary.campaignsCount.toLocaleString("pt-BR")}
          </CardContent>
        </Card>
      </div>

      {/* Filter and Search Bar */}
      <div className="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 bg-white p-4 rounded-2xl border border-zinc-200/80 shadow-xs">
        {/* Status Filter Pills */}
        <div className="flex items-center gap-1.5 overflow-x-auto pb-1 sm:pb-0">
          <button
            type="button"
            onClick={() => setStatusFilter("ALL")}
            className={`px-3 py-1.5 text-xs font-bold rounded-xl transition-all ${
              statusFilter === "ALL"
                ? "bg-[#0F9FDF] text-white shadow-2xs"
                : "bg-zinc-100 text-zinc-600 hover:bg-zinc-200/80"
            }`}
          >
            Todas ({campaigns.length})
          </button>
          <button
            type="button"
            onClick={() => setStatusFilter("SENT")}
            className={`px-3 py-1.5 text-xs font-bold rounded-xl transition-all ${
              statusFilter === "SENT"
                ? "bg-[#0F9FDF] text-white shadow-2xs"
                : "bg-zinc-100 text-zinc-600 hover:bg-zinc-200/80"
            }`}
          >
            Disparadas ({campaigns.filter((c) => c.status === "SENT").length})
          </button>
          <button
            type="button"
            onClick={() => setStatusFilter("DRAFT")}
            className={`px-3 py-1.5 text-xs font-bold rounded-xl transition-all ${
              statusFilter === "DRAFT"
                ? "bg-[#0F9FDF] text-white shadow-2xs"
                : "bg-zinc-100 text-zinc-600 hover:bg-zinc-200/80"
            }`}
          >
            Rascunhos ({campaigns.filter((c) => c.status === "DRAFT").length})
          </button>
        </div>

        {/* Search Input */}
        <div className="relative w-full sm:w-72 shrink-0">
          <Search className="w-4 h-4 text-zinc-400 absolute left-3 top-1/2 -translate-y-1/2" />
          <input
            type="text"
            placeholder="Buscar por título ou assunto..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full pl-9 pr-4 py-2 bg-zinc-50 border border-zinc-200 rounded-xl text-xs text-zinc-900 focus:ring-2 focus:ring-[#0F9FDF] focus:border-[#0F9FDF] focus:bg-white"
          />
        </div>
      </div>

      {/* Campaigns List */}
      <div className="space-y-3">
        {filteredCampaigns.length === 0 ? (
          <div className="p-8 sm:p-12 text-center bg-white border border-dashed border-zinc-300 rounded-2xl shadow-xs space-y-3 max-w-2xl mx-auto">
            <Mail className="w-12 h-12 text-zinc-400 mx-auto opacity-70" />
            <div>
              <p className="text-sm font-bold text-zinc-900">
                {searchTerm || statusFilter !== "ALL"
                  ? "Nenhuma campanha encontrada com estes filtros."
                  : "Nenhuma campanha criada ainda."}
              </p>
              <p className="text-xs text-zinc-500 mt-1">
                {searchTerm || statusFilter !== "ALL"
                  ? "Tente ajustar os termos da busca ou filtro selecionado."
                  : "Clique no botão abaixo para abrir o Editor Visual e criar sua primeira newsletter."}
              </p>
            </div>
            {(!searchTerm && statusFilter === "ALL") && (
              <div className="pt-2">
                <Link
                  href="/campaigns/new"
                  className="inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-xl bg-[#0F9FDF] hover:bg-[#0C87BD] text-white text-xs font-bold shadow-xs transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0F9FDF] focus-visible:ring-offset-2"
                >
                  <Plus className="w-4 h-4" />
                  <span>Criar Primeira Campanha</span>
                </Link>
              </div>
            )}
          </div>
        ) : (
          filteredCampaigns.map((campaign) => (
            <Link key={campaign.id} href={`/campaigns/${campaign.id}`} className="block group">
              <div className="p-4 sm:p-5 rounded-2xl bg-white border border-zinc-200/80 hover:border-[#0F9FDF]/50 hover:shadow-xs transition-all duration-200 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                <div className="space-y-1 min-w-0">
                  <div className="flex items-center gap-2.5">
                    <h3 className="text-base font-bold text-zinc-900 group-hover:text-[#0F9FDF] transition-colors truncate">
                      {campaign.title}
                    </h3>
                  </div>
                  <p className="text-xs text-zinc-500 truncate">
                    Remetente: <span className="text-zinc-800 font-semibold">{campaign.sender?.name || "Padrão"}</span> · Assunto: <span className="text-zinc-800 font-semibold">{campaign.subject}</span>
                  </p>
                </div>

                <div className="flex items-center gap-3 shrink-0">
                  <Badge
                    variant="outline"
                    className={`text-[10px] font-bold px-2.5 py-1 rounded-full uppercase tracking-wider flex items-center gap-1.5 ${getCampaignStatusBadgeStyle(campaign.status)}`}
                  >
                    {campaign.status === "SENT" ? (
                      <CheckCircle2 className="w-3 h-3 text-emerald-600" />
                    ) : campaign.status === "COMPLETED_WITH_ERRORS" || campaign.status === "FAILED" ? (
                      <AlertTriangle className="w-3 h-3 text-amber-600" />
                    ) : (
                      <FileText className="w-3 h-3 text-zinc-500" />
                    )}
                    <span>{getCampaignStatusLabel(campaign.status)}</span>
                  </Badge>
                  <ChevronRight className="w-4 h-4 text-zinc-400 group-hover:text-[#0F9FDF] group-hover:translate-x-0.5 transition-all" />
                </div>
              </div>
            </Link>
          ))
        )}
      </div>
    </div>
  );
}