import { useEffect, useState } from "react";
import { Button, Card, Checkbox, Tooltip } from "@agentscope-ai/design";
import { SyncOutlined } from "@ant-design/icons";
import { useTranslation } from "react-i18next";
import dayjs from "dayjs";
import type { PoolSkillSpec } from "../../../../api/types";
import {
  getPoolBuiltinStatusLabel,
  getPoolBuiltinStatusTone,
  isSkillBuiltin,
} from "@/utils/skill";
import { SkillVisual } from "@/components/SkillVisual";
import styles from "../index.module.less";

interface PoolSkillCardProps {
  skill: PoolSkillSpec;
  isSelected: boolean;
  batchModeEnabled: boolean;
  onToggleSelect: (name: string) => void;
  onEdit: (skill: PoolSkillSpec) => void;
  onBroadcast: (skill: PoolSkillSpec) => void;
  onDelete: (skill: PoolSkillSpec) => void;
  onToggleAutoUpdate: (
    skill: PoolSkillSpec,
    enabled: boolean,
    targets?: string[] | null,
  ) => void | Promise<void>;
}

export function PoolSkillCard({
  skill,
  isSelected,
  batchModeEnabled,
  onToggleSelect,
  onEdit,
  onBroadcast,
  onDelete,
  onToggleAutoUpdate,
}: PoolSkillCardProps) {
  const { t } = useTranslation();
  const [isHover, setIsHover] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  const syncTone = getPoolBuiltinStatusTone(skill.sync_status);
  const isBuiltin = isSkillBuiltin(skill.source);

  useEffect(() => {
    const mql = window.matchMedia("(max-width: 768px)");
    const handleChange = (event: MediaQueryListEvent | MediaQueryList) => {
      setIsMobile(event.matches);
    };
    handleChange(mql);
    mql.addEventListener("change", handleChange);
    return () => {
      mql.removeEventListener("change", handleChange);
    };
  }, []);

  return (
    <Card
      hoverable
      className={`${styles.skillCard} ${isSelected ? styles.selectedCard : ""}`}
      onMouseEnter={() => setIsHover(true)}
      onMouseLeave={() => setIsHover(false)}
      onClick={() => {
        if (batchModeEnabled) {
          onToggleSelect(skill.name);
        } else {
          onEdit(skill);
        }
      }}
      style={{ cursor: "pointer" }}
    >
      {/* Top row: Icon (left) + Status badge + Checkbox (right) */}
      <div className={styles.cardTopRow}>
        <span className={styles.fileIcon}>
          <SkillVisual
            name={skill.name}
            emoji={skill.emoji}
            emojiClassName={styles.skillEmoji}
          />
        </span>
        <div className={styles.cardTopRight}>
          <span
            className={`${styles.statusBadge} ${styles[`status_${syncTone}`]}`}
          >
            <span className={styles.statusDot} />
            {getPoolBuiltinStatusLabel(skill.sync_status, t)}
          </span>
          {batchModeEnabled && (
            <Checkbox
              checked={isSelected}
              onClick={(e) => {
                e.stopPropagation();
                onToggleSelect(skill.name);
              }}
            />
          )}
        </div>
      </div>

      {/* Title + Built-in/Custom tag */}
      <div className={styles.titleRow}>
        <Tooltip title={skill.name}>
          <h3 className={styles.skillTitle}>
            {skill.name}{" "}
            {isBuiltin ? (
              <span className={styles.builtinTag}>
                {t("skillPool.builtin")}
              </span>
            ) : (
              <span className={styles.customTag}>{t("skillPool.custom")}</span>
            )}
            {skill.auto_update && (
              <Tooltip title={t("skillPool.autoUpdateOnHint")}>
                <span className={styles.autoUpdateTag}>
                  {t("skillPool.autoUpdate")}
                </span>
              </Tooltip>
            )}
          </h3>
        </Tooltip>
      </div>

      {/* Updated row */}
      {skill.last_updated && (
        <div className={styles.metaInfoRow}>
          <span className={styles.metaInfoLabel}>
            {t("skills.lastUpdated")}
          </span>
          <span className={styles.metaInfoValue}>
            {dayjs(skill.last_updated).fromNow()}
          </span>
        </div>
      )}

      {/* Tags row */}
      <div className={styles.metaInfoRow}>
        <span className={styles.metaInfoLabel}>{t("skills.tags")}</span>
        {skill.tags?.length ? (
          <div className={styles.tagChips}>
            {skill.tags.map((tag) => (
              <span key={tag} className={styles.tagChip}>
                {tag}
              </span>
            ))}
          </div>
        ) : (
          "-"
        )}
      </div>

      {/* Description */}
      <div className={styles.descriptionSection}>
        <p className={styles.descriptionText}>{skill.description || "-"}</p>
      </div>

      {/* Footer - show on hover, batch mode, or mobile (no hover) */}
      {(isHover || batchModeEnabled || isMobile) && (
        <div className={styles.cardFooter}>
          <Tooltip
            title={
              skill.auto_update
                ? t("skillPool.autoUpdateDisableHint")
                : t("skillPool.autoUpdateEnableHint")
            }
          >
            <Button
              className={styles.autoUpdateButton}
              type={skill.auto_update ? "primary" : "default"}
              icon={<SyncOutlined />}
              disabled={batchModeEnabled}
              onClick={(e) => {
                e.stopPropagation();
                void onToggleAutoUpdate(skill, !skill.auto_update, null);
              }}
            />
          </Tooltip>
          <Button
            className={styles.actionButton}
            disabled={batchModeEnabled}
            onClick={(e) => {
              e.stopPropagation();
              onBroadcast(skill);
            }}
          >
            {t("skillPool.broadcast")}
          </Button>
          <Button
            danger
            className={styles.deleteButton}
            disabled={batchModeEnabled}
            onClick={(e) => {
              e.stopPropagation();
              void onDelete(skill);
            }}
          >
            {t("skillPool.delete")}
          </Button>
        </div>
      )}
    </Card>
  );
}
