import {
  IconBrandSlack,
  IconBrandTelegram,
  IconBrandWhatsapp,
  IconMessageCircle,
  IconChevronDown,
  IconChevronRight,
  IconCopy,
  IconCheck,
  IconInfoCircle,
} from "@tabler/icons-react";
import React, { useState, useCallback } from "react";

import { agentNativePath } from "../api-path.js";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "../components/ui/tooltip.js";
import { useT } from "../i18n.js";
import type { IntegrationStatus } from "./useIntegrationStatus.js";
import { isNonPublicWebhookUrl } from "./webhook-url.js";

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const platformIcons: Record<string, React.ComponentType<any>> = {
  slack: IconBrandSlack as React.ComponentType<any>,
  telegram: IconBrandTelegram as React.ComponentType<any>,
  whatsapp: IconBrandWhatsapp as React.ComponentType<any>,
};

function StatusDot({
  enabled,
  configured,
}: {
  enabled: boolean;
  configured: boolean;
}) {
  const color =
    enabled && configured
      ? "bg-green-500"
      : configured
        ? "bg-yellow-500"
        : "bg-muted-foreground/55";
  return <span className={`inline-block h-2 w-2 rounded-full ${color}`} />;
}

export function IntegrationCard({
  status,
  onRefresh,
}: {
  status: IntegrationStatus;
  onRefresh: () => void;
}) {
  const t = useT();
  const [expanded, setExpanded] = useState(false);
  const [toggling, setToggling] = useState(false);
  const [copied, setCopied] = useState(false);
  const [toggleError, setToggleError] = useState<string | null>(null);

  const Icon = platformIcons[status.platform] || IconMessageCircle;

  const handleToggle = useCallback(async () => {
    setToggling(true);
    setToggleError(null);
    try {
      const action = status.enabled ? "disable" : "enable";
      const res = await fetch(
        agentNativePath(
          `/_agent-native/integrations/${status.platform}/${action}`,
        ),
        { method: "POST" },
      );
      if (res.ok) {
        onRefresh();
        return;
      }
      const data = (await res.json().catch(() => null)) as {
        error?: string;
      } | null;
      setToggleError(
        data?.error ||
          res.statusText ||
          `Couldn't ${action} ${status.label} (HTTP ${res.status})`,
      );
    } catch (err) {
      setToggleError(
        err instanceof Error ? err.message : t("integrations.networkError"),
      );
    } finally {
      setToggling(false);
    }
  }, [status.platform, status.enabled, status.label, onRefresh]);

  const webhookUrlIsLocalOnly =
    !!status.webhookUrl && isNonPublicWebhookUrl(status.webhookUrl);

  const handleCopy = useCallback(async () => {
    if (!status.webhookUrl || webhookUrlIsLocalOnly) return;
    await navigator.clipboard.writeText(status.webhookUrl);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }, [status.webhookUrl, webhookUrlIsLocalOnly]);

  return (
    <div className="rounded-md border border-border bg-background">
      <button
        onClick={() => setExpanded(!expanded)}
        className="flex w-full items-center gap-2 px-2.5 py-2 text-start hover:bg-accent/50"
      >
        {expanded ? (
          <IconChevronDown
            size={12}
            className="text-muted-foreground shrink-0"
          />
        ) : (
          <IconChevronRight
            size={12}
            className="text-muted-foreground shrink-0 rtl:-scale-x-100"
          />
        )}
        <Icon size={16} className="text-muted-foreground shrink-0" />
        <span className="flex-1 text-xs font-medium text-foreground">
          {status.label}
        </span>
        <StatusDot enabled={status.enabled} configured={status.configured} />
      </button>

      {expanded && (
        <div className="border-t border-border px-2.5 py-2 space-y-2">
          {status.webhookUrl && (
            <div>
              <div className="text-[10px] font-medium text-muted-foreground mb-1">
                {t("integrations.webhookUrl")}
              </div>
              {webhookUrlIsLocalOnly ? (
                <div className="flex gap-1.5 rounded-md border border-border bg-muted/30 px-2.5 py-2 text-[10px] leading-relaxed text-muted-foreground">
                  <IconInfoCircle size={12} className="mt-px shrink-0" />
                  <span>
                    {t("integrations.webhookUrlLocalOnly", {
                      platform: status.label,
                      url: status.webhookUrl,
                    })}
                  </span>
                </div>
              ) : (
                <div className="flex items-center gap-1">
                  <code className="flex-1 truncate rounded bg-muted px-1.5 py-0.5 text-[10px] text-foreground">
                    {status.webhookUrl}
                  </code>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <button
                        onClick={handleCopy}
                        className="shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground hover:bg-accent/50"
                      >
                        {copied ? (
                          <IconCheck size={12} />
                        ) : (
                          <IconCopy size={12} />
                        )}
                      </button>
                    </TooltipTrigger>
                    <TooltipContent>
                      {t("integrations.copyWebhookUrl")}
                    </TooltipContent>
                  </Tooltip>
                </div>
              )}
            </div>
          )}

          {status.error && (
            <p className="text-[10px] text-destructive">{status.error}</p>
          )}

          {toggleError && (
            <p className="text-[10px] text-destructive">{toggleError}</p>
          )}

          {!status.configured && !status.error && (
            <p className="text-[10px] text-muted-foreground">
              {t("integrations.notConfigured")}
            </p>
          )}

          {status.configured && (
            <button
              onClick={handleToggle}
              disabled={toggling}
              className="w-full rounded-md border border-border px-2 py-1 text-[11px] font-medium text-foreground hover:bg-accent/50 disabled:opacity-50"
            >
              {toggling
                ? t("integrations.toggling")
                : status.enabled
                  ? t("integrations.disable")
                  : t("integrations.enable")}
            </button>
          )}
        </div>
      )}
    </div>
  );
}