import { useState, useRef, useEffect, useCallback } from "react";
import { useChannels } from "../hooks/useChannels";
import { useSocialSets } from "../hooks/useSocialSets";
import { usePosts } from "../hooks/usePosts";
import { wpApi } from "../api/wp-api";
import TimezoneSelector from "../components/TimezoneSelector";
import InlineShare from "../components/InlineShare";
import ChannelSelector from "../components/ChannelSelector";
import EmojiPicker from "../components/EmojiPicker";
import UrlPreview from "../components/UrlPreview";
import ImageEditor from "../components/ImageEditor";
import VideoThumbnailPicker from "../components/VideoThumbnailPicker";
import MediaRequirementsModal from "../components/MediaRequirementsModal";
import { toast } from "react-toastify";
import clsx from "clsx";

interface ComposeProps {
  scheduleForDate?: string | null;
  onScheduleDateConsumed?: () => void;
  onNavigate?: (tab: string) => void;
  embedded?: boolean;
  initialMode?: "write" | "blog";
}

export default function Compose({ scheduleForDate, onScheduleDateConsumed, onNavigate, embedded, initialMode }: ComposeProps = {}) {
  const { channels, isLoading } = useChannels();
  const { socialSets } = useSocialSets();
  const socialSetTimezone = socialSets[0]?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;
  const [selectedChannels, setSelectedChannels] = useState<Set<string>>(new Set());
  const [message, setMessage] = useState("");
  const [composeMode, setComposeMode] = useState<"write" | "blog">(initialMode || "write");

  // Default schedule: today's date, 30 minutes from now
  const defaultSchedule = (() => {
    const now = new Date(Date.now() + 30 * 60 * 1000);
    const date = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
    const time = `${String(now.getHours()).padStart(2, "0")}:${String(now.getMinutes()).padStart(2, "0")}`;
    return { date, time };
  })();

  // Pre-fill schedule if coming from Calendar, otherwise use default
  const [mode, setMode] = useState<"now" | "schedule">(scheduleForDate ? "schedule" : "now");
  const [scheduleDate, setScheduleDate] = useState(scheduleForDate || defaultSchedule.date);
  const [scheduleTime, setScheduleTime] = useState(defaultSchedule.time);

  // Consume the date so it doesn't persist on re-renders
  useState(() => { if (scheduleForDate) onScheduleDateConsumed?.(); });
  const [sending, setSending] = useState(false);
  const [aiGenerating, setAiGenerating] = useState(false);
  const [aiPrompt, setAiPrompt] = useState("");
  const [aiTone, setAiTone] = useState("Neutral");
  const [hashtagGenerating, setHashtagGenerating] = useState(false);
  const [aiOpen, setAiOpen] = useState(false);
  const [enableEvergreen, setEnableEvergreen] = useState(false);
  const [recycleInterval, setRecycleInterval] = useState(7);
  const [maxRecycles, setMaxRecycles] = useState(5);

  // Media attachments
  const [mediaItems, setMediaItems] = useState<{ id: string; url: string; thumbnailUrl?: string; type: string; uploading?: boolean }[]>([]);
  const [uploadingMedia, setUploadingMedia] = useState(false);

  // First comment (Facebook, Instagram, YouTube, LinkedIn)
  const [firstComment, setFirstComment] = useState("");
  const [firstCommentOpen, setFirstCommentOpen] = useState(false);

  // Thread replies (Twitter, Threads, Bluesky, Mastodon)
  const [threadReplies, setThreadReplies] = useState<string[]>([]);

  // Image editor / video thumbnail picker / requirements modal
  const [editingMediaId, setEditingMediaId] = useState<string | null>(null);
  const [pickingThumbnailId, setPickingThumbnailId] = useState<string | null>(null);
  const [showMediaReqs, setShowMediaReqs] = useState(false);

  // Platform-specific options
  const [fbPostType, setFbPostType] = useState<"Post" | "Reel" | "Story">("Post");
  const [igPostType, setIgPostType] = useState<"Post" | "Reel" | "Story">("Post");
  const [ytPostType, setYtPostType] = useState<"Video" | "Short">("Video");
  const [ytTitle, setYtTitle] = useState("");
  const [ytVisibility, setYtVisibility] = useState<"public" | "private" | "unlisted">("public");
  const [ytCategory, setYtCategory] = useState("22"); // 22 = People & Blogs (default)
  const [ttPrivacy, setTtPrivacy] = useState("PUBLIC_TO_EVERYONE");
  const [liDocTitle, setLiDocTitle] = useState("");
  const [mstdnSpoiler, setMstdnSpoiler] = useState("");
  const [mstdnSensitive, setMstdnSensitive] = useState(false);
  const [pinBoard, setPinBoard] = useState("");
  const [pinLink, setPinLink] = useState("");

  const textareaRef = useRef<HTMLTextAreaElement>(null);

  // Draft auto-save — save to localStorage, restore on mount
  const DRAFT_KEY = "viraly_compose_draft";
  const saveDraftTimeout = useRef<ReturnType<typeof setTimeout> | null>(null);

  const saveDraft = useCallback(() => {
    if (initialMode === "blog") return; // Don't save drafts in blog mode
    if (!message.trim() && firstComment.trim() === "") return;
    try {
      localStorage.setItem(DRAFT_KEY, JSON.stringify({
        message, firstComment, mode, scheduleDate, scheduleTime,
        selectedChannels: [...selectedChannels],
        savedAt: Date.now(),
      }));
    } catch { /* localStorage full or unavailable */ }
  }, [message, firstComment, mode, scheduleDate, scheduleTime, selectedChannels]);

  // Debounced save on content change
  useEffect(() => {
    if (saveDraftTimeout.current) clearTimeout(saveDraftTimeout.current);
    saveDraftTimeout.current = setTimeout(saveDraft, 2000);
    return () => { if (saveDraftTimeout.current) clearTimeout(saveDraftTimeout.current); };
  }, [saveDraft]);

  // Restore draft on mount (only in write mode, not blog mode, not when coming from calendar)
  const [draftRestored, setDraftRestored] = useState(false);
  const [hasDraft, setHasDraft] = useState(false);
  useEffect(() => {
    if (scheduleForDate || draftRestored || initialMode === "blog") return;
    try {
      const raw = localStorage.getItem(DRAFT_KEY);
      if (!raw) return;
      const draft = JSON.parse(raw);
      // Only restore if saved within last 24 hours
      if (Date.now() - draft.savedAt > 24 * 60 * 60 * 1000) {
        localStorage.removeItem(DRAFT_KEY);
        return;
      }
      if (draft.message) setMessage(draft.message);
      if (draft.firstComment) setFirstComment(draft.firstComment);
      if (draft.mode) setMode(draft.mode);
      if (draft.scheduleDate) setScheduleDate(draft.scheduleDate);
      if (draft.scheduleTime) setScheduleTime(draft.scheduleTime);
      if (Array.isArray(draft.selectedChannels) && draft.selectedChannels.length > 0) {
        setSelectedChannels(new Set(draft.selectedChannels));
      }
      setHasDraft(true);
      toast.info("Draft restored", { autoClose: 2000 });
    } catch { /* ignore corrupt data */ }
    setDraftRestored(true);
  }, []);

  const discardDraft = () => {
    setMessage("");
    setFirstComment("");
    setThreadReplies([]);
    setMediaItems([]);
    setSelectedChannels(new Set());
    setHasDraft(false);
    clearDraft();
    toast.info("Draft discarded", { autoClose: 2000 });
  };

  // Clear draft after successful send
  const clearDraft = () => {
    try { localStorage.removeItem(DRAFT_KEY); } catch {}
  };

  const activeChannels = channels.filter((ch) => ch.status === "Active");
  const charCount = message.length;

  // Per-platform media constraints (max file size in bytes)
  const MEDIA_LIMITS: Record<string, { maxImageMB: number; maxVideoMB: number; formats: string[]; label: string }> = {
    Facebook:  { maxImageMB: 10, maxVideoMB: 1024, formats: ["image/jpeg","image/png","image/gif","video/mp4","video/quicktime","video/webm"], label: "Facebook" },
    Instagram: { maxImageMB: 8, maxVideoMB: 300, formats: ["image/jpeg","image/png","video/mp4","video/quicktime"], label: "Instagram" },
    Twitter:   { maxImageMB: 5, maxVideoMB: 512, formats: ["image/jpeg","image/png","image/gif","video/mp4","video/quicktime","video/webm"], label: "X" },
    TikTok:    { maxImageMB: 10, maxVideoMB: 4096, formats: ["image/jpeg","image/webp","video/mp4","video/quicktime","video/webm"], label: "TikTok" },
    YouTube:   { maxImageMB: 2, maxVideoMB: 4096, formats: ["video/mp4","video/quicktime","video/webm"], label: "YouTube" },
    Pinterest: { maxImageMB: 10, maxVideoMB: 2048, formats: ["image/jpeg","image/png","video/mp4","video/quicktime"], label: "Pinterest" },
    LinkedIn:  { maxImageMB: 8, maxVideoMB: 500, formats: ["image/jpeg","image/png","video/mp4"], label: "LinkedIn" },
    Threads:   { maxImageMB: 8, maxVideoMB: 1024, formats: ["image/jpeg","image/png","video/mp4","video/quicktime"], label: "Threads" },
    Bluesky:   { maxImageMB: 0.95, maxVideoMB: 100, formats: ["image/jpeg","image/png","image/webp","video/mp4","video/quicktime"], label: "Bluesky" },
    Mastodon:  { maxImageMB: 16, maxVideoMB: 40, formats: ["image/jpeg","image/png","image/webp","video/mp4","video/quicktime"], label: "Mastodon" },
  };

  const validateMedia = (file: File): string[] => {
    const warnings: string[] = [];
    const isVideo = file.type.startsWith("video/");
    const sizeMB = file.size / (1024 * 1024);

    for (const type of selectedTypes) {
      const limits = MEDIA_LIMITS[type];
      if (!limits) continue;

      // Check format
      if (!limits.formats.includes(file.type)) {
        warnings.push(`${limits.label} doesn't support ${file.type.split("/")[1].toUpperCase()} files`);
      }

      // Check size
      const maxMB = isVideo ? limits.maxVideoMB : limits.maxImageMB;
      if (sizeMB > maxMB) {
        warnings.push(`${limits.label} max ${isVideo ? "video" : "image"} size is ${maxMB >= 1 ? maxMB + "MB" : Math.round(maxMB * 1024) + "KB"} (yours: ${sizeMB.toFixed(1)}MB)`);
      }
    }

    return [...new Set(warnings)]; // dedupe
  };

  // Per-platform character limits
  const CHAR_LIMITS: Record<string, number> = {
    Facebook: 5000, Instagram: 2200, Twitter: 280, TikTok: 2200,
    YouTube: 5000, Pinterest: 800, LinkedIn: 3000, Threads: 500,
    Bluesky: 300, Mastodon: 500,
  };

  // Find the strictest limit among selected channels
  const selectedTypes = activeChannels
    .filter((ch) => selectedChannels.has(ch.id))
    .map((ch) => ch.type);
  const charLimit = selectedTypes.length > 0
    ? Math.min(...selectedTypes.map((t) => CHAR_LIMITS[t] || 5000))
    : null;
  const limitPlatform = charLimit && selectedTypes.length > 0
    ? selectedTypes.find((t) => CHAR_LIMITS[t] === charLimit) || ""
    : "";
  const isOverLimit = charLimit !== null && charCount > charLimit;

  // Hashtag validation per platform
  const hashtagCount = (message.match(/#\w+/g) || []).length;
  const HASHTAG_LIMITS: Record<string, number> = { Instagram: 5, YouTube: 60, Threads: 1 };
  const hashtagWarning = (() => {
    for (const type of selectedTypes) {
      const limit = HASHTAG_LIMITS[type];
      if (limit && hashtagCount > limit) {
        return `${type} allows max ${limit} hashtag${limit > 1 ? "s" : ""} (you have ${hashtagCount})`;
      }
    }
    return null;
  })();

  const fileInputRef = useRef<HTMLInputElement>(null);

  const openMediaPicker = () => {
    // Try WordPress media library first, fall back to native file input
    const wp = (window as any).wp;
    if (wp?.media) {
      const frame = wp.media({
        title: "Select Media for Social Post",
        multiple: true,
        library: { type: ["image", "video"] },
        button: { text: "Add to Post" },
      });
      frame.on("select", () => {
        const selection = frame.state().get("selection").toJSON();
        handleSelectedFiles(selection.map((item: any) => ({
          url: item.url,
          thumbnailUrl: item.sizes?.thumbnail?.url || item.url,
          type: (item.type || "image").includes("video") ? "video" : "image",
          name: item.filename || item.title || "media",
        })));
      });
      frame.open();
      return;
    }

    // Fallback: native file picker
    fileInputRef.current?.click();
  };

  const handleNativeFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = e.target.files;
    if (!files || files.length === 0) return;

    // Upload files to WP media library first, then to Viraly
    setUploadingMedia(true);

    for (const file of Array.from(files)) {
      // Validate against selected platform constraints
      const mediaWarnings = validateMedia(file);
      if (mediaWarnings.length > 0) {
        toast.warn(mediaWarnings[0], { autoClose: 5000 });
        // Still allow upload — it's a warning, not a blocker
        // The platform API will reject if truly incompatible
      }

      const isVideo = file.type.startsWith("video/");
      const isDocument = file.type === "application/pdf" || file.name.endsWith(".pptx") || file.name.endsWith(".docx");
      const mediaType = isDocument ? "document" : isVideo ? "video" : "image";
      const localUrl = URL.createObjectURL(file);

      const placeholderId = `uploading-${Date.now()}-${Math.random()}`;
      setMediaItems((prev) => [...prev, {
        id: placeholderId,
        url: localUrl,
        thumbnailUrl: localUrl,
        type: mediaType,
        uploading: true,
        warnings: mediaWarnings,
      } as any]);

      try {
        // Step 1: Upload to WP media library via REST API to get a public URL
        console.log(`[Viraly Media] Uploading ${file.name} to WP...`);
        const formData = new FormData();
        formData.append("file", file);

        const wpRes = await fetch(`${(window as any).viralyWP.siteUrl}/wp-json/wp/v2/media`, {
          method: "POST",
          headers: { "X-WP-Nonce": (window as any).viralyWP.restNonce },
          credentials: "same-origin",
          body: formData,
        });

        const wpText = await wpRes.text();
        console.log(`[Viraly Media] WP response (${wpRes.status}):`, wpText.slice(0, 500));

        if (!wpRes.ok) {
          let detail = "";
          try { detail = JSON.parse(wpText)?.message || wpText.slice(0, 100); } catch { detail = wpText.slice(0, 100); }
          throw new Error(`WP upload failed (${wpRes.status}): ${detail}`);
        }

        const wpData = JSON.parse(wpText);
        const publicUrl = wpData.source_url;
        console.log(`[Viraly Media] WP upload success, URL: ${publicUrl}`);

        // Step 2: Try to upload to Viraly via from-url proxy
        // If this fails, we still have the WP URL — store it and try again at post time
        console.log(`[Viraly Media] Sending to Viraly from-url...`);
        const baseUrl = (window as any).viralyWP.restUrl.replace(/\/+$/, "");
        let attachmentId: string | null = null;
        let viralyUrl = publicUrl;
        let viralyThumb = publicUrl;

        try {
          const viralyRes = await fetch(`${baseUrl}/attachments/from-url`, {
            method: "POST",
            credentials: "same-origin",
            headers: {
              "X-WP-Nonce": (window as any).viralyWP.restNonce,
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ url: publicUrl, role: "PostAttachment" }),
          });
          const viralyText = await viralyRes.text();
          console.log(`[Viraly Media] Viraly response (${viralyRes.status}):`, viralyText.slice(0, 500));
          const result = JSON.parse(viralyText);
          if (result.id) {
            attachmentId = result.id;
            viralyUrl = result.info?.url || publicUrl;
            viralyThumb = result.thumbnails?.small?.url || publicUrl;
            console.log(`[Viraly Media] Viraly upload success, attachment ID: ${attachmentId}`);
          } else {
            console.warn(`[Viraly Media] Viraly upload failed, will use WP URL:`, result);
          }
        } catch (viralyErr) {
          console.warn(`[Viraly Media] Viraly upload error, will use WP URL:`, viralyErr);
        }

        // Show success — media is available via WP URL at minimum
        setMediaItems((prev) => prev.map((m) =>
          m.id === placeholderId
            ? {
                id: attachmentId || `wp-${wpData.id}`,
                url: viralyUrl,
                thumbnailUrl: viralyThumb,
                wpUrl: publicUrl,
                type: isVideo ? "video" : "image",
                uploading: false,
              } as any
            : m
        ));
      } catch (err: any) {
        console.error(`[Viraly Media] Error:`, err);
        setMediaItems((prev) => prev.filter((m) => m.id !== placeholderId));
        toast.error(`Failed to upload ${file.name}: ${err.message || "Unknown error"}`);
      }

      URL.revokeObjectURL(localUrl);
    }

    setUploadingMedia(false);
    // Reset input so same file can be re-selected
    if (fileInputRef.current) fileInputRef.current.value = "";
  };

  const handleSelectedFiles = async (items: { url: string; thumbnailUrl: string; type: string; name: string }[]) => {
    setUploadingMedia(true);

    for (const item of items) {
      const placeholderId = `uploading-${Date.now()}-${Math.random()}`;
      setMediaItems((prev) => [...prev, {
        id: placeholderId,
        url: item.thumbnailUrl,
        thumbnailUrl: item.thumbnailUrl,
        type: item.type,
        uploading: true,
      }]);

      try {
        const result = await wpApi.post<any>("attachments/from-url", {
          url: item.url,
          role: "PostAttachment",
        });

        if (result.id) {
          setMediaItems((prev) => prev.map((m) =>
            m.id === placeholderId
              ? { id: result.id, url: result.info?.url || item.url, thumbnailUrl: result.thumbnails?.small?.url || item.thumbnailUrl, type: item.type, uploading: false }
              : m
          ));
        } else {
          setMediaItems((prev) => prev.filter((m) => m.id !== placeholderId));
          toast.error(`Failed to process ${item.name}`);
        }
      } catch {
        setMediaItems((prev) => prev.filter((m) => m.id !== placeholderId));
        toast.error(`Failed to upload ${item.name}`);
      }
    }

    setUploadingMedia(false);
  };

  const removeMedia = (id: string) => {
    setMediaItems((prev) => prev.filter((m) => m.id !== id));
  };

  const insertEmoji = (emoji: string) => {
    const el = textareaRef.current;
    if (!el) { setMessage((prev) => prev + emoji); return; }
    const start = el.selectionStart;
    const end = el.selectionEnd;
    const newVal = message.slice(0, start) + emoji + message.slice(end);
    setMessage(newVal);
    // Restore cursor position after emoji
    requestAnimationFrame(() => {
      el.focus();
      el.setSelectionRange(start + emoji.length, start + emoji.length);
    });
  };

  const toggleChannel = (id: string) => {
    setSelectedChannels((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  // For AI: use the first selected channel's type
  const firstSelectedChannel = activeChannels.find((ch) => selectedChannels.has(ch.id));

  const handleSend = async () => {
    if (selectedChannels.size === 0 || !message.trim()) return;

    setSending(true);

    // Resolve any media that only has WP URL (retry Viraly upload)
    const resolvedMedia = [...mediaItems.filter((m) => !m.uploading)];
    const baseUrl = (window as any).viralyWP.restUrl.replace(/\/+$/, "");
    for (let i = 0; i < resolvedMedia.length; i++) {
      const m = resolvedMedia[i] as any;
      if (m.id.startsWith("wp-") && m.wpUrl) {
        try {
          const res = await fetch(`${baseUrl}/attachments/from-url`, {
            method: "POST", credentials: "same-origin",
            headers: { "X-WP-Nonce": (window as any).viralyWP.restNonce, "Content-Type": "application/json" },
            body: JSON.stringify({ url: m.wpUrl, role: "PostAttachment" }),
          });
          const data = await res.json();
          if (data.id) {
            resolvedMedia[i] = { ...m, id: data.id };
            console.log(`[Viraly Media] Resolved wp media to attachment ID: ${data.id}`);
          }
        } catch { /* keep wp- ID, compose will fail gracefully */ }
      }
    }

    const attachmentIds = resolvedMedia.filter((m) => !m.id.startsWith("wp-")).map((m) => m.id);
    // For wp- items that couldn't be resolved, send the WP URLs so PHP can upload server-side
    const mediaUrls = resolvedMedia
      .filter((m) => m.id.startsWith("wp-") && (m as any).wpUrl)
      .map((m) => (m as any).wpUrl);

    let sentCount = 0;
    let failCount = 0;
    let lastError = "";

    for (const chId of selectedChannels) {
      const ch = activeChannels.find((c) => c.id === chId);
      if (!ch) continue;

      try {
        const payload: any = {
          channelId: ch.id,
          channelType: ch.type,
          message: message.trim(),
          timezone: socialSetTimezone,
          attachmentIds,
          mediaUrls,
          mediaType: mediaItems.length > 0 ? mediaItems[0].type : undefined,
          // Post type selectors
          facebookPostType: ch.type === "Facebook" ? fbPostType : undefined,
          instagramPostType: ch.type === "Instagram" ? igPostType : undefined,
          youtubePostType: ch.type === "YouTube" ? ytPostType : undefined,
          youtubeCategory: ch.type === "YouTube" ? ytCategory : undefined,
          tiktokPrivacy: ch.type === "TikTok" ? ttPrivacy : undefined,
          linkedinDocTitle: ch.type === "LinkedIn" && liDocTitle.trim() ? liDocTitle.trim() : undefined,
          mastodonSpoiler: ch.type === "Mastodon" && mstdnSpoiler.trim() ? mstdnSpoiler.trim() : undefined,
          mastodonSensitive: ch.type === "Mastodon" ? mstdnSensitive : undefined,
          firstComment: firstComment.trim() || undefined,
          threadReplies: threadReplies.filter((r) => r.trim()).length > 0
            ? threadReplies.filter((r) => r.trim())
            : undefined,
          // Platform-specific
          youtubeTitle: ch.type === "YouTube" && ytTitle.trim() ? ytTitle.trim() : undefined,
          youtubeVisibility: ch.type === "YouTube" ? ytVisibility : undefined,
          pinterestBoard: ch.type === "Pinterest" && pinBoard.trim() ? pinBoard.trim() : undefined,
          pinterestLink: ch.type === "Pinterest" && pinLink.trim() ? pinLink.trim() : undefined,
        };

        if (mode === "schedule" && scheduleDate) {
          payload.scheduledAt = `${scheduleDate}T${scheduleTime}:00`;
        }

        if (enableEvergreen) {
          payload.enableEvergreen = true;
          payload.evergreenSettings = { recycleInterval, maxRecycles };
        }

        console.log(`[Viraly Compose] Sending to ${ch.name} (${ch.type}):`, payload);
        const baseUrl = (window as any).viralyWP.restUrl.replace(/\/+$/, "");
        const res = await fetch(`${baseUrl}/compose`, {
          method: "POST",
          credentials: "same-origin",
          headers: { "X-WP-Nonce": (window as any).viralyWP.restNonce, "Content-Type": "application/json" },
          body: JSON.stringify(payload),
        });
        const resText = await res.text();
        console.log(`[Viraly Compose] Response (${res.status}):`, resText.slice(0, 500));
        let result: any;
        try { result = JSON.parse(resText); } catch { result = { error: resText.slice(0, 200) }; }

        if (result.success) {
          sentCount++;
        } else {
          failCount++;
          const errDetail = result.error || result.details?.message || result.details?.title || `Status ${result.status || res.status}`;
          console.error(`[Viraly Compose] Failed for ${ch.name}:`, result);
          lastError = errDetail;
        }
      } catch (err: any) {
        failCount++;
        lastError = err.message || "Network error";
        console.error(`[Viraly Compose] Error for ${ch.name}:`, err);
      }
    }

    if (sentCount > 0) {
      setMessage("");
      setFirstComment("");
      setThreadReplies([]);
      setMediaItems([]);
      setHasDraft(false);
      clearDraft();

      // Navigate to calendar with confirmation
      const msg = mode === "schedule"
        ? `Scheduled to ${sentCount} profile${sentCount !== 1 ? "s" : ""}`
        : `Posted to ${sentCount} profile${sentCount !== 1 ? "s" : ""}`;
      sessionStorage.setItem("viraly_post_success", msg);
      if (onNavigate) {
        onNavigate("calendar");
      } else {
        toast.success(
          mode === "schedule"
            ? `Scheduled to ${sentCount} profile${sentCount !== 1 ? "s" : ""}`
            : `Posted to ${sentCount} profile${sentCount !== 1 ? "s" : ""}`
        );
      }
    }
    if (failCount > 0) {
      toast.error(`Failed for ${failCount} profile${failCount !== 1 ? "s" : ""}${lastError ? ": " + lastError : ""}`);
    }

    setSending(false);
  };

  if (isLoading) {
    return (
      <div className="vr-bg-white vr-rounded-xl vr-border vr-border-gray-200 vr-shadow-sm vr-p-7">
        <div className="vr-flex vr-items-center vr-justify-center vr-gap-3 vr-py-10 vr-text-gray-400 vr-text-sm">
          <div className="vr-w-5 vr-h-5 vr-border-2 vr-border-gray-200 vr-border-t-primary-600 vr-rounded-full vr-animate-spin" />
          Loading...
        </div>
      </div>
    );
  }

  const content = (
    <>
      {!embedded && (
        <>
          <div className="vr-mb-4">
            <h2 className="vr-text-base vr-font-bold vr-text-gray-900">Compose Post</h2>
            <p className="vr-text-xs vr-text-gray-500 vr-mt-0.5">Create and publish social media posts directly from WordPress.</p>
          </div>

          {/* Mode toggle */}
          <div className="vr-flex vr-gap-2 vr-mb-5">
            <button
              onClick={() => setComposeMode("write")}
              className={clsx(
                "vr-flex-1 vr-py-2.5 vr-rounded-lg vr-text-sm vr-font-semibold vr-transition-all vr-border-0 vr-cursor-pointer",
                composeMode === "write"
                  ? "vr-bg-primary-600 vr-text-white"
                  : "vr-bg-gray-100 vr-text-gray-600 hover:vr-bg-gray-200"
              )}
            >
              <i className="fa-solid fa-pen-to-square vr-mr-1.5" style={{ fontSize: "11px" }} />
              Write Post
            </button>
            <button
              onClick={() => setComposeMode("blog")}
              className={clsx(
              "vr-flex-1 vr-py-2.5 vr-rounded-lg vr-text-sm vr-font-semibold vr-transition-all vr-border-0 vr-cursor-pointer",
              composeMode === "blog"
                ? "vr-bg-primary-600 vr-text-white"
                : "vr-bg-gray-100 vr-text-gray-600 hover:vr-bg-gray-200"
            )}
          >
            <i className="fa-solid fa-blog vr-mr-1.5" style={{ fontSize: "11px" }} />
            From Blog Post
          </button>
        </div>
        </>
      )}

        {/* Hidden file input for native file picker fallback */}
        <input
          ref={fileInputRef}
          type="file"
          accept="image/jpeg,image/png,image/gif,image/webp,video/mp4,video/quicktime,video/webm,application/pdf,.pptx,.docx"
          multiple
          onChange={handleNativeFileSelect}
          style={{ display: "none" }}
        />

        {/* Blog Post mode */}
        {composeMode === "blog" && <BlogPostPicker onNavigate={onNavigate} />}

        {/* Write mode */}
        {composeMode === "write" && activeChannels.length === 0 ? (
          <div className="vr-text-center vr-py-8">
            <i className="fa-solid fa-link-slash vr-text-3xl vr-text-gray-200 vr-mb-3" />
            <p className="vr-text-sm vr-text-gray-500">No active profiles. Connect a social profile first.</p>
          </div>
        ) : composeMode === "write" ? (
          <div className="vr-space-y-5">
            {/* Draft indicator */}
            {hasDraft && !initialMode && (
              <div className="vr-flex vr-items-center vr-justify-between vr-px-3 vr-py-2 vr-rounded-lg vr-bg-blue-50 vr-border vr-border-blue-200">
                <span className="vr-text-xs vr-text-blue-700">
                  <i className="fa-solid fa-file-pen vr-mr-1.5" style={{ fontSize: "10px" }} />
                  Draft restored
                </span>
                <button
                  onClick={discardDraft}
                  className="vr-text-xs vr-font-medium vr-text-blue-600 hover:vr-text-blue-800 vr-border-0 vr-bg-transparent vr-cursor-pointer vr-p-0"
                >
                  Discard
                </button>
              </div>
            )}

            {/* Channel selector */}
            <div>
              <label className="vr-text-xs vr-font-semibold vr-text-gray-500 vr-uppercase vr-tracking-wide vr-mb-1 vr-block">
                Post to ({selectedChannels.size})
              </label>
              <p className="vr-text-xs vr-text-gray-500 vr-mb-3">Select which profiles receive your blog posts.</p>
              <ChannelSelector
                channels={activeChannels}
                selected={selectedChannels}
                onToggle={toggleChannel}
                showNames
              />
              {selectedChannels.size === 0 && (
                <p className="vr-text-xs vr-text-red-500 vr-mt-2">Select at least one profile.</p>
              )}
            </div>

            {/* Post type selectors — above message, matching SPA layout */}
            {selectedTypes.includes("Facebook") && (
              <div>
                <div className="vr-flex vr-items-center" style={{ gap: "40px" }}>
                  {(["Post", "Reel", "Story"] as const).map((t) => (
                    <label key={t} className="vr-flex vr-items-center vr-gap-2 vr-cursor-pointer" onClick={() => setFbPostType(t)}>
                      <input type="radio" name="fb-post-type" checked={fbPostType === t} readOnly className="vr-w-4 vr-h-4" style={{ accentColor: "#E03058" }} />
                      <span className="vr-text-sm vr-text-gray-700">{t}</span>
                    </label>
                  ))}
                  <span className="vr-text-xs vr-text-gray-400">Facebook</span>
                </div>
                {fbPostType === "Reel" && <p className="vr-text-xs vr-text-gray-500 vr-mt-1">Requires a video (9:16, 3-90s)</p>}
                {fbPostType === "Story" && <p className="vr-text-xs vr-text-gray-500 vr-mt-1">Requires a single image or video (9:16)</p>}
              </div>
            )}

            {selectedTypes.includes("Instagram") && (
              <div>
                <div className="vr-flex vr-items-center" style={{ gap: "40px" }}>
                  {(["Post", "Reel", "Story"] as const).map((t) => (
                    <label key={t} className="vr-flex vr-items-center vr-gap-2 vr-cursor-pointer" onClick={() => setIgPostType(t)}>
                      <input type="radio" name="ig-post-type" checked={igPostType === t} readOnly className="vr-w-4 vr-h-4" style={{ accentColor: "#E03058" }} />
                      <span className="vr-text-sm vr-text-gray-700">{t}</span>
                    </label>
                  ))}
                  <span className="vr-text-xs vr-text-gray-400">Instagram</span>
                </div>
                {igPostType === "Reel" && <p className="vr-text-xs vr-text-gray-500 vr-mt-1">Requires a video (9:16 ideal, 3s-15min)</p>}
                {igPostType === "Story" && <p className="vr-text-xs vr-text-gray-500 vr-mt-1">Requires a single image or video (9:16)</p>}
              </div>
            )}

            {selectedTypes.includes("YouTube") && (
              <div>
                <div className="vr-flex vr-items-center" style={{ gap: "40px" }}>
                  {(["Video", "Short"] as const).map((t) => (
                    <label key={t} className="vr-flex vr-items-center vr-gap-2 vr-cursor-pointer" onClick={() => setYtPostType(t)}>
                      <input type="radio" name="yt-post-type" checked={ytPostType === t} readOnly className="vr-w-4 vr-h-4" style={{ accentColor: "#E03058" }} />
                      <span className="vr-text-sm vr-text-gray-700">{t}</span>
                    </label>
                  ))}
                  <span className="vr-text-xs vr-text-gray-400">YouTube</span>
                </div>
                {ytPostType === "Short" && <p className="vr-text-xs vr-text-gray-500 vr-mt-1">Max 3 minutes, 9:16 or 1:1 aspect ratio</p>}
              </div>
            )}

            {/* Message */}
            <div>
              <div className="vr-flex vr-justify-between vr-items-center vr-mb-2">
                <label className="vr-text-xs vr-font-semibold vr-text-gray-500 vr-uppercase vr-tracking-wide">
                  Message
                </label>
                <span className={clsx(
                  "vr-text-xs vr-font-medium",
                  isOverLimit ? "vr-text-red-500" : "vr-text-gray-400"
                )}>
                  {charLimit ? (
                    <>
                      {charCount} / {charLimit}
                      {isOverLimit && <span className="vr-ml-1">({limitPlatform} limit)</span>}
                    </>
                  ) : (
                    <>{charCount} characters</>
                  )}
                </span>
                {hashtagWarning && (
                  <span className="vr-text-xs vr-font-medium vr-text-amber-600">
                    ⚠ {hashtagWarning}
                  </span>
                )}
              </div>
              <div className="vr-relative">
                <textarea
                  ref={textareaRef}
                  value={message}
                  onChange={(e) => setMessage(e.target.value)}
                  rows={4}
                  placeholder={selectedChannels.size > 0 ? "What's on your mind?" : "Select a profile first..."}
                  disabled={selectedChannels.size === 0}
                  className="vr-w-full vr-rounded-lg vr-border vr-border-gray-200 vr-p-4 vr-pb-10 vr-text-sm vr-text-gray-700 vr-leading-relaxed focus:vr-ring-1 focus:vr-ring-primary-300 focus:vr-border-primary-300 vr-outline-none vr-resize-y disabled:vr-bg-gray-50 disabled:vr-cursor-not-allowed"
                />
                {/* Toolbar below textarea */}
                <div className="vr-absolute vr-bottom-1.5 vr-left-2 vr-flex vr-items-center vr-gap-1">
                  <EmojiPicker
                    onEmojiSelect={insertEmoji}
                    disabled={selectedChannels.size === 0}
                  />
                  <button
                    type="button"
                    onClick={openMediaPicker}
                    disabled={selectedChannels.size === 0 || uploadingMedia}
                    className="vr-w-8 vr-h-8 vr-flex vr-items-center vr-justify-center vr-rounded-md vr-text-gray-400 hover:vr-text-gray-600 hover:vr-bg-gray-100 vr-transition-colors vr-border-0 vr-bg-transparent vr-cursor-pointer disabled:vr-opacity-40 disabled:vr-cursor-not-allowed"
                    title="Add media"
                  >
                    <i className="fa-solid fa-image" style={{ fontSize: "14px" }} />
                  </button>
                </div>
                {/* Media Requirements button — positioned right of textarea */}
                <div className="vr-absolute vr-bottom-1.5 vr-right-2">
                  <button
                    type="button"
                    onClick={() => setShowMediaReqs(true)}
                    className="vr-inline-flex vr-items-center vr-gap-1.5 vr-px-2.5 vr-py-1.5 vr-rounded-md vr-text-xs vr-font-normal vr-text-gray-400 hover:vr-text-gray-600 hover:vr-bg-gray-100 vr-transition-colors vr-border-0 vr-bg-transparent vr-cursor-pointer"
                  >
                    <i className="fa-solid fa-circle-info" style={{ fontSize: "12px" }} />
                    Media Requirements
                  </button>
                </div>
              </div>

              {/* Media preview */}
              {mediaItems.length > 0 && (
                <div className="vr-mt-3 vr-flex vr-flex-wrap vr-gap-2">
                  {mediaItems.map((item) => (
                    <div key={item.id} className="vr-relative vr-group">
                      {item.type === "video" ? (
                        <div className="vr-w-20 vr-h-20 vr-rounded-lg vr-bg-gray-100 vr-flex vr-items-center vr-justify-center vr-border vr-border-gray-200">
                          <i className="fa-solid fa-video vr-text-gray-400" style={{ fontSize: "20px" }} />
                        </div>
                      ) : item.type === "document" ? (
                        <div className="vr-w-20 vr-h-20 vr-rounded-lg vr-bg-gray-100 vr-flex vr-items-center vr-justify-center vr-border vr-border-gray-200">
                          <i className="fa-solid fa-file-pdf vr-text-red-400" style={{ fontSize: "20px" }} />
                        </div>
                      ) : (
                        <img src={item.thumbnailUrl || item.url} alt="" className="vr-w-20 vr-h-20 vr-rounded-lg vr-object-cover vr-border vr-border-gray-200" />
                      )}
                      {item.uploading && (
                        <div className="vr-absolute vr-inset-0 vr-bg-white/70 vr-rounded-lg vr-flex vr-items-center vr-justify-center">
                          <div className="vr-w-5 vr-h-5 vr-border-2 vr-border-gray-200 vr-border-t-primary-600 vr-rounded-full vr-animate-spin" />
                        </div>
                      )}
                      {!item.uploading && (
                        <button
                          onClick={() => removeMedia(item.id)}
                          className="vr-absolute vr--top-1.5 vr--right-1.5 vr-w-5 vr-h-5 vr-rounded-full vr-bg-red-500 vr-text-white vr-flex vr-items-center vr-justify-center vr-border-0 vr-cursor-pointer vr-opacity-0 group-hover:vr-opacity-100 vr-transition-opacity"
                          title="Remove"
                        >
                          <i className="fa-solid fa-xmark" style={{ fontSize: "10px" }} />
                        </button>
                      )}
                      {/* Edit button for images */}
                      {!item.uploading && item.type === "image" && (
                        <button
                          onClick={() => setEditingMediaId(item.id)}
                          className="vr-absolute vr-bottom-1 vr-left-1 vr-w-6 vr-h-6 vr-rounded-full vr-bg-black/50 vr-text-white vr-flex vr-items-center vr-justify-center vr-border-0 vr-cursor-pointer vr-opacity-0 group-hover:vr-opacity-100 vr-transition-opacity"
                          title="Edit image"
                        >
                          <i className="fa-solid fa-paintbrush" style={{ fontSize: "9px" }} />
                        </button>
                      )}
                      {/* Thumbnail picker for videos */}
                      {!item.uploading && item.type === "video" && (
                        <button
                          onClick={() => setPickingThumbnailId(item.id)}
                          className="vr-absolute vr-bottom-1 vr-left-1 vr-w-6 vr-h-6 vr-rounded-full vr-bg-black/50 vr-text-white vr-flex vr-items-center vr-justify-center vr-border-0 vr-cursor-pointer vr-opacity-0 group-hover:vr-opacity-100 vr-transition-opacity"
                          title="Pick thumbnail"
                        >
                          <i className="fa-solid fa-camera" style={{ fontSize: "9px" }} />
                        </button>
                      )}
                      {/* Warning badge */}
                      {(item as any).warnings?.length > 0 && !item.uploading && (
                        <div
                          className="vr-absolute vr--bottom-1.5 vr--left-1.5 vr-w-5 vr-h-5 vr-rounded-full vr-bg-amber-500 vr-text-white vr-flex vr-items-center vr-justify-center"
                          title={(item as any).warnings.join("\n")}
                        >
                          <i className="fa-solid fa-exclamation" style={{ fontSize: "9px" }} />
                        </div>
                      )}
                    </div>
                  ))}
                  <button
                    onClick={openMediaPicker}
                    disabled={uploadingMedia}
                    className="vr-w-20 vr-h-20 vr-rounded-lg vr-border-2 vr-border-dashed vr-border-gray-200 vr-flex vr-items-center vr-justify-center vr-text-gray-300 hover:vr-text-gray-400 hover:vr-border-gray-300 vr-transition-colors vr-bg-transparent vr-cursor-pointer"
                    title="Add more media"
                  >
                    <i className="fa-solid fa-plus" style={{ fontSize: "16px" }} />
                  </button>
                </div>
              )}

              {/* Image Editor Modal */}
              {editingMediaId && (() => {
                const editItem = mediaItems.find((m) => m.id === editingMediaId);
                if (!editItem || editItem.type !== "image") return null;
                // Prefer WP URL (same-origin) over Viraly S3 URL (cross-origin)
                const editUrl = (editItem as any).wpUrl || editItem.thumbnailUrl || editItem.url;
                return (
                  <ImageEditor
                    imageUrl={editUrl}
                    selectedPlatforms={selectedTypes}
                    onSave={async (blob, croppedUrl) => {
                      setEditingMediaId(null);
                      // Upload cropped image to WP, then to Viraly
                      const file = new File([blob], `cropped-${Date.now()}.jpg`, { type: "image/jpeg" });
                      const formData = new FormData();
                      formData.append("file", file);

                      const placeholderId = editItem.id;
                      setMediaItems((prev) => prev.map((m) =>
                        m.id === placeholderId ? { ...m, uploading: true, url: croppedUrl, thumbnailUrl: croppedUrl } : m
                      ));

                      try {
                        // Upload to WP
                        const wpRes = await fetch(`${(window as any).viralyWP.siteUrl}/wp-json/wp/v2/media`, {
                          method: "POST",
                          headers: { "X-WP-Nonce": (window as any).viralyWP.restNonce },
                          credentials: "same-origin",
                          body: formData,
                        });
                        if (!wpRes.ok) throw new Error("WP upload failed");
                        const wpData = await wpRes.json();

                        // Upload to Viraly
                        const baseUrl = (window as any).viralyWP.restUrl.replace(/\/+$/, "");
                        const viralyRes = await fetch(`${baseUrl}/attachments/from-url`, {
                          method: "POST", credentials: "same-origin",
                          headers: { "X-WP-Nonce": (window as any).viralyWP.restNonce, "Content-Type": "application/json" },
                          body: JSON.stringify({ url: wpData.source_url, role: "PostAttachment" }),
                        });
                        const viralyData = await viralyRes.json();

                        setMediaItems((prev) => prev.map((m) =>
                          m.id === placeholderId
                            ? { ...m, id: viralyData.id || `wp-${wpData.id}`, url: croppedUrl, thumbnailUrl: croppedUrl, uploading: false, wpUrl: wpData.source_url } as any
                            : m
                        ));
                      } catch {
                        setMediaItems((prev) => prev.map((m) =>
                          m.id === placeholderId ? { ...m, uploading: false } : m
                        ));
                        toast.error("Failed to save edited image");
                      }
                    }}
                    onCancel={() => setEditingMediaId(null)}
                  />
                );
              })()}

              {/* Video Thumbnail Picker Modal */}
              {pickingThumbnailId && (() => {
                const videoItem = mediaItems.find((m) => m.id === pickingThumbnailId);
                if (!videoItem || videoItem.type !== "video") return null;
                return (
                  <VideoThumbnailPicker
                    videoUrl={videoItem.url}
                    onSelect={(_blob, thumbUrl) => {
                      setMediaItems((prev) => prev.map((m) =>
                        m.id === pickingThumbnailId ? { ...m, thumbnailUrl: thumbUrl } : m
                      ));
                      setPickingThumbnailId(null);
                      toast.success("Thumbnail selected");
                    }}
                    onCancel={() => setPickingThumbnailId(null)}
                  />
                );
              })()}

              {/* Media Requirements Modal */}
              <MediaRequirementsModal
                open={showMediaReqs}
                onClose={() => setShowMediaReqs(false)}
                defaultPlatform={selectedTypes[0]}
              />

              {/* URL Preview */}
              <UrlPreview text={message} hasMedia={mediaItems.length > 0} />

              {/* AI Assistant Toggle */}
              <button
                onClick={() => setAiOpen(!aiOpen)}
                className="vr-mt-3 vr-w-full vr-flex vr-items-center vr-justify-between vr-gap-2 vr-px-4 vr-py-3 vr-rounded-lg vr-border vr-border-gray-200 vr-bg-gray-50 hover:vr-bg-gray-100 vr-transition-colors vr-cursor-pointer vr-border-0"
              >
                <div className="vr-flex vr-items-center vr-gap-2">
                  <span className="vr-w-6 vr-h-6 vr-rounded-md vr-flex vr-items-center vr-justify-center" style={{ background: "linear-gradient(135deg, #4f46e5, #7c3aed)" }}>
                    <i className="fa-solid fa-wand-magic-sparkles vr-text-white" style={{ fontSize: "10px" }} />
                  </span>
                  <span className="vr-text-xs vr-font-semibold vr-text-gray-700">AI Assistant</span>
                </div>
                <i className={`fa-solid fa-chevron-${aiOpen ? "up" : "down"} vr-text-gray-400`} style={{ fontSize: "10px" }} />
              </button>

              {aiOpen && (
              <div className="vr-p-4 vr-bg-gray-50 vr-rounded-b-lg vr-border vr-border-t-0 vr-border-gray-200">

                {/* Prompt */}
                <input
                  type="text"
                  value={aiPrompt}
                  onChange={(e) => setAiPrompt(e.target.value)}
                  placeholder="Describe what you want to post about..."
                  className="vr-w-full vr-px-3 vr-py-2 vr-rounded-md vr-border vr-border-gray-200 vr-text-sm vr-outline-none focus:vr-border-primary-300 vr-mb-2"
                />

                {/* Tone selector */}
                <div className="vr-flex vr-flex-wrap vr-gap-1.5 vr-mb-3">
                  {[
                    { tone: "Neutral", emoji: "🙂" },
                    { tone: "Casual", emoji: "👕" },
                    { tone: "Formal", emoji: "🎩" },
                    { tone: "Humorous", emoji: "😂" },
                    { tone: "Inspirational", emoji: "🚀" },
                    { tone: "Persuasive", emoji: "🧲" },
                    { tone: "Educational", emoji: "📚" },
                    { tone: "Excited", emoji: "🎉" },
                  ].map((t) => (
                    <button
                      key={t.tone}
                      onClick={() => setAiTone(t.tone)}
                      className={clsx(
                        "vr-px-2.5 vr-py-1 vr-rounded-full vr-text-xs vr-font-medium vr-border-0 vr-cursor-pointer vr-transition-all",
                        aiTone === t.tone
                          ? "vr-bg-primary-600 vr-text-white"
                          : "vr-bg-white vr-text-gray-600 vr-border vr-border-gray-200 hover:vr-border-primary-300"
                      )}
                    >
                      {t.emoji} {t.tone}
                    </button>
                  ))}
                </div>

                {/* Action buttons */}
                <div className="vr-flex vr-gap-2">
                  <button
                    onClick={async () => {
                      const content = aiPrompt.trim() || message.trim();
                      if (!content) { toast.error("Enter a topic or write some text first."); return; }
                      setAiGenerating(true);
                      try {
                        const result = await wpApi.post<any>("ai/generate-caption", {
                          content,
                          command: message.trim() ? "Rephrase" : "WriteNew",
                          tone: aiTone,
                          channelType: firstSelectedChannel?.type || "",
                          action: "caption",
                        });
                        if (result.text) setMessage(result.text);
                        else toast.error("AI didn't return a caption.");
                      } catch {
                        toast.error("AI generation failed.");
                      } finally {
                        setAiGenerating(false);
                      }
                    }}
                    disabled={aiGenerating || (!aiPrompt.trim() && !message.trim())}
                    className="vr-flex-1 vr-py-2 vr-rounded-md vr-text-xs vr-font-semibold vr-text-white vr-bg-primary-600 hover:vr-bg-primary-700 vr-transition-colors disabled:vr-opacity-50 vr-border-0 vr-cursor-pointer"
                  >
                    {aiGenerating ? "✨ Generating..." : message.trim() ? "✨ Rephrase" : "✨ Generate Caption"}
                  </button>
                  <button
                    onClick={async () => {
                      if (!message.trim()) { toast.error("Write a caption first to generate hashtags."); return; }
                      setHashtagGenerating(true);
                      try {
                        const result = await wpApi.post<any>("ai/generate-caption", {
                          content: message,
                          action: "hashtags",
                        });
                        if (result.text) {
                          setMessage((prev) => prev.trim() + "\n\n" + result.text);
                        } else {
                          toast.error("Couldn't generate hashtags.");
                        }
                      } catch {
                        toast.error("Hashtag generation failed.");
                      } finally {
                        setHashtagGenerating(false);
                      }
                    }}
                    disabled={hashtagGenerating || !message.trim()}
                    className="vr-py-2 vr-px-3 vr-rounded-md vr-text-xs vr-font-semibold vr-text-gray-600 vr-bg-white vr-border vr-border-gray-200 hover:vr-border-primary-300 vr-transition-colors disabled:vr-opacity-50 vr-border-0 vr-cursor-pointer"
                  >
                    {hashtagGenerating ? "# ..." : "# Hashtags"}
                  </button>
                </div>
              </div>
              )}
            </div>

            {/* First Comment — collapsible, only for supported platforms */}
            {(() => {
              const FIRST_COMMENT_PLATFORMS = ["Facebook", "Instagram", "YouTube", "LinkedIn"];
              const hasFirstCommentPlatform = selectedTypes.some((t) => FIRST_COMMENT_PLATFORMS.includes(t));
              if (!hasFirstCommentPlatform) return null;
              const fcPlatforms = selectedTypes.filter((t) => FIRST_COMMENT_PLATFORMS.includes(t));

              if (!firstCommentOpen && !firstComment) {
                return (
                  <button
                    type="button"
                    onClick={() => setFirstCommentOpen(true)}
                    className="vr-inline-flex vr-items-center vr-gap-1.5 vr-text-xs vr-font-medium vr-text-gray-500 hover:vr-text-primary-600 vr-border-0 vr-bg-transparent vr-cursor-pointer vr-p-0 vr-transition-colors"
                  >
                    <i className="fa-solid fa-plus" style={{ fontSize: "10px" }} />
                    First Comment
                  </button>
                );
              }

              return (
                <div>
                  <div className="vr-flex vr-justify-between vr-items-center vr-mb-2">
                    <label className="vr-text-xs vr-font-semibold vr-text-gray-500 vr-uppercase vr-tracking-wide">
                      First Comment
                    </label>
                    <div className="vr-flex vr-items-center vr-gap-2">
                      <span className={clsx("vr-text-xs vr-font-medium", firstComment.length > 500 ? "vr-text-red-500" : "vr-text-gray-400")}>
                        {firstComment.length} / 500
                      </span>
                      <button
                        type="button"
                        onClick={() => { setFirstComment(""); setFirstCommentOpen(false); }}
                        className="vr-text-gray-300 hover:vr-text-red-500 vr-border-0 vr-bg-transparent vr-cursor-pointer vr-p-0"
                        title="Remove first comment"
                      >
                        <i className="fa-solid fa-xmark" style={{ fontSize: "12px" }} />
                      </button>
                    </div>
                  </div>
                  <textarea
                    value={firstComment}
                    onChange={(e) => setFirstComment(e.target.value)}
                    rows={2}
                    maxLength={500}
                    autoFocus
                    placeholder={`Auto-posted as the first comment on ${fcPlatforms.join(", ")}...`}
                    className="vr-w-full vr-rounded-lg vr-border vr-border-gray-200 vr-p-3 vr-text-sm vr-text-gray-700 vr-leading-relaxed focus:vr-ring-1 focus:vr-ring-primary-300 focus:vr-border-primary-300 vr-outline-none vr-resize-y"
                  />
                </div>
              );
            })()}

            {/* Thread Replies — for Twitter, Threads, Bluesky, Mastodon */}
            {(() => {
              const THREAD_PLATFORMS = ["Twitter", "Threads", "Bluesky", "Mastodon"];
              const THREAD_CHAR_LIMITS: Record<string, number> = { Twitter: 280, Threads: 500, Bluesky: 300, Mastodon: 500 };
              const hasThreadPlatform = selectedTypes.some((t) => THREAD_PLATFORMS.includes(t));
              if (!hasThreadPlatform) return null;
              const threadPlatform = selectedTypes.find((t) => THREAD_PLATFORMS.includes(t)) || "";
              const replyLimit = THREAD_CHAR_LIMITS[threadPlatform] || 500;

              const addReply = () => setThreadReplies((prev) => [...prev, ""]);
              const removeReply = (idx: number) => setThreadReplies((prev) => prev.filter((_, i) => i !== idx));
              const updateReply = (idx: number, val: string) => setThreadReplies((prev) => prev.map((r, i) => i === idx ? val : r));

              // Collapsed state — just show "+ Add Reply" link
              if (threadReplies.length === 0) {
                return (
                  <button
                    type="button"
                    onClick={addReply}
                    className="vr-inline-flex vr-items-center vr-gap-1.5 vr-text-xs vr-font-medium vr-text-gray-500 hover:vr-text-primary-600 vr-border-0 vr-bg-transparent vr-cursor-pointer vr-p-0 vr-transition-colors"
                  >
                    <i className="fa-solid fa-plus" style={{ fontSize: "10px" }} />
                    Add Reply
                  </button>
                );
              }

              return (
                <div>
                  <div className="vr-flex vr-items-center vr-justify-between vr-mb-2">
                    <label className="vr-text-xs vr-font-semibold vr-text-gray-500 vr-uppercase vr-tracking-wide">
                      Thread
                    </label>
                    <button
                      type="button"
                      onClick={addReply}
                      className="vr-inline-flex vr-items-center vr-gap-1 vr-text-xs vr-font-semibold vr-text-primary-600 hover:vr-text-primary-700 vr-border-0 vr-bg-transparent vr-cursor-pointer vr-p-0"
                    >
                      <i className="fa-solid fa-circle-plus" style={{ fontSize: "12px" }} />
                      Add Reply
                    </button>
                  </div>

                  {threadReplies.map((reply, idx) => (
                    <div key={idx} className="vr-mb-2 vr-relative">
                      <div className="vr-flex vr-items-center vr-justify-between vr-mb-1">
                        <span className="vr-text-xs vr-text-gray-400">Reply {idx + 1}</span>
                        <div className="vr-flex vr-items-center vr-gap-2">
                          <span className={clsx("vr-text-xs vr-font-medium", reply.length > replyLimit ? "vr-text-red-500" : "vr-text-gray-400")}>
                            {reply.length} / {replyLimit}
                          </span>
                          <button
                            type="button"
                            onClick={() => removeReply(idx)}
                            className="vr-text-gray-300 hover:vr-text-red-500 vr-border-0 vr-bg-transparent vr-cursor-pointer vr-p-0"
                            title="Remove reply"
                          >
                            <i className="fa-solid fa-trash-can" style={{ fontSize: "11px" }} />
                          </button>
                        </div>
                      </div>
                      <textarea
                        value={reply}
                        onChange={(e) => updateReply(idx, e.target.value)}
                        rows={2}
                        placeholder={`Reply ${idx + 1}...`}
                        className="vr-w-full vr-rounded-lg vr-border vr-border-gray-200 vr-p-3 vr-text-sm vr-text-gray-700 vr-leading-relaxed focus:vr-ring-1 focus:vr-ring-primary-300 focus:vr-border-primary-300 vr-outline-none vr-resize-y"
                      />
                    </div>
                  ))}
                </div>
              );
            })()}

            {/* YouTube fields (title, category, visibility) */}
            {selectedTypes.includes("YouTube") && (
              <div className="vr-space-y-2">
                {ytPostType === "Short" && <p className="vr-text-xs vr-text-gray-500">Max 3 minutes, 9:16 or 1:1 aspect ratio</p>}
                <input
                  type="text"
                  value={ytTitle}
                  onChange={(e) => setYtTitle(e.target.value)}
                  placeholder="Video title (required)"
                  maxLength={100}
                  className="vr-w-full vr-px-3 vr-py-2 vr-rounded-lg vr-border vr-border-gray-200 vr-text-sm vr-outline-none focus:vr-border-primary-300"
                />
                <div className="vr-grid vr-grid-cols-2 vr-gap-2">
                  <select
                    value={ytVisibility}
                    onChange={(e) => setYtVisibility(e.target.value as "public" | "private" | "unlisted")}
                    className="vr-px-3 vr-py-2 vr-rounded-lg vr-border vr-border-gray-200 vr-text-sm vr-bg-white vr-outline-none focus:vr-border-primary-300"
                  >
                    <option value="public">Public</option>
                    <option value="unlisted">Unlisted</option>
                    <option value="private">Private</option>
                  </select>
                  <select
                    value={ytCategory}
                    onChange={(e) => setYtCategory(e.target.value)}
                    className="vr-px-3 vr-py-2 vr-rounded-lg vr-border vr-border-gray-200 vr-text-sm vr-bg-white vr-outline-none focus:vr-border-primary-300"
                  >
                    <option value="1">Film & Animation</option>
                    <option value="2">Autos & Vehicles</option>
                    <option value="10">Music</option>
                    <option value="15">Pets & Animals</option>
                    <option value="17">Sports</option>
                    <option value="19">Travel & Events</option>
                    <option value="20">Gaming</option>
                    <option value="22">People & Blogs</option>
                    <option value="23">Comedy</option>
                    <option value="24">Entertainment</option>
                    <option value="25">News & Politics</option>
                    <option value="26">Howto & Style</option>
                    <option value="27">Education</option>
                    <option value="28">Science & Technology</option>
                    <option value="29">Nonprofits & Activism</option>
                  </select>
                </div>
              </div>
            )}

            {/* TikTok: Privacy (required) */}
            {selectedTypes.includes("TikTok") && (
              <div className="vr-space-y-2">
                <label className="vr-text-xs vr-font-semibold vr-text-gray-500 vr-uppercase vr-tracking-wide vr-block">
                  TikTok Privacy
                </label>
                <select
                  value={ttPrivacy}
                  onChange={(e) => setTtPrivacy(e.target.value)}
                  className="vr-w-full vr-px-3 vr-py-2 vr-rounded-lg vr-border vr-border-gray-200 vr-text-sm vr-bg-white vr-outline-none focus:vr-border-primary-300"
                >
                  <option value="PUBLIC_TO_EVERYONE">Public</option>
                  <option value="MUTUAL_FOLLOW_FRIENDS">Friends</option>
                  <option value="SELF_ONLY">Only Me</option>
                </select>
              </div>
            )}

            {/* Pinterest */}
            {selectedTypes.includes("Pinterest") && (
              <div className="vr-space-y-2">
                <label className="vr-text-xs vr-font-semibold vr-text-gray-500 vr-uppercase vr-tracking-wide vr-block">
                  Pinterest Options
                </label>
                <input
                  type="text"
                  value={pinBoard}
                  onChange={(e) => setPinBoard(e.target.value)}
                  placeholder="Board name (leave empty for default board)"
                  className="vr-w-full vr-px-3 vr-py-2 vr-rounded-lg vr-border vr-border-gray-200 vr-text-sm vr-outline-none focus:vr-border-primary-300"
                />
                <input
                  type="url"
                  value={pinLink}
                  onChange={(e) => setPinLink(e.target.value)}
                  placeholder="Pin destination link (optional)"
                  className="vr-w-full vr-px-3 vr-py-2 vr-rounded-lg vr-border vr-border-gray-200 vr-text-sm vr-outline-none focus:vr-border-primary-300"
                />
              </div>
            )}

            {/* LinkedIn: Document title (shown when document is attached) */}
            {selectedTypes.includes("LinkedIn") && mediaItems.some((m) => m.type === "document") && (
              <div className="vr-space-y-2">
                <label className="vr-text-xs vr-font-semibold vr-text-gray-500 vr-uppercase vr-tracking-wide vr-block">
                  Document Title <span className="vr-text-red-400">*</span>
                </label>
                <input
                  type="text"
                  value={liDocTitle}
                  onChange={(e) => setLiDocTitle(e.target.value)}
                  placeholder="Title for your document (required)"
                  maxLength={100}
                  className="vr-w-full vr-px-3 vr-py-2 vr-rounded-lg vr-border vr-border-gray-200 vr-text-sm vr-outline-none focus:vr-border-primary-300"
                />
              </div>
            )}

            {/* Mastodon: Spoiler text + sensitive */}
            {selectedTypes.includes("Mastodon") && (
              <div className="vr-space-y-2">
                <label className="vr-text-xs vr-font-semibold vr-text-gray-500 vr-uppercase vr-tracking-wide vr-block">
                  Mastodon Options
                </label>
                <input
                  type="text"
                  value={mstdnSpoiler}
                  onChange={(e) => setMstdnSpoiler(e.target.value)}
                  placeholder="Content warning / spoiler text (optional)"
                  className="vr-w-full vr-px-3 vr-py-2 vr-rounded-lg vr-border vr-border-gray-200 vr-text-sm vr-outline-none focus:vr-border-primary-300"
                />
                <label className="vr-flex vr-items-center vr-gap-2.5 vr-cursor-pointer">
                  <input
                    type="checkbox"
                    checked={mstdnSensitive}
                    onChange={(e) => setMstdnSensitive(e.target.checked)}
                    className="vr-w-4 vr-h-4"
                    style={{ accentColor: "#E03058" }}
                  />
                  <span className="vr-text-sm vr-text-gray-700">Mark as sensitive content</span>
                </label>
              </div>
            )}

            {/* Schedule mode */}
            <div>
              <label className="vr-text-xs vr-font-semibold vr-text-gray-500 vr-uppercase vr-tracking-wide vr-mb-2 vr-block">
                When
              </label>
              <div className="vr-flex vr-gap-2 vr-mb-3">
                <button
                  onClick={() => setMode("now")}
                  className={clsx(
                    "vr-flex-1 vr-py-2.5 vr-rounded-lg vr-text-sm vr-font-semibold vr-transition-all vr-border-0 vr-cursor-pointer",
                    mode === "now"
                      ? "vr-bg-primary-600 vr-text-white"
                      : "vr-bg-gray-100 vr-text-gray-600 hover:vr-bg-gray-200"
                  )}
                >
                  Post Now
                </button>
                <button
                  onClick={() => setMode("schedule")}
                  className={clsx(
                    "vr-flex-1 vr-py-2.5 vr-rounded-lg vr-text-sm vr-font-semibold vr-transition-all vr-border-0 vr-cursor-pointer",
                    mode === "schedule"
                      ? "vr-bg-primary-600 vr-text-white"
                      : "vr-bg-gray-100 vr-text-gray-600 hover:vr-bg-gray-200"
                  )}
                >
                  Schedule
                </button>
              </div>

              {mode === "schedule" && (
                <div>
                  <div className="vr-flex vr-gap-2">
                    <input
                      type="date" min={new Date().toISOString().split("T")[0]}
                      value={scheduleDate}
                      onChange={(e) => setScheduleDate(e.target.value)}
                      className="vr-flex-1 vr-px-3 vr-py-2.5 vr-rounded-lg vr-border vr-border-gray-200 vr-text-sm vr-outline-none focus:vr-border-primary-300"
                    />
                    <input
                      type="time"
                      value={scheduleTime}
                      onChange={(e) => setScheduleTime(e.target.value)}
                      className="vr-w-28 vr-px-3 vr-py-2.5 vr-rounded-lg vr-border vr-border-gray-200 vr-text-sm vr-outline-none focus:vr-border-primary-300"
                    />
                  </div>
                  <div className="vr-mt-2">
                    <TimezoneSelector />
                  </div>
                </div>
              )}
            </div>

            {/* Evergreen / Recycle */}
            <div>
              <label className="vr-flex vr-items-center vr-gap-3 vr-cursor-pointer">
                <input
                  type="checkbox"
                  checked={enableEvergreen}
                  onChange={(e) => setEnableEvergreen(e.target.checked)}
                  style={{ accentColor: "#E03058" }}
                  className="vr-w-4 vr-h-4"
                />
                <div>
                  <span className="vr-text-sm vr-font-medium vr-text-gray-700">Recycle this post</span>
                  <p className="vr-text-xs vr-text-gray-400">Auto-reshare at regular intervals</p>
                </div>
              </label>

              {enableEvergreen && (
                <div className="vr-mt-3 vr-ml-7 vr-flex vr-items-center vr-gap-3 vr-flex-wrap">
                  <div className="vr-flex vr-items-center vr-gap-2">
                    <span className="vr-text-xs vr-text-gray-500">Every</span>
                    <input
                      type="number"
                      value={recycleInterval}
                      onChange={(e) => setRecycleInterval(parseInt(e.target.value) || 1)}
                      min={1}
                      max={365}
                      className="vr-w-16 vr-px-2 vr-py-1.5 vr-rounded-md vr-border vr-border-gray-200 vr-text-sm vr-text-center vr-outline-none focus:vr-border-primary-300"
                    />
                    <span className="vr-text-xs vr-text-gray-500">days</span>
                  </div>
                  <div className="vr-flex vr-items-center vr-gap-2">
                    <span className="vr-text-xs vr-text-gray-500">up to</span>
                    <input
                      type="number"
                      value={maxRecycles}
                      onChange={(e) => setMaxRecycles(parseInt(e.target.value) || 1)}
                      min={1}
                      max={100}
                      className="vr-w-16 vr-px-2 vr-py-1.5 vr-rounded-md vr-border vr-border-gray-200 vr-text-sm vr-text-center vr-outline-none focus:vr-border-primary-300"
                    />
                    <span className="vr-text-xs vr-text-gray-500">times</span>
                  </div>
                </div>
              )}
            </div>

            {/* Submit */}
            <button
              onClick={handleSend}
              disabled={sending || selectedChannels.size === 0 || !message.trim() || isOverLimit || (mode === "schedule" && !scheduleDate)}
              className="vr-w-full vr-py-3 vr-rounded-lg vr-text-sm vr-font-semibold vr-text-white vr-bg-primary-600 hover:vr-bg-primary-700 vr-transition-colors disabled:vr-opacity-50 vr-border-0 vr-cursor-pointer"
            >
              {sending
                ? "Sending..."
                : mode === "schedule"
                  ? "Schedule Post"
                  : "Post Now"}
            </button>
          </div>
        ) : null}
    </>
  );

  if (embedded) return content;

  return (
    <div className="vr-space-y-5">
      <div className="vr-bg-white vr-rounded-xl vr-border vr-border-gray-200 vr-shadow-sm vr-p-7">
        {content}
      </div>
    </div>
  );
}

/** Blog Post Picker — select a blog post and share it inline */
function BlogPostPicker({ onNavigate }: { onNavigate?: (tab: string) => void }) {
  const [page, setPage] = useState(1);
  const { data, isLoading } = usePosts(page);
  const [expandedPostId, setExpandedPostId] = useState<number | null>(null);

  return (
    <div>
      <p className="vr-text-sm vr-text-gray-500 vr-mb-4">Select a blog post to share to your social channels.</p>

      {isLoading ? (
        <div className="vr-flex vr-items-center vr-justify-center vr-gap-3 vr-py-10 vr-text-gray-400 vr-text-sm">
          <div className="vr-w-5 vr-h-5 vr-border-2 vr-border-gray-200 vr-border-t-primary-600 vr-rounded-full vr-animate-spin" />
          Loading posts...
        </div>
      ) : data?.posts.length ? (
        <>
          <div className="vr-space-y-2.5">
            {data.posts.map((post) => (
              <div key={post.id}>
                <div
                  className={`vr-flex vr-items-center vr-gap-3 vr-p-3 vr-bg-white vr-border vr-rounded-lg vr-transition-all ${
                    expandedPostId === post.id
                      ? "vr-border-primary-300 vr-shadow-sm vr-rounded-b-none"
                      : "vr-border-gray-200 hover:vr-border-gray-300"
                  }`}
                >
                  {post.thumbnailUrl && (
                    <img src={post.thumbnailUrl} alt="" className="vr-w-10 vr-h-10 vr-rounded vr-object-cover vr-flex-shrink-0" />
                  )}
                  <div className="vr-flex-1 vr-min-w-0">
                    <p className="vr-text-sm vr-font-medium vr-text-gray-900 vr-truncate">{post.title}</p>
                    <p className="vr-text-xs vr-text-gray-400">{post.date}</p>
                  </div>
                  <button
                    onClick={() => setExpandedPostId(expandedPostId === post.id ? null : post.id)}
                    className={`vr-px-3 vr-py-1.5 vr-rounded-md vr-text-xs vr-font-semibold vr-border-0 vr-cursor-pointer vr-transition-colors ${
                      expandedPostId === post.id
                        ? "vr-bg-gray-200 vr-text-gray-700"
                        : "vr-bg-primary-600 vr-text-white hover:vr-bg-primary-700"
                    }`}
                  >
                    {expandedPostId === post.id ? "Close" : "Share"}
                  </button>
                </div>
                {expandedPostId === post.id && (
                  <div className="vr-border vr-border-t-0 vr-border-primary-300 vr-rounded-b-lg vr-overflow-hidden">
                    <InlineShare postId={post.id} postTitle={post.title} onDone={() => setExpandedPostId(null)} onNavigate={onNavigate} />
                  </div>
                )}
              </div>
            ))}
          </div>

          {data.totalPages > 1 && (
            <div className="vr-flex vr-items-center vr-justify-between vr-mt-4 vr-pt-4 vr-border-t vr-border-gray-100">
              <button
                onClick={() => setPage((p) => Math.max(1, p - 1))}
                disabled={page <= 1}
                className="vr-px-3 vr-py-1.5 vr-bg-gray-100 vr-text-gray-600 vr-rounded-md vr-text-xs disabled:vr-opacity-40 vr-border-0 vr-cursor-pointer"
              >
                Previous
              </button>
              <span className="vr-text-xs vr-text-gray-400">Page {data.currentPage} of {data.totalPages}</span>
              <button
                onClick={() => setPage((p) => Math.min(data.totalPages, p + 1))}
                disabled={page >= data.totalPages}
                className="vr-px-3 vr-py-1.5 vr-bg-gray-100 vr-text-gray-600 vr-rounded-md vr-text-xs disabled:vr-opacity-40 vr-border-0 vr-cursor-pointer"
              >
                Next
              </button>
            </div>
          )}
        </>
      ) : (
        <div className="vr-text-center vr-py-8">
          <i className="fa-solid fa-pen-to-square vr-text-3xl vr-text-gray-200 vr-mb-3" />
          <p className="vr-text-sm vr-text-gray-500">No published blog posts yet.</p>
        </div>
      )}
    </div>
  );
}