/* screens-10.jsx — Export functionality (YOUN-86) */
/* Используется в: screens-2.jsx (Results), screens-7.jsx (Comments), screens-8.jsx (Transcripts) */

const API_URL_EXPORT =
  "https://younalyse-api-646149995822.europe-west1.run.app";

// ── Хелпер: скачать blob ───────────────────────────────────────────────────

async function downloadExport(url, body, filename, contentType) {
  const resp = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body),
  });
  if (!resp.ok) {
    const err = await resp.json().catch(() => ({}));
    throw new Error(err.detail || `Export failed: ${resp.status}`);
  }
  const blob = await resp.blob();
  const objectUrl = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = objectUrl;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(objectUrl);
}

// ── ExportMenu для Results ─────────────────────────────────────────────────
// Встраивается в action bar при выбранных видео

const ResultsExportMenu = ({
  selectedIds,
  userId,
  userProfile,
  columns,
  onToast,
  label,
}) => {
  const [open, setOpen] = React.useState(false);
  const [loading, setLoading] = React.useState(null); // имя формата
  const menuRef = React.useRef(null);

  const productMode =
    window.PRODUCT_MODE || localStorage.getItem("youna_product_mode") || "ru";

  // Закрываем при клике вне
  React.useEffect(() => {
    const handleClick = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target))
        setOpen(false);
    };
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, []);

  const ids = [...selectedIds];
  const MAX_EXPORT = 20;
  const exportIds = ids.slice(0, MAX_EXPORT);
  const truncated = ids.length > MAX_EXPORT;

  // Видимые колонки из localStorage
  const visibleColumns = React.useMemo(() => {
    try {
      const saved = localStorage.getItem("youna_columns_v1");
      if (saved) {
        const parsed = JSON.parse(saved);
        return Object.entries(parsed)
          .filter(([, v]) => v)
          .map(([k]) => k);
      }
    } catch {}
    return null;
  }, []);

  const baseBody = {
    user_id: userId,
    video_ids: exportIds,
    product_mode: productMode,
    columns: visibleColumns,
  };

  const formats = [
    {
      id: "xlsx",
      label: "Excel (.xlsx)",
      icon: "📊",
      endpoint: "/api/export/xlsx",
      ext: "xlsx",
    },
    {
      id: "csv",
      label: "CSV (.csv)",
      icon: "📋",
      endpoint: "/api/export/csv",
      ext: "csv",
    },
    {
      id: "pdf",
      label: "PDF Report",
      icon: "📄",
      endpoint: "/api/export/pdf",
      ext: "pdf",
    },
    {
      id: "docx",
      label: "Word (.docx)",
      icon: "📝",
      endpoint: "/api/export/docx",
      ext: "docx",
    },
  ];

  const handleExport = async (fmt) => {
    setLoading(fmt.id);
    setOpen(false);
    try {
      if (truncated) {
        onToast?.(
          `Экспортируем первые ${MAX_EXPORT} из ${ids.length} видео`,
          "info",
        );
      }
      const date = new Date().toISOString().slice(0, 10).replace(/-/g, "");
      await downloadExport(
        `${API_URL_EXPORT}${fmt.endpoint}`,
        baseBody,
        `youna-results-${date}.${fmt.ext}`,
        fmt.contentType,
      );
      onToast?.("Экспорт готов!", "ok");
    } catch (e) {
      onToast?.(
        e.message || window.T?.exportError || "Ошибка экспорта",
        "error",
      );
    } finally {
      setLoading(null);
    }
  };

  return (
    <div ref={menuRef} style={{ position: "relative" }}>
      <button
        className="btn primary sm"
        onClick={() => setOpen((v) => !v)}
        disabled={!!loading}
      >
        {loading ? (
          <>
            <Icon name="spinner" size={13} />{" "}
            {window.T?.exportLoading || "Экспортируем…"}
          </>
        ) : (
          <>
            <Icon name="download" size={13} /> {label || "Export"} (
            {exportIds.length})
          </>
        )}
      </button>

      {open && (
        <div
          style={{
            position: "absolute",
            top: "calc(100% + 6px)",
            right: 0,
            background: "var(--bg)",
            border: "1px solid var(--border-strong)",
            borderRadius: "var(--radius-lg)",
            boxShadow: "var(--shadow-lg)",
            zIndex: 100,
            minWidth: 200,
            overflow: "hidden",
          }}
        >
          {truncated && (
            <div
              style={{
                padding: "8px 14px",
                fontSize: 11,
                color: "var(--warn)",
                borderBottom: "1px solid var(--border)",
                background: "rgba(217,119,6,0.06)",
              }}
            >
              ⚠️ Выбрано {ids.length} — экспортируем первые {MAX_EXPORT}
            </div>
          )}
          {formats.map((fmt) => (
            <button
              key={fmt.id}
              onClick={() => handleExport(fmt)}
              style={{
                display: "flex",
                alignItems: "center",
                gap: 10,
                width: "100%",
                padding: "10px 14px",
                border: "none",
                background: "transparent",
                cursor: "pointer",
                fontSize: 13,
                color: "var(--fg)",
                textAlign: "left",
              }}
              onMouseEnter={(e) =>
                (e.currentTarget.style.background = "var(--bg-hover)")
              }
              onMouseLeave={(e) =>
                (e.currentTarget.style.background = "transparent")
              }
            >
              <span style={{ fontSize: 16 }}>{fmt.icon}</span>
              <span>{fmt.label}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

// ── ExportMenu для Comments ────────────────────────────────────────────────

const CommentsExportMenu = ({ userId, videoIds, onToast }) => {
  const [open, setOpen] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [favoritesOnly, setFavoritesOnly] = React.useState(false);
  const menuRef = React.useRef(null);
  const productMode =
    window.PRODUCT_MODE || localStorage.getItem("youna_product_mode") || "ru";

  React.useEffect(() => {
    const handleClick = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target))
        setOpen(false);
    };
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, []);

  const handleExport = async () => {
    setLoading(true);
    setOpen(false);
    try {
      const date = new Date().toISOString().slice(0, 10).replace(/-/g, "");
      await downloadExport(
        `${API_URL_EXPORT}/api/export/markdown/comments`,
        {
          user_id: userId,
          video_ids: videoIds || null,
          product_mode: productMode,
          favorites_only: favoritesOnly,
        },
        `youna-comments-${date}.md`,
      );
      onToast?.(window.T?.exportDone || "Markdown готов!", "ok");
    } catch (e) {
      onToast?.(
        e.message || window.T?.exportError || "Ошибка экспорта",
        "error",
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <div ref={menuRef} style={{ position: "relative" }}>
      <button
        className="btn sm"
        onClick={() => setOpen((v) => !v)}
        disabled={loading}
      >
        {loading ? (
          <>
            <Icon name="spinner" size={13} />{" "}
            {window.T?.exportLoading || "Экспортируем…"}
          </>
        ) : (
          <>
            <Icon name="download" size={13} /> {window.T?.exportBtn || "Export"}
          </>
        )}
      </button>

      {open && (
        <div
          style={{
            position: "absolute",
            top: "calc(100% + 6px)",
            right: 0,
            background: "var(--bg)",
            border: "1px solid var(--border-strong)",
            borderRadius: "var(--radius-lg)",
            boxShadow: "var(--shadow-lg)",
            zIndex: 100,
            minWidth: 220,
            padding: "10px 14px",
          }}
        >
          <div
            style={{ fontSize: 11, color: "var(--fg-faint)", marginBottom: 8 }}
          >
            {window.T?.exportMarkdownHint || "Markdown (.md) — для AI анализа"}
          </div>
          <label
            style={{
              display: "flex",
              alignItems: "center",
              gap: 8,
              fontSize: 13,
              cursor: "pointer",
              marginBottom: 12,
            }}
          >
            <input
              type="checkbox"
              checked={favoritesOnly}
              onChange={(e) => setFavoritesOnly(e.target.checked)}
            />
            {window.T?.exportFavoritesComments ||
              "Только избранные комментарии"}
          </label>
          <button
            className="btn primary sm"
            style={{ width: "100%" }}
            onClick={handleExport}
          >
            📋 {window.T?.exportDownload || "Скачать Markdown"}
          </button>
        </div>
      )}
    </div>
  );
};

// ── ExportMenu для Transcripts ─────────────────────────────────────────────

const TranscriptsExportMenu = ({ userId, videoIds, onToast }) => {
  const [open, setOpen] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [favoritesOnly, setFavoritesOnly] = React.useState(false);
  const menuRef = React.useRef(null);
  const productMode =
    window.PRODUCT_MODE || localStorage.getItem("youna_product_mode") || "ru";

  React.useEffect(() => {
    const handleClick = (e) => {
      if (menuRef.current && !menuRef.current.contains(e.target))
        setOpen(false);
    };
    document.addEventListener("mousedown", handleClick);
    return () => document.removeEventListener("mousedown", handleClick);
  }, []);

  const handleExport = async () => {
    setLoading(true);
    setOpen(false);
    try {
      const date = new Date().toISOString().slice(0, 10).replace(/-/g, "");
      await downloadExport(
        `${API_URL_EXPORT}/api/export/markdown/transcripts`,
        {
          user_id: userId,
          video_ids: videoIds || null,
          product_mode: productMode,
          favorites_only: favoritesOnly,
        },
        `youna-transcripts-${date}.md`,
      );
      onToast?.(window.T?.exportDone || "Markdown готов!", "ok");
    } catch (e) {
      onToast?.(
        e.message || window.T?.exportError || "Ошибка экспорта",
        "error",
      );
    } finally {
      setLoading(false);
    }
  };

  return (
    <div ref={menuRef} style={{ position: "relative" }}>
      <button
        className="btn sm"
        onClick={() => setOpen((v) => !v)}
        disabled={loading}
      >
        {loading ? (
          <>
            <Icon name="spinner" size={13} />{" "}
            {window.T?.exportLoading || "Экспортируем…"}
          </>
        ) : (
          <>
            <Icon name="download" size={13} /> {window.T?.exportBtn || "Export"}
          </>
        )}
      </button>

      {open && (
        <div
          style={{
            position: "absolute",
            top: "calc(100% + 6px)",
            right: 0,
            background: "var(--bg)",
            border: "1px solid var(--border-strong)",
            borderRadius: "var(--radius-lg)",
            boxShadow: "var(--shadow-lg)",
            zIndex: 100,
            minWidth: 220,
            padding: "10px 14px",
          }}
        >
          <div
            style={{ fontSize: 11, color: "var(--fg-faint)", marginBottom: 8 }}
          >
            {window.T?.exportMarkdownHint || "Markdown (.md) — для AI анализа"}
          </div>
          <label
            style={{
              display: "flex",
              alignItems: "center",
              gap: 8,
              fontSize: 13,
              cursor: "pointer",
              marginBottom: 12,
            }}
          >
            <input
              type="checkbox"
              checked={favoritesOnly}
              onChange={(e) => setFavoritesOnly(e.target.checked)}
            />
            {window.T?.exportFavoritesTranscripts ||
              "Только избранные транскрипты"}
          </label>
          <button
            className="btn primary sm"
            style={{ width: "100%" }}
            onClick={handleExport}
          >
            📝 {window.T?.exportDownload || "Скачать Markdown"}
          </button>
        </div>
      )}
    </div>
  );
};

Object.assign(window, {
  ResultsExportMenu,
  CommentsExportMenu,
  TranscriptsExportMenu,
});