import { useT } from "@agent-native/core/client/i18n";
import {
  DateRangePicker,
  dateRangeToInterval,
  type DateRange,
} from "@agent-native/toolkit/dashboard";
import { IconCheck, IconChevronDown, IconX } from "@tabler/icons-react";
import { useQuery } from "@tanstack/react-query";
import { useEffect, useId, useState } from "react";

import {
  callAppAction,
  type LocalTransactionalEmailCatalog,
} from "../client/transactional-emails";
import { resolveEmailPreviewAssets } from "../lib/transactional-email-preview";
import { ActionQueryError } from "./action-query-error";
import { Badge } from "./ui/badge";
import { Button } from "./ui/button";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "./ui/command";
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "./ui/dialog";
import { Input } from "./ui/input";
import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "./ui/select";
import { Skeleton } from "./ui/skeleton";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "./ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";

interface SendLogEntry {
  id: string;
  templateId: string | null;
  app: string | null;
  recipient: string;
  sender: string;
  subject: string;
  status: string;
  error: string | null;
  provider: string;
  responseStatus: number | null;
  createdAt: number;
}

interface SendLogEntryBody {
  htmlBody: string | null;
  textBody: string | null;
}

/** One page of `list-email-log`, fetched at `PAGE_SIZE + 1` to detect "has more". */
const PAGE_SIZE = 50;

function useDebounced(value: string, delayMs = 300): string {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delayMs);
    return () => clearTimeout(timer);
  }, [value, delayMs]);
  return debounced;
}

/**
 * Bodies are large (up to the 8,000-char logged cap) and sensitive, so
 * `list-email-log` never returns them — this fetches one row's body only
 * once its dialog is open, keeping list responses and the query cache small.
 */
function SendLogBody({ appPath, id }: { appPath: string; id: string }) {
  const t = useT();
  const query = useQuery({
    queryKey: ["get-email-log-body", appPath, id],
    queryFn: () =>
      callAppAction<SendLogEntryBody>(
        appPath,
        "get-email-log-body",
        { id },
        "GET",
      ),
  });

  if (query.isError) {
    return (
      <ActionQueryError
        error={query.error}
        onRetry={() => void query.refetch()}
      />
    );
  }
  if (query.isLoading) {
    return <Skeleton className="h-96 w-full" />;
  }
  const { htmlBody, textBody } = query.data ?? {
    htmlBody: null,
    textBody: null,
  };
  if (!htmlBody && !textBody) return null;

  return (
    <Tabs defaultValue={htmlBody ? "html" : "text"}>
      <TabsList>
        {htmlBody ? (
          <TabsTrigger value="html">
            {t("dispatch.transactionalEmail.sendLogBodyHtml")}
          </TabsTrigger>
        ) : null}
        {textBody ? (
          <TabsTrigger value="text">
            {t("dispatch.transactionalEmail.sendLogBodyText")}
          </TabsTrigger>
        ) : null}
      </TabsList>
      {htmlBody ? (
        <TabsContent value="html">
          {/* sandbox="" (no allow-scripts) keeps the logged HTML from
              running script in the Dispatch origin. */}
          <iframe
            title={t("dispatch.transactionalEmail.sendLogBodyFrameTitle")}
            sandbox=""
            srcDoc={resolveEmailPreviewAssets(htmlBody)}
            // guard:allow-raw-color — the frame previews sent email HTML, which renders on white in mail clients regardless of app theme.
            className="h-96 w-full rounded-xl border bg-white"
          />
        </TabsContent>
      ) : null}
      {textBody ? (
        <TabsContent value="text">
          <pre className="h-96 w-full overflow-auto rounded-xl border p-3 text-xs whitespace-pre-wrap">
            {textBody}
          </pre>
        </TabsContent>
      ) : null}
    </Tabs>
  );
}

function AddressFilterControl({
  dimension,
  contains,
  exclude,
  onContainsChange,
  onExcludeChange,
}: {
  dimension: "to" | "from";
  contains: string;
  exclude: string;
  onContainsChange: (value: string) => void;
  onExcludeChange: (value: string) => void;
}) {
  const t = useT();
  const containsId = useId();
  const excludeId = useId();
  const dimensionLabel = t(
    dimension === "to"
      ? "dispatch.transactionalEmail.sendLogTo"
      : "dispatch.transactionalEmail.sendLogFrom",
  );
  const filters = [
    {
      operator: t("dispatch.transactionalEmail.sendLogContainsOperator"),
      value: contains,
      clear: () => onContainsChange(""),
    },
    {
      operator: t("dispatch.transactionalEmail.sendLogExcludeOperator"),
      value: exclude,
      clear: () => onExcludeChange(""),
    },
  ].filter((filter) => filter.value);

  return (
    <Popover>
      <div className="flex min-h-10 max-w-full flex-wrap items-center gap-1 rounded-md border border-input bg-background p-1">
        <PopoverTrigger asChild>
          <Button
            type="button"
            variant="ghost"
            size="sm"
            className="h-8 shrink-0 gap-1 px-2"
            aria-label={dimensionLabel}
          >
            {dimensionLabel}
            <IconChevronDown aria-hidden="true" className="size-3.5" />
          </Button>
        </PopoverTrigger>
        {filters.map((filter) => {
          const label = `${filter.operator} ${filter.value}`;
          return (
            <Badge
              key={filter.operator}
              variant="secondary"
              className="min-w-0 max-w-full gap-1 pe-1 font-normal"
            >
              <span className="max-w-44 truncate">{label}</span>
              <button
                type="button"
                className="inline-flex size-5 shrink-0 items-center justify-center rounded-full text-muted-foreground hover:bg-background hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                aria-label={t(
                  "dispatch.transactionalEmail.sendLogRemoveAddressFilter",
                  { filter: label },
                )}
                onClick={filter.clear}
              >
                <IconX aria-hidden="true" className="size-3" />
              </button>
            </Badge>
          );
        })}
      </div>
      <PopoverContent
        align="start"
        className="w-72 max-w-[calc(100vw-2rem)] p-3"
      >
        <div className="grid gap-3">
          <label
            className="grid gap-1.5 text-xs font-medium"
            htmlFor={containsId}
          >
            {t("dispatch.transactionalEmail.sendLogContainsOperator")}
            <Input
              id={containsId}
              value={contains}
              placeholder={t(
                "dispatch.transactionalEmail.sendLogContainsPlaceholder",
              )}
              onChange={(event) => onContainsChange(event.target.value)}
              aria-label={t(
                "dispatch.transactionalEmail.sendLogAddressFilterLabel",
                {
                  dimension: dimensionLabel,
                  operator: t(
                    "dispatch.transactionalEmail.sendLogContainsOperator",
                  ),
                },
              )}
            />
          </label>
          <label
            className="grid gap-1.5 text-xs font-medium"
            htmlFor={excludeId}
          >
            {t("dispatch.transactionalEmail.sendLogExcludeOperator")}
            <Input
              id={excludeId}
              value={exclude}
              placeholder={t(
                "dispatch.transactionalEmail.sendLogExcludePlaceholder",
              )}
              onChange={(event) => onExcludeChange(event.target.value)}
              aria-label={t(
                "dispatch.transactionalEmail.sendLogAddressFilterLabel",
                {
                  dimension: dimensionLabel,
                  operator: t(
                    "dispatch.transactionalEmail.sendLogExcludeOperator",
                  ),
                },
              )}
            />
          </label>
        </div>
      </PopoverContent>
    </Popover>
  );
}

function SendLogDetailDialog({
  entry,
  appPath,
  open,
  onOpenChange,
}: {
  entry: SendLogEntry | null;
  appPath: string;
  open: boolean;
  onOpenChange: (next: boolean) => void;
}) {
  const t = useT();
  if (!entry) return null;

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl">
        <DialogHeader>
          <DialogTitle>{entry.subject}</DialogTitle>
        </DialogHeader>
        <div className="grid grid-cols-2 gap-x-6 gap-y-1 text-xs">
          <div className="text-muted-foreground">
            {t("dispatch.transactionalEmail.recipient")}
          </div>
          <div className="font-mono">{entry.recipient}</div>
          <div className="text-muted-foreground">
            {t("dispatch.transactionalEmail.sender")}
          </div>
          <div className="font-mono">{entry.sender}</div>
          <div className="text-muted-foreground">
            {t("dispatch.transactionalEmail.sendLogTemplate")}
          </div>
          <div className="font-mono">{entry.templateId ?? "—"}</div>
          <div className="text-muted-foreground">
            {t("dispatch.transactionalEmail.sendLogProvider")}
          </div>
          <div>{entry.provider}</div>
          <div className="text-muted-foreground">
            {t("dispatch.transactionalEmail.sendLogResponseStatus")}
          </div>
          <div>{entry.responseStatus ?? "—"}</div>
          {entry.error ? (
            <>
              <div className="text-muted-foreground">
                {t("dispatch.transactionalEmail.sendLogError")}
              </div>
              <div className="text-destructive">{entry.error}</div>
            </>
          ) : null}
        </div>
        <SendLogBody appPath={appPath} id={entry.id} />
      </DialogContent>
    </Dialog>
  );
}

export function SendLogSection({
  apps,
}: {
  apps: { id: string; name: string; path: string }[];
}) {
  const t = useT();
  const [appId, setAppId] = useState<string | undefined>(apps[0]?.id);
  const [dateRange, setDateRange] = useState<DateRange>("7d");
  const [templateId, setTemplateId] = useState("all");
  const [templatePopoverOpen, setTemplatePopoverOpen] = useState(false);
  const [to, setTo] = useState("");
  const [excludeTo, setExcludeTo] = useState("");
  const [from, setFrom] = useState("");
  const [excludeFrom, setExcludeFrom] = useState("");
  const [status, setStatus] = useState<string>("all");
  const [provider, setProvider] = useState<string>("all");
  const [offset, setOffset] = useState(0);
  const [selected, setSelected] = useState<SendLogEntry | null>(null);

  const debouncedTo = useDebounced(to);
  const debouncedExcludeTo = useDebounced(excludeTo);
  const debouncedFrom = useDebounced(from);
  const debouncedExcludeFrom = useDebounced(excludeFrom);
  const selectedApp = apps.find((app) => app.id === appId) ?? apps[0];

  useEffect(() => {
    setTemplateId("all");
  }, [selectedApp?.path]);

  useEffect(() => {
    setOffset(0);
  }, [
    appId,
    dateRange,
    templateId,
    debouncedTo,
    debouncedExcludeTo,
    debouncedFrom,
    debouncedExcludeFrom,
    status,
    provider,
  ]);

  const catalogQuery = useQuery({
    queryKey: ["send-log-email-catalog", selectedApp?.path],
    queryFn: () =>
      callAppAction<LocalTransactionalEmailCatalog>(
        selectedApp!.path,
        "list-transactional-emails",
        { windowDays: 30 },
        "GET",
      ),
    enabled: Boolean(selectedApp),
    staleTime: Infinity,
  });

  const templates = [...(catalogQuery.data?.emails ?? [])].sort(
    (a, b) => a.name.localeCompare(b.name) || a.id.localeCompare(b.id),
  );
  const selectedTemplate = templates.find((email) => email.id === templateId);

  const query = useQuery({
    queryKey: [
      "list-email-log",
      selectedApp?.path,
      dateRange,
      templateId,
      debouncedTo,
      debouncedExcludeTo,
      debouncedFrom,
      debouncedExcludeFrom,
      status,
      provider,
      offset,
    ],
    queryFn: () =>
      callAppAction<{ entries: SendLogEntry[] }>(
        selectedApp!.path,
        "list-email-log",
        {
          sinceMs: Date.now() - dateRangeToInterval(dateRange) * 86_400_000,
          ...(templateId !== "all" ? { templateId } : {}),
          ...(debouncedTo ? { to: debouncedTo } : {}),
          ...(debouncedExcludeTo ? { excludeTo: debouncedExcludeTo } : {}),
          ...(debouncedFrom ? { from: debouncedFrom } : {}),
          ...(debouncedExcludeFrom
            ? { excludeFrom: debouncedExcludeFrom }
            : {}),
          ...(status !== "all" ? { status } : {}),
          ...(provider !== "all" ? { provider } : {}),
          limit: PAGE_SIZE + 1,
          offset,
        },
        "GET",
      ),
    enabled: Boolean(selectedApp),
  });

  const entries = (query.data?.entries ?? []).slice(0, PAGE_SIZE);
  const hasMore = (query.data?.entries.length ?? 0) > PAGE_SIZE;

  if (apps.length === 0) return null;

  return (
    <div>
      <div className="mb-4 flex flex-wrap items-center gap-2">
        <Select value={selectedApp?.id} onValueChange={setAppId}>
          <SelectTrigger className="w-48">
            <SelectValue placeholder={t("dispatch.transactionalEmail.app")} />
          </SelectTrigger>
          <SelectContent>
            {apps.map((app) => (
              <SelectItem key={app.id} value={app.id}>
                {app.name}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <DateRangePicker value={dateRange} onChange={setDateRange} />
        <Popover
          open={templatePopoverOpen}
          onOpenChange={setTemplatePopoverOpen}
        >
          <PopoverTrigger asChild>
            <Button
              type="button"
              variant="outline"
              role="combobox"
              aria-expanded={templatePopoverOpen}
              aria-label={t("dispatch.transactionalEmail.sendLogTemplate")}
              className="w-64 justify-between"
            >
              <span className="truncate">
                {selectedTemplate
                  ? `${selectedTemplate.name} · ${selectedTemplate.id}`
                  : t("dispatch.transactionalEmail.sendLogAllTemplates")}
              </span>
            </Button>
          </PopoverTrigger>
          <PopoverContent align="start" className="w-80 p-0">
            <Command>
              <CommandInput
                placeholder={t(
                  "dispatch.transactionalEmail.sendLogSearchTemplates",
                )}
              />
              <CommandList>
                <CommandEmpty>
                  {t("dispatch.transactionalEmail.sendLogNoTemplatesFound")}
                </CommandEmpty>
                <CommandGroup forceMount>
                  <CommandItem
                    forceMount
                    value="all"
                    onSelect={() => {
                      setTemplateId("all");
                      setTemplatePopoverOpen(false);
                    }}
                  >
                    <IconCheck
                      aria-hidden="true"
                      className={
                        templateId === "all"
                          ? "me-2 size-4"
                          : "me-2 size-4 opacity-0"
                      }
                    />
                    {t("dispatch.transactionalEmail.sendLogAllTemplates")}
                  </CommandItem>
                </CommandGroup>
                <CommandGroup>
                  {templates.map((email) => (
                    <CommandItem
                      key={email.id}
                      value={email.id}
                      keywords={[email.name]}
                      onSelect={() => {
                        setTemplateId(email.id);
                        setTemplatePopoverOpen(false);
                      }}
                    >
                      <IconCheck
                        aria-hidden="true"
                        className={
                          templateId === email.id
                            ? "me-2 size-4"
                            : "me-2 size-4 opacity-0"
                        }
                      />
                      <span className="truncate">
                        {email.name} · {email.id}
                      </span>
                    </CommandItem>
                  ))}
                </CommandGroup>
              </CommandList>
            </Command>
          </PopoverContent>
        </Popover>
        <AddressFilterControl
          dimension="to"
          contains={to}
          exclude={excludeTo}
          onContainsChange={setTo}
          onExcludeChange={setExcludeTo}
        />
        <AddressFilterControl
          dimension="from"
          contains={from}
          exclude={excludeFrom}
          onContainsChange={setFrom}
          onExcludeChange={setExcludeFrom}
        />
        <Select value={status} onValueChange={setStatus}>
          <SelectTrigger className="w-32">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">
              {t("dispatch.transactionalEmail.sendLogAllStatuses")}
            </SelectItem>
            <SelectItem value="sent">
              {t("dispatch.transactionalEmail.sendLogSent")}
            </SelectItem>
            <SelectItem value="failed">
              {t("dispatch.transactionalEmail.sendLogFailed")}
            </SelectItem>
          </SelectContent>
        </Select>
        <Select value={provider} onValueChange={setProvider}>
          <SelectTrigger className="w-36">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">
              {t("dispatch.transactionalEmail.sendLogAllProviders")}
            </SelectItem>
            <SelectItem value="resend">Resend</SelectItem>
            <SelectItem value="sendgrid">SendGrid</SelectItem>
            <SelectItem value="dev">Dev</SelectItem>
          </SelectContent>
        </Select>
        {(templateId !== "all" ||
          to ||
          excludeTo ||
          from ||
          excludeFrom ||
          status !== "all" ||
          provider !== "all") && (
          <Button
            variant="ghost"
            size="sm"
            onClick={() => {
              setTemplateId("all");
              setTo("");
              setExcludeTo("");
              setFrom("");
              setExcludeFrom("");
              setStatus("all");
              setProvider("all");
            }}
          >
            {t("dispatch.transactionalEmail.sendLogClearFilters")}
          </Button>
        )}
      </div>

      {query.isError ? (
        <ActionQueryError
          error={query.error}
          onRetry={() => void query.refetch()}
        />
      ) : query.isLoading ? (
        <Skeleton className="h-40 w-full" />
      ) : entries.length === 0 ? (
        <div className="rounded-xl border border-dashed px-4 py-8 text-center text-sm text-muted-foreground">
          {t("dispatch.transactionalEmail.sendLogEmpty")}
        </div>
      ) : (
        <>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>
                  {t("dispatch.transactionalEmail.sendLogTimestamp")}
                </TableHead>
                <TableHead>
                  {t("dispatch.transactionalEmail.recipient")}
                </TableHead>
                <TableHead>{t("dispatch.transactionalEmail.sender")}</TableHead>
                <TableHead>
                  {t("dispatch.transactionalEmail.sendLogTemplate")}
                </TableHead>
                <TableHead>{t("dispatch.transactionalEmail.status")}</TableHead>
                <TableHead>
                  {t("dispatch.transactionalEmail.sendLogProvider")}
                </TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {entries.map((entry) => (
                <TableRow
                  key={entry.id}
                  className="cursor-pointer"
                  onClick={() => setSelected(entry)}
                >
                  <TableCell className="text-xs text-muted-foreground">
                    {new Date(entry.createdAt).toLocaleString()}
                  </TableCell>
                  <TableCell className="text-xs">{entry.recipient}</TableCell>
                  <TableCell className="text-xs">{entry.sender}</TableCell>
                  <TableCell className="font-mono text-xs">
                    {entry.templateId ?? "—"}
                  </TableCell>
                  <TableCell>
                    <Badge
                      variant={
                        entry.status === "failed" ? "destructive" : "secondary"
                      }
                    >
                      {entry.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-xs">{entry.provider}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          <div className="mt-3 flex justify-end gap-2">
            <Button
              variant="outline"
              size="sm"
              disabled={offset === 0}
              onClick={() =>
                setOffset((current) => Math.max(0, current - PAGE_SIZE))
              }
            >
              {t("dispatch.transactionalEmail.sendLogPrevious")}
            </Button>
            <Button
              variant="outline"
              size="sm"
              disabled={!hasMore}
              onClick={() => setOffset((current) => current + PAGE_SIZE)}
            >
              {t("dispatch.transactionalEmail.sendLogNext")}
            </Button>
          </div>
        </>
      )}

      <SendLogDetailDialog
        entry={selected}
        appPath={selectedApp?.path ?? ""}
        open={selected !== null}
        onOpenChange={(next) => {
          if (!next) setSelected(null);
        }}
      />
    </div>
  );
}