"use client";

import React, { useEffect, useMemo, useRef, useState } from "react";
import Select from "react-select";
import { Loader2, MapPin, Pencil, Search, Trash2, UploadCloud, UserPlus, Users, X, XCircle } from "lucide-react";
import { Container } from "@/components/common/Container";
import { Card, CardContent } from "@/components/common/Card";
import { Button } from "@/components/common/Button";
import { AgentSendersSkeleton } from "@/components/skeletons/AgentSendersSkeleton";
import { CountrySelect, type CountrySelectHandle } from "@/components/app/CountrySelect";
import { SEARCHABLE_SELECT_COMPONENTS } from "@/components/common/SearchableSelectParts";
import { useControlledSelectMenu } from "@/hooks/useControlledSelectMenu";
import {
  useAgentSenders,
  useAgentSenderDetail,
  useAgentCheckSenderUser,
  useAgentStoreSender,
  useAgentUpdateSender,
  useAgentDeleteSender,
  type SenderListItem,
} from "@/hooks/queries/useAgentSenders";
import { useAgentBasicData } from "@/hooks/queries/useAgentDashboard";
import { notify } from "@/lib/notify";
import { cn } from "@/lib/utils";
import { useTranslation } from "@/hooks/useTranslation";

// ─── Constants ────────────────────────────────────────────────────────────────

const ID_TYPES = ["NID Card", "Passport", "Driving Licence"];

const INPUT = "h-10 w-full rounded-xl border border-slate-200 bg-white px-3.5 text-sm outline-none transition focus:border-brand-400 dark:border-slate-700 dark:bg-slate-800/60 dark:text-white";
const LABEL = "text-[length:var(--text-sm-fixed)] font-medium text-slate-600 dark:text-slate-300";

// ─── Sender form state ────────────────────────────────────────────────────────

type SenderForm = {
  register_user: boolean;
  first_name: string;
  last_name: string;
  email: string;
  phone: string;
  country: string;
  state: string;
  city: string;
  zip_code: string;
  id_type: string;
  front_part: File | null;
  back_part: File | null;
};

const EMPTY_FORM: SenderForm = {
  register_user: false,
  first_name: "", last_name: "", email: "", phone: "",
  country: "", state: "", city: "", zip_code: "",
  id_type: "", front_part: null, back_part: null,
};

// ─── Slide-over drawer ────────────────────────────────────────────────────────

function Drawer({
  open, onClose, children,
}: { open: boolean; onClose: () => void; children: React.ReactNode }) {
  // Keep mounted through the close transition, then fully unmount — any
  // react-select menu portalled to document.body (CountrySelect) must be
  // torn down with it, or it's left floating over whatever page follows.
  const [shouldRender, setShouldRender] = useState(open);

  useEffect(() => {
    if (open) { setShouldRender(true); return; }
    const timeout = setTimeout(() => setShouldRender(false), 200);
    return () => clearTimeout(timeout);
  }, [open]);

  useEffect(() => {
    if (!open) return;
    const handler = (e: KeyboardEvent) => { if (e.key === "Escape") onClose(); };
    document.addEventListener("keydown", handler);
    return () => document.removeEventListener("keydown", handler);
  }, [open, onClose]);

  if (!shouldRender) return null;

  return (
    <>
      {/* Backdrop — z-[80] covers sidebar */}
      <div
        className={cn(
          "fixed inset-0 z-[80] bg-slate-900/50 backdrop-blur-sm transition-opacity duration-200 dark:bg-black/70",
          open ? "opacity-100" : "pointer-events-none opacity-0",
        )}
        onMouseDown={onClose}
      />
      {/* Centered modal */}
      <div
        className={cn(
          "fixed inset-0 z-[90] flex items-center justify-center p-4 transition-all duration-200",
          open ? "opacity-100" : "pointer-events-none opacity-0",
        )}
      >
        <div
          className={cn(
            "flex max-h-[90vh] w-full max-w-2xl flex-col overflow-hidden rounded-2xl bg-white shadow-2xl ring-1 ring-slate-900/5 transition-all duration-200 dark:bg-slate-900 dark:ring-white/10",
            open ? "scale-100 translate-y-0" : "scale-95 translate-y-4",
          )}
        >
          {children}
        </div>
      </div>
    </>
  );
}

// ─── Sender form (add / edit) ─────────────────────────────────────────────────

function SenderFormDrawer({
  open,
  editSlug,
  onClose,
}: {
  open: boolean;
  editSlug: string | null;
  onClose: () => void;
}) {
  const { t } = useTranslation();
  const isEdit = !!editSlug;
  const [form, setForm] = useState<SenderForm>(EMPTY_FORM);
  const [emailQuery, setEmailQuery] = useState("");
  const [checkError, setCheckError] = useState<string | null>(null);
  const countrySelectRef = useRef<CountrySelectHandle | null>(null);

  const { data: detail, isLoading: loadingDetail } = useAgentSenderDetail(editSlug ?? "");
  const { data: basicData } = useAgentBasicData();
  const [idTypeSearch, setIdTypeSearch] = useState("");
  const idTypeRef = useRef<HTMLDivElement>(null);
  const idTypeMenu = useControlledSelectMenu(idTypeRef, "select-menu-portal");
  const { mutate: checkUser, isPending: checking } = useAgentCheckSenderUser();
  const { mutate: store, isPending: storing } = useAgentStoreSender();
  const { mutate: update, isPending: updating } = useAgentUpdateSender();
  const isPending = storing || updating;

  // Force the country select's menu shut before closing — it's portalled to
  // document.body, so it won't fade with the drawer and would otherwise
  // hang visible over whatever the modal closes onto.
  function handleClose() {
    countrySelectRef.current?.closeMenu();
    onClose();
  }

  // Pre-fill form when editing
  useEffect(() => {
    if (isEdit && detail) {
      setForm({
        register_user: false,
        first_name: detail.first_name ?? "",
        last_name: detail.last_name ?? "",
        email: detail.email ?? "",
        phone: detail.phone ?? "",
        country: detail.country ?? "",
        state: detail.state ?? "",
        city: detail.city ?? "",
        zip_code: detail.zip_code ?? "",
        id_type: detail.id_type ?? "",
        front_part: null,
        back_part: null,
      });
    } else if (!isEdit) {
      setForm(EMPTY_FORM);
      setEmailQuery("");
      setCheckError(null);
      setIdTypeSearch("");
    }
  }, [isEdit, detail, open]);

  function set(field: keyof SenderForm) {
    return (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) =>
      setForm((prev) => ({ ...prev, [field]: e.target.value }));
  }

  function handleCheckUser() {
    if (!emailQuery.trim()) return;
    setCheckError(null);
    checkUser(emailQuery.trim(), {
      onSuccess: (user) => {
        setForm((prev) => ({
          ...prev,
          first_name: user.first_name,
          last_name: user.last_name,
          email: user.email,
          phone: user.phone,
          country: user.country,
          state: user.state,
          city: user.city,
          zip_code: user.zip_code,
        }));
        notify(t("agent.senders.autoFilled"), "success");
      },
      onError: (err: Error) => setCheckError(err.message || "User not found"),
    });
  }

  function handleSubmit(e: { preventDefault(): void }) {
    e.preventDefault();
    const input = {
      register_user: form.register_user,
      first_name: form.first_name,
      last_name: form.last_name,
      ...(form.email ? { email: form.email } : {}),
      phone: form.phone,
      country: form.country,
      state: form.state,
      city: form.city,
      zip_code: form.zip_code,
      id_type: form.id_type,
      ...(form.front_part ? { front_part: form.front_part } : {}),
      ...(form.back_part ? { back_part: form.back_part } : {}),
    };

    if (isEdit && editSlug) {
      update(
        { slug: editSlug, input },
        {
          onSuccess: () => { notify(t("agent.senders.updated"), "success"); handleClose(); },
          onError: (err: Error) => notify(err.message || "Update failed", "error"),
        },
      );
    } else {
      store(input, {
        onSuccess: () => { notify(t("agent.senders.added"), "success"); handleClose(); },
        onError: (err: Error) => notify(err.message || "Failed to add sender", "error"),
      });
    }
  }

  return (
    <Drawer open={open} onClose={handleClose}>
      {/* Header */}
      <div className="flex items-center justify-between border-b border-slate-200 px-5 py-4 dark:border-slate-800">
        <h2 className="text-[length:var(--text-lg-fixed)] font-bold text-slate-900 dark:text-white">
          {isEdit ? t("agent.senders.editDrawer") : t("agent.senders.addDrawer")}
        </h2>
        <button
          type="button"
          onMouseDown={handleClose}
          className="btn-icon-sm text-slate-400 transition hover:bg-slate-100 hover:text-slate-600 dark:hover:bg-slate-800 dark:hover:text-slate-200"
        >
          <X className="icon-md" />
        </button>
      </div>

      {/* Body */}
      <div className="flex-1 overflow-y-auto px-5 py-5">
        {isEdit && loadingDetail ? (
          <div className="flex h-40 items-center justify-center">
            <Loader2 className="h-6 w-6 animate-spin text-slate-400" />
          </div>
        ) : (
          <form id="sender-form" onSubmit={handleSubmit} className="space-y-6">
            {/* Email lookup (add mode only) */}
            {!isEdit && (
              <div className="rounded-xl border border-brand-200/60 bg-brand-50/50 p-4 dark:border-brand-500/20 dark:bg-brand-500/5">
                <p className="mb-2.5 text-[length:var(--text-sm-fixed)] font-medium text-brand-700 dark:text-brand-300">
                  {t("agent.senders.lookupLabel")}
                </p>
                <div className="flex gap-2">
                  <input
                    type="email"
                    value={emailQuery}
                    onChange={(e) => { setEmailQuery(e.target.value); setCheckError(null); }}
                    placeholder={t("agent.senders.emailPlaceholder")}
                    className={cn(INPUT, "flex-1", checkError ? "border-rose-400 focus:border-rose-500" : "")}
                  />
                  <Button
                    type="button"
                    size="sm"
                    onClick={handleCheckUser}
                    disabled={!emailQuery.trim()}
                    loading={checking}
                  >
                    {!checking && <Search className="icon-sm" />}
                    {t("agent.senders.find")}
                  </Button>
                </div>
                {checkError && (
                  <p className="mt-1.5 flex items-center gap-1 text-xs font-medium text-rose-600 dark:text-rose-400">
                    <XCircle className="icon-sm shrink-0" />
                    {checkError}
                  </p>
                )}
                <div className="mt-3 flex items-center gap-2">
                  <input
                    type="checkbox"
                    id="register_user"
                    checked={form.register_user}
                    onChange={(e) => setForm((p) => ({ ...p, register_user: e.target.checked }))}
                    className="h-3.5 w-3.5 rounded accent-brand-600"
                  />
                  <label htmlFor="register_user" className="text-[length:var(--text-sm-fixed)] text-slate-600 dark:text-slate-400">
                    {t("agent.senders.alsoRegister")}
                  </label>
                </div>
              </div>
            )}

            {/* Name row */}
            <div className="grid grid-cols-2 gap-3">
              <div className="flex flex-col gap-1.5">
                <label className={LABEL}>{t("agent.senders.firstNameLabel")} <span className="text-rose-500">*</span></label>
                <input type="text" value={form.first_name} onChange={set("first_name")} placeholder={t("agent.senders.firstNamePlaceholder")} required className={INPUT} />
              </div>
              <div className="flex flex-col gap-1.5">
                <label className={LABEL}>{t("agent.senders.lastNameLabel")} <span className="text-rose-500">*</span></label>
                <input type="text" value={form.last_name} onChange={set("last_name")} placeholder={t("agent.senders.lastNamePlaceholder")} required className={INPUT} />
              </div>
            </div>

            <div className="flex flex-col gap-1.5">
              <label className={LABEL}>{t("agent.senders.emailLabel")}</label>
              <input type="email" value={form.email} onChange={set("email")} placeholder={t("agent.senders.emailPlaceholder")} className={INPUT} />
            </div>

            <div className="flex flex-col gap-1.5">
              <label className={LABEL}>{t("agent.senders.phoneLabel")} <span className="text-rose-500">*</span></label>
              <input type="tel" value={form.phone} onChange={set("phone")} placeholder={t("agent.senders.phonePlaceholder")} required className={INPUT} />
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div className="flex flex-col gap-1.5">
                <label className={LABEL}>{t("agent.senders.countryLabel")} <span className="text-rose-500">*</span></label>
                <CountrySelect
                  ref={countrySelectRef}
                  countries={basicData?.countries ?? []}
                  value={form.country}
                  onChange={(val) => setForm((p) => ({ ...p, country: val }))}
                  placeholder={t("agent.senders.countryPlaceholder")}
                />
              </div>
              <div className="flex flex-col gap-1.5">
                <label className={LABEL}>{t("agent.senders.stateLabel")}</label>
                <input type="text" value={form.state} onChange={set("state")} placeholder={t("agent.senders.statePlaceholder")} className={INPUT} />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-3">
              <div className="flex flex-col gap-1.5">
                <label className={LABEL}>{t("agent.senders.cityLabel")}</label>
                <input type="text" value={form.city} onChange={set("city")} placeholder={t("agent.senders.cityPlaceholder")} className={INPUT} />
              </div>
              <div className="flex flex-col gap-1.5">
                <label className={LABEL}>{t("agent.senders.zipLabel")}</label>
                <input type="text" value={form.zip_code} onChange={set("zip_code")} placeholder={t("agent.senders.zipPlaceholder")} className={INPUT} />
              </div>
            </div>

            <div className="flex flex-col gap-1.5">
              <label className={LABEL}>{t("agent.senders.idTypeLabel")}</label>
              <div ref={idTypeRef}>
                <Select
                  unstyled
                  isSearchable
                  inputValue={idTypeSearch}
                  menuIsOpen={idTypeMenu.menuIsOpen}
                  onMenuOpen={idTypeMenu.onMenuOpen}
                  onInputChange={(val, { action }) => { if (action === "input-change") setIdTypeSearch(val); }}
                  onMenuClose={() => { idTypeMenu.onMenuClose(); setIdTypeSearch(""); }}
                  components={SEARCHABLE_SELECT_COMPONENTS}
                  options={ID_TYPES.map((v) => ({ value: v, label: v }))}
                  value={form.id_type ? { value: form.id_type, label: form.id_type } : null}
                  onChange={(opt) => setForm((p) => ({ ...p, id_type: (opt as { value: string } | null)?.value ?? "" }))}
                  placeholder={t("agent.senders.idTypePlaceholder")}
                  classNames={{
                    control: ({ menuIsOpen }) =>
                      cn(
                        "h-10 w-full cursor-pointer border bg-white px-3.5 text-sm text-slate-900 transition-[border-radius] duration-150 dark:bg-slate-800/60 dark:text-white",
                        menuIsOpen ? "rounded-t-xl rounded-b-none" : "rounded-xl",
                        "border-slate-200 dark:border-slate-700",
                      ),
                    menu: () => "overflow-hidden rounded-b-xl border border-t-0 border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-800",
                    menuList: () => "max-h-52 overflow-y-auto overflow-x-hidden",
                    option: ({ isFocused, isSelected }) =>
                      cn(
                        "px-3.5 py-2 text-sm cursor-pointer",
                        isSelected
                          ? "bg-brand-500 text-white"
                          : isFocused
                            ? "bg-brand-50 text-brand-700 dark:bg-brand-500/10 dark:text-brand-300"
                            : "text-slate-700 dark:text-slate-200",
                      ),
                    placeholder: () => "text-slate-400 text-sm",
                    singleValue: () => "text-sm text-slate-800 dark:text-slate-200",
                    indicatorsContainer: () => "shrink-0 gap-1",
                    dropdownIndicator: () => "cursor-pointer px-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300",
                    noOptionsMessage: () => "px-3.5 py-3 text-sm text-slate-400",
                  }}
                />
              </div>
            </div>

            <div className="grid grid-cols-2 gap-3">
              <FileField
                label={t("agent.senders.frontPart")}
                onChange={(f) => setForm((p) => ({ ...p, front_part: f }))}
                current={form.front_part}
                existingUrl={isEdit ? detail?.front_part : null}
              />
              <FileField
                label={t("agent.senders.backPart")}
                onChange={(f) => setForm((p) => ({ ...p, back_part: f }))}
                current={form.back_part}
                existingUrl={isEdit ? detail?.back_part : null}
              />
            </div>
          </form>
        )}
      </div>

      {/* Footer */}
      <div className="border-t border-slate-200 px-5 py-4 dark:border-slate-800">
        <div className="flex gap-3">
          <Button type="submit" form="sender-form" size="md" disabled={isPending} className="flex-1">
            {isPending ? (isEdit ? t("agent.senders.saving") : t("agent.senders.adding")) : (isEdit ? t("agent.senders.saveChanges") : t("agent.senders.addSenderSubmit"))}
          </Button>
          <Button size="md" variant="outline" onMouseDown={handleClose}>
            {t("agent.senders.cancel")}
          </Button>
        </div>
      </div>
    </Drawer>
  );
}

function FileField({
  label,
  onChange,
  current,
  existingUrl,
}: {
  label: string;
  onChange: (f: File | null) => void;
  current: File | null;
  existingUrl?: string | null;
}) {
  const { t } = useTranslation();
  const [dragging, setDragging] = useState(false);
  const inputRef = useRef<HTMLInputElement | null>(null);
  const [preview, setPreview] = useState<string | null>(null);

  // Reset local preview when form is reset (current goes null and no new file)
  useEffect(() => {
    if (!current) setPreview(null);
  }, [current]);

  function handleFile(f: File) {
    onChange(f);
    const reader = new FileReader();
    reader.onloadend = () => setPreview(reader.result as string);
    reader.readAsDataURL(f);
  }

  function handleDrop(e: React.DragEvent) {
    e.preventDefault();
    setDragging(false);
    const f = e.dataTransfer.files[0];
    if (f && f.type.startsWith("image/")) handleFile(f);
  }

  // Priority: new file preview → existing API URL → empty
  const displaySrc = preview ?? existingUrl ?? null;
  const hasImage = !!displaySrc;

  return (
    <div className="flex flex-col gap-1.5">
      <div className="flex items-center justify-between">
        <span className={LABEL}>{label}</span>
        {hasImage && (
          <button
            type="button"
            onClick={() => { onChange(null); setPreview(null); }}
            className="text-xs text-rose-500 transition hover:text-rose-700"
          >
            {current ? t("agent.senders.removeFile") : t("agent.senders.replaceFile")}
          </button>
        )}
      </div>

      <button
        type="button"
        onDragOver={(e) => { e.preventDefault(); setDragging(true); }}
        onDragLeave={() => setDragging(false)}
        onDrop={handleDrop}
        onClick={() => inputRef.current?.click()}
        className={cn(
          "relative flex min-h-28 w-full cursor-pointer flex-col items-center justify-center gap-2 overflow-hidden rounded-xl border-2 border-dashed transition-all",
          dragging
            ? "border-brand-400 bg-brand-50/80 dark:border-brand-500 dark:bg-brand-500/10"
            : hasImage
              ? "border-emerald-200 bg-slate-50 dark:border-emerald-700/40 dark:bg-slate-800/30"
              : "border-slate-200 bg-slate-50/60 hover:border-brand-300 hover:bg-brand-50/40 dark:border-slate-700 dark:bg-slate-800/30",
        )}
      >
        {displaySrc ? (
          <img src={displaySrc} alt={label} className="max-h-24 w-full object-contain" />
        ) : (
          <>
            <UploadCloud className="h-5 w-5 text-slate-400" />
            <p className="text-xs text-slate-500 dark:text-slate-400">
              {t("agent.senders.dropOrClick")}
            </p>
          </>
        )}
        <input
          ref={inputRef}
          type="file"
          accept="image/*"
          className="sr-only"
          onChange={(e) => { const f = e.target.files?.[0]; if (f) handleFile(f); e.target.value = ""; }}
        />
      </button>

      {current && (
        <p className="truncate text-xs text-emerald-600 dark:text-emerald-400">
          {current.name} ({(current.size / 1024).toFixed(0)} KB)
        </p>
      )}
      {!current && existingUrl && (
        <p className="text-xs text-slate-400 dark:text-slate-500">{t("agent.senders.existingImage")}</p>
      )}
    </div>
  );
}

// ─── Sender card ──────────────────────────────────────────────────────────────

function SenderCard({
  sender,
  onEdit,
}: {
  sender: SenderListItem;
  onEdit: () => void;
}) {
  const { t } = useTranslation();
  const [confirming, setConfirming] = useState(false);
  const { mutate: deleteSender, isPending } = useAgentDeleteSender();
  const initials = sender.name
    .split(" ")
    .map((p) => p.charAt(0))
    .slice(0, 2)
    .join("")
    .toUpperCase();

  function handleDelete() {
    deleteSender(sender.slug, {
      onSuccess: () => { notify(t("agent.senders.removed"), "success"); setConfirming(false); },
      onError: (err: Error) => notify(err.message || "Failed to delete", "error"),
    });
  }

  return (
    <div className="group relative overflow-hidden rounded-2xl border border-dashed border-slate-200/70 bg-white transition-all hover:-translate-y-0.5 hover:border-brand-300/60 hover:shadow-card dark:border-slate-700/60 dark:bg-slate-900/70 dark:hover:border-brand-500/40">

      {/* Header row */}
      <div className="flex items-center gap-3.5 px-5 py-5">
        <span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-gradient-to-br from-brand-500 to-accent-500 text-sm font-bold text-white">
          {initials}
        </span>
        <div className="min-w-0 flex-1">
          <p className="truncate text-[length:var(--text-base-fixed)] font-bold text-slate-900 dark:text-white">{sender.name}</p>
          <p className="truncate text-[length:var(--text-sm-fixed)] text-slate-400">{sender.email || "—"}</p>
        </div>
        {/* Actions inline */}
        <div className="flex shrink-0 gap-1 opacity-0 transition-all group-hover:opacity-100">
          <button
            type="button"
            onClick={onEdit}
            aria-label="Edit sender"
            className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-brand-200 bg-brand-50 text-brand-600 shadow-sm transition-all hover:-translate-y-0.5 hover:bg-brand-100 hover:shadow-md active:translate-y-0 dark:border-brand-500/30 dark:bg-brand-500/10 dark:text-brand-400 dark:hover:bg-brand-500/20"
          >
            <Pencil className="icon-sm" />
          </button>
          <button
            type="button"
            onClick={() => setConfirming(true)}
            aria-label="Delete sender"
            className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-rose-200 bg-rose-50 text-rose-600 shadow-sm transition-all hover:-translate-y-0.5 hover:bg-rose-100 hover:shadow-md active:translate-y-0 dark:border-rose-500/30 dark:bg-rose-500/10 dark:text-rose-400 dark:hover:bg-rose-500/20"
          >
            <Trash2 className="icon-sm" />
          </button>
        </div>
      </div>

      {/* Footer strip */}
      <div className="flex items-center gap-3 border-t border-slate-100 px-5 py-3.5 dark:border-slate-800/60">
        <MapPin className="icon-sm shrink-0 text-slate-400" />
        <span className="truncate text-xs font-medium text-slate-700 dark:text-slate-200">{sender.country || "—"}</span>
        <span className="h-3 w-px shrink-0 bg-slate-200 dark:bg-slate-700" />
        <span className="text-2xs font-semibold uppercase tracking-wider text-slate-400">{t("agent.senders.zipLabel")}</span>
        <code className="rounded-md bg-slate-100 px-1.5 py-0.5 text-xs font-mono text-slate-700 dark:bg-slate-800 dark:text-slate-200">
          {sender.zip_code || "—"}
        </code>
      </div>

      {/* Delete confirmation */}
      {confirming && (
        <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-2xl bg-white/95 p-5 backdrop-blur-sm dark:bg-slate-900/95">
          <p className="text-center text-sm font-semibold text-slate-900 dark:text-white">
            {t("agent.senders.confirmRemove").replace("{name}", sender.name)}
          </p>
          <div className="flex gap-2">
            <Button
              type="button"
              size="sm"
              variant="destructive"
              loading={isPending}
              onClick={handleDelete}
            >
              {!isPending && <Trash2 className="icon-sm" />}
              {t("agent.senders.deleteConfirm")}
            </Button>
            <Button
              type="button"
              size="sm"
              variant="outline"
              onClick={() => setConfirming(false)}
            >
              {t("agent.senders.cancel")}
            </Button>
          </div>
        </div>
      )}
    </div>
  );
}

// ─── Main view ────────────────────────────────────────────────────────────────

export function AgentSendersView() {
  const { t } = useTranslation();
  const { data, isLoading, isError, error } = useAgentSenders();
  const [search, setSearch] = useState("");
  const [countryFilter, setCountryFilter] = useState("");
  const [countryFilterSearch, setCountryFilterSearch] = useState("");
  const countryFilterRef = useRef<HTMLDivElement>(null);
  const countryFilterMenu = useControlledSelectMenu(countryFilterRef, "select-menu-portal");
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [editSlug, setEditSlug] = useState<string | null>(null);

  const senders = useMemo(() => data ?? [], [data]);

  const countries = useMemo(
    () => [...new Set(senders.map((s) => s.country).filter(Boolean))].sort(),
    [senders]
  );


  const filtered = useMemo(() => {
    const q = search.toLowerCase();
    return senders.filter((s) => {
      const matchSearch = !q || s.name.toLowerCase().includes(q) || s.email.toLowerCase().includes(q) || s.country.toLowerCase().includes(q);
      const matchCountry = !countryFilter || s.country === countryFilter;
      return matchSearch && matchCountry;
    });
  }, [senders, search, countryFilter]);

  function openAdd() { setEditSlug(null); setDrawerOpen(true); }
  function openEdit(slug: string) { setEditSlug(slug); setDrawerOpen(true); }
  function closeDrawer() { setDrawerOpen(false); setEditSlug(null); setSearch(""); setCountryFilter(""); }

  if (isLoading) return <AgentSendersSkeleton />;

  if (isError) {
    return (
      <Container className="max-w-full pb-10">
        <div className="flex flex-col items-center gap-4 rounded-3xl border border-rose-200 bg-rose-50 p-16 text-center dark:border-rose-500/20 dark:bg-rose-500/10">
          <XCircle className="h-10 w-10 text-rose-500" />
          <p className="font-semibold text-slate-900 dark:text-white">
            {(error as Error | null)?.message || t("agent.senders.failedToLoad")}
          </p>
        </div>
      </Container>
    );
  }

  return (
    <>
      <Container className="max-w-full space-y-6 pb-10">
        {/* Page header */}
        <header className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div className="flex items-center gap-4">
            <div className="icon-box-md grid place-items-center rounded-2xl bg-gradient-to-br from-brand-500 to-accent-500 text-white shadow-lg">
              <Users className="icon-xl" />
            </div>
            <div>
              <h1 className="text-2xl font-bold tracking-tight text-slate-900 dark:text-white">{t("agent.senders.title")}</h1>
              <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
                {t("agent.senders.subtitle").replace("{n}", String(senders.length))}
              </p>
            </div>
          </div>
          <Button size="md" onClick={openAdd}>
            <UserPlus className="me-1 icon-md" />
            {t("agent.senders.addSender")}
          </Button>
        </header>

        <Card>
          <CardContent>
            {/* Search + country filter */}
            <div className="flex flex-col items-center gap-3 sm:flex-row sm:justify-center">
              <div className="relative w-full max-w-sm">
                <Search className="pointer-events-none absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                <input
                  type="search"
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  placeholder={t("agent.senders.searchPlaceholder")}
                  autoComplete="off"
                  className="h-10 w-full rounded-xl border border-slate-200 bg-white ps-9 pe-4 text-sm outline-none transition focus:border-brand-400 dark:border-slate-700 dark:bg-slate-900 dark:text-white"
                />
              </div>

              {countries.length > 0 && (
                <div className="w-full sm:w-52" ref={countryFilterRef}>
                  <Select
                    unstyled
                    isClearable
                    isSearchable
                    inputValue={countryFilterSearch}
                    menuIsOpen={countryFilterMenu.menuIsOpen}
                    onMenuOpen={countryFilterMenu.onMenuOpen}
                    onInputChange={(val, { action }) => { if (action === "input-change") setCountryFilterSearch(val); }}
                    onMenuClose={() => { countryFilterMenu.onMenuClose(); setCountryFilterSearch(""); }}
                    components={SEARCHABLE_SELECT_COMPONENTS}
                    placeholder={t("agent.senders.allCountries")}
                    value={countryFilter ? { value: countryFilter, label: countryFilter } : null}
                    onChange={(opt) => setCountryFilter((opt as { value: string } | null)?.value ?? "")}
                    options={countries.map((c) => ({ value: c, label: c }))}
                    classNames={{
                      control: ({ menuIsOpen }) =>
                        cn(
                          "flex h-10 w-full cursor-pointer items-center border bg-white px-3 text-sm text-slate-900 transition-[border-radius] duration-150 dark:bg-slate-900 dark:text-white",
                          menuIsOpen ? "rounded-t-xl rounded-b-none" : "rounded-xl",
                          "border-slate-200 dark:border-slate-700",
                        ),
                      valueContainer: () => "flex-1",
                      placeholder: () => "text-slate-600 dark:text-slate-300",
                      singleValue: () => "text-slate-900 dark:text-white",
                      input: () => "text-slate-900 dark:text-white",
                      indicatorsContainer: () => "shrink-0 gap-1",
                      dropdownIndicator: () => "cursor-pointer px-1 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300",
                      clearIndicator: () => "cursor-pointer text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300",
                      menu: () => "overflow-hidden rounded-b-xl border border-t-0 border-slate-200 bg-white shadow-lg dark:border-slate-700 dark:bg-slate-900",
                      menuList: () => "max-h-60 overflow-y-auto overflow-x-hidden py-1",
                      option: ({ isFocused, isSelected }) =>
                        cn(
                          "cursor-pointer px-3 py-2 text-sm",
                          isSelected
                            ? "bg-brand-500 text-white"
                            : isFocused
                              ? "bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-white"
                              : "text-slate-700 dark:text-slate-300",
                        ),
                      noOptionsMessage: () => "px-3 py-6 text-center text-sm text-slate-400 dark:text-slate-500",
                    }}
                  />
                </div>
              )}
            </div>

            {filtered.length === 0 ? (
              <div className="flex flex-col items-center gap-3 py-16 text-center">
                <Users className="h-10 w-10 text-slate-300 dark:text-slate-700" />
                <p className="text-sm text-slate-400">
                  {search ? t("agent.senders.noMatch") : t("agent.senders.noSenders")}
                </p>
                {!search && (
                  <Button size="md" onClick={openAdd}>
                    <UserPlus className="me-1 icon-md" />
                    {t("agent.senders.addSender")}
                  </Button>
                )}
              </div>
            ) : (
              <div className="mt-5 grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                {filtered.map((sender) => (
                  <SenderCard
                    key={sender.slug}
                    sender={sender}
                    onEdit={() => openEdit(sender.slug)}
                  />
                ))}
              </div>
            )}
          </CardContent>
        </Card>
      </Container>

      <SenderFormDrawer
        open={drawerOpen}
        editSlug={editSlug}
        onClose={closeDrawer}
      />
    </>
  );
}