"use client";

import { useCallback, useEffect, useState } from "react";
import { toast } from "sonner";

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Badge } from "@/components/ui/badge";
import { useCompanyStore } from "@/hooks/store/useCompanyStore";
import {
  CampaignsAPI,
  type Campaign,
  type CampaignContact,
  type CampaignReport,
} from "@/apis/CampaignsAPI";
import { CAMPAIGN_CONTACT_STATUS_LABELS, campaignContactBadgeVariant } from "@/lib/campaign-contact-status";

const TYPE_LABELS: Record<Campaign["type"], string> = {
  cumpleanos: "Cumpleaños",
  antiguedad: "Antigüedad",
  evento: "Evento",
};

/**
 * C (minuta 2026-08-18): módulo de Campañas — maestro, generación de
 * contactos elegibles hoy, materialización a ticket de Call Center y
 * reportería contactados/pendientes. Vive dentro del menú "Call Center"
 * (lo pidió el cliente explícitamente en la reunión).
 */
export default function CampaignsPage(): React.ReactElement {
  const { selectedCompany } = useCompanyStore();
  const selectedCompanyId = Number(selectedCompany?.id);
  const idcompany = Number.isFinite(selectedCompanyId) && selectedCompanyId > 0 ? selectedCompanyId : 1;

  const [campaigns, setCampaigns] = useState<Campaign[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [selectedCampaignId, setSelectedCampaignId] = useState<number | null>(null);
  const [contacts, setContacts] = useState<CampaignContact[]>([]);
  const [report, setReport] = useState<CampaignReport | null>(null);
  const [isBusy, setIsBusy] = useState(false);

  const [newName, setNewName] = useState("");
  const [newType, setNewType] = useState<Campaign["type"]>("cumpleanos");

  const loadCampaigns = useCallback(async () => {
    setIsLoading(true);
    try {
      const data = await CampaignsAPI.getAll(idcompany);
      setCampaigns(data);
    } catch {
      toast.error("No se pudieron cargar las campañas");
    } finally {
      setIsLoading(false);
    }
  }, [idcompany]);

  useEffect(() => {
    loadCampaigns();
  }, [loadCampaigns]);

  const loadCampaignDetail = useCallback(async (id: number) => {
    try {
      const [contactsData, reportData] = await Promise.all([
        CampaignsAPI.getContacts(id),
        CampaignsAPI.getReport(id),
      ]);
      setContacts(contactsData);
      setReport(reportData);
    } catch {
      toast.error("No se pudo cargar el detalle de la campaña");
    }
  }, []);

  useEffect(() => {
    if (selectedCampaignId) {
      loadCampaignDetail(selectedCampaignId);
    } else {
      setContacts([]);
      setReport(null);
    }
  }, [selectedCampaignId, loadCampaignDetail]);

  const handleCreateCampaign = async (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    if (!newName.trim()) {
      toast.error("El nombre de la campaña es obligatorio");
      return;
    }

    setIsBusy(true);
    try {
      await CampaignsAPI.create({ idcompany, name: newName.trim(), type: newType });
      toast.success("Campaña creada");
      setNewName("");
      await loadCampaigns();
    } catch {
      toast.error("No se pudo crear la campaña");
    } finally {
      setIsBusy(false);
    }
  };

  const handleGenerateToday = async (id: number) => {
    setIsBusy(true);
    try {
      const generated = await CampaignsAPI.generateToday(id);
      toast.success(
        generated.length > 0
          ? `${generated.length} contacto(s) elegible(s) generado(s) hoy`
          : "No hay nuevos elegibles para hoy"
      );
      if (selectedCampaignId === id) {
        await loadCampaignDetail(id);
      }
    } catch {
      toast.error("No se pudo generar la base de contactos");
    } finally {
      setIsBusy(false);
    }
  };

  const handleMaterialize = async (id: number) => {
    setIsBusy(true);
    try {
      const processed = await CampaignsAPI.materialize(id);
      toast.success(`${processed.length} contacto(s) procesado(s)`);
      if (selectedCampaignId === id) {
        await loadCampaignDetail(id);
      }
    } catch {
      toast.error("No se pudo materializar la campaña");
    } finally {
      setIsBusy(false);
    }
  };

  const handleDelete = async (id: number) => {
    setIsBusy(true);
    try {
      await CampaignsAPI.remove(id);
      toast.success("Campaña eliminada");
      if (selectedCampaignId === id) {
        setSelectedCampaignId(null);
      }
      await loadCampaigns();
    } catch {
      toast.error("No se pudo eliminar la campaña");
    } finally {
      setIsBusy(false);
    }
  };

  return (
    <div className="p-6 space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Campañas</h1>
        <p className="text-sm text-muted-foreground">
          Maestro de campañas, generación de contactos elegibles hoy y materialización a tickets de Call Center.
        </p>
      </div>

      <Card>
        <CardHeader>
          <CardTitle>Nueva campaña</CardTitle>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleCreateCampaign} className="flex flex-wrap items-end gap-3">
            <div className="space-y-1">
              <Label htmlFor="campaign-name">Nombre</Label>
              <Input
                id="campaign-name"
                value={newName}
                onChange={(e) => setNewName(e.target.value)}
                placeholder="Ej: Cumpleaños del mes"
              />
            </div>
            <div className="space-y-1">
              <Label>Tipo</Label>
              <Select value={newType} onValueChange={(v) => setNewType(v as Campaign["type"])}>
                <SelectTrigger className="w-48">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {Object.entries(TYPE_LABELS).map(([value, label]) => (
                    <SelectItem key={value} value={value}>
                      {label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <Button type="submit" disabled={isBusy}>
              Crear campaña
            </Button>
          </form>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Campañas ({campaigns.length})</CardTitle>
        </CardHeader>
        <CardContent>
          {isLoading ? (
            <p className="text-sm text-muted-foreground">Cargando...</p>
          ) : campaigns.length === 0 ? (
            <p className="text-sm text-muted-foreground">Aún no hay campañas creadas.</p>
          ) : (
            <div className="space-y-2">
              {campaigns.map((campaign) => (
                <div
                  key={campaign.id}
                  className={`flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3 ${
                    selectedCampaignId === campaign.id ? "border-blue-400 bg-blue-50" : ""
                  }`}
                >
                  <button
                    type="button"
                    className="text-left"
                    onClick={() => setSelectedCampaignId(campaign.id)}
                  >
                    <div className="font-medium">{campaign.name}</div>
                    <div className="text-xs text-muted-foreground">
                      {TYPE_LABELS[campaign.type] ?? campaign.type}
                      {campaign.is_active ? (
                        <Badge variant="outline" className="ml-2">
                          Activa
                        </Badge>
                      ) : (
                        <Badge variant="secondary" className="ml-2">
                          Inactiva
                        </Badge>
                      )}
                    </div>
                  </button>
                  <div className="flex gap-2">
                    <Button
                      size="sm"
                      variant="outline"
                      disabled={isBusy}
                      onClick={() => handleGenerateToday(campaign.id)}
                    >
                      Generar contactos hoy
                    </Button>
                    <Button
                      size="sm"
                      variant="outline"
                      disabled={isBusy}
                      onClick={() => handleMaterialize(campaign.id)}
                    >
                      Materializar
                    </Button>
                    <Button
                      size="sm"
                      variant="ghost"
                      disabled={isBusy}
                      onClick={() => handleDelete(campaign.id)}
                    >
                      Eliminar
                    </Button>
                  </div>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {selectedCampaignId ? (
        <Card>
          <CardHeader>
            <CardTitle>Detalle de campaña</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {report ? (
              <div className="flex gap-4 text-sm">
                <span>
                  Contactados: <strong>{report.contacted}</strong>
                </span>
                <span>
                  Pendientes: <strong>{report.pending}</strong>
                </span>
                <span>
                  Omitidos: <strong>{report.skipped}</strong>
                </span>
                <span>
                  Total: <strong>{report.total}</strong>
                </span>
              </div>
            ) : null}

            {contacts.length === 0 ? (
              <p className="text-sm text-muted-foreground">
                Sin contactos generados todavía. Usa &quot;Generar contactos hoy&quot;.
              </p>
            ) : (
              <div className="space-y-1 text-sm">
                {contacts.map((contact) => (
                  <div key={contact.id} className="flex items-center justify-between border-b py-1">
                    <span>{contact.customer_name ?? `Cliente #${contact.idcustomer}`}</span>
                    <span className="flex items-center gap-2">
                      {contact.ticket_number ? (
                        <span className="text-xs text-muted-foreground">{contact.ticket_number}</span>
                      ) : null}
                      <Badge className="" variant={campaignContactBadgeVariant(contact.status)}>
                        {CAMPAIGN_CONTACT_STATUS_LABELS[contact.status] ?? contact.status}
                      </Badge>
                    </span>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>
      ) : null}
    </div>
  );
}