"use client";

import Link from "next/link";
import { Mail, Plus, ChevronRight } 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 HomeDashboardViewProps {
  campaigns: CampaignItem[];
  summary: CampaignsSummary;
  user?: {
    name?: string | null;
    email?: string | null;
  };
}

export function HomeDashboardView({ campaigns, summary }: HomeDashboardViewProps) {
  const deliveryRate = summary.total > 0 ? Math.round((summary.success / summary.total) * 100) : null;

  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 flex-col sm:flex-row sm: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 self-start sm:self-auto"
        >
          <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}% entrega</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">Campanhas</CardTitle>
          </CardHeader>
          <CardContent className="p-0 text-2xl font-extrabold text-zinc-900">{summary.campaignsCount.toLocaleString("pt-BR")}</CardContent>
        </Card>
      </div>

      {/* Campaigns List */}
      <div className="space-y-3">
        {campaigns.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">Nenhuma campanha criada ainda.</p>
              <p className="text-xs text-zinc-500 mt-1">
                Clique no botão abaixo para abrir o Editor Visual e criar sua primeira newsletter.
              </p>
            </div>
            <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>
        ) : (
          campaigns.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 ${getCampaignStatusBadgeStyle(campaign.status)}`}
                  >
                    {getCampaignStatusLabel(campaign.status)}
                  </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>
  );
}