import { useState, useEffect } from "react";
import { useChannels } from "../hooks/useChannels";
import { useSocialSets } from "../hooks/useSocialSets";
import { wpApi } from "../api/wp-api";
import { toast } from "react-toastify";
import clsx from "clsx";
import TimezoneSelector from "./TimezoneSelector";
import ChannelSelector from "./ChannelSelector";

interface Props {
  postId: number;
  postTitle: string;
  onDone: () => void;
  onNavigate?: (tab: string) => void;
}

export default function InlineShare({ postId, postTitle, onDone, onNavigate }: Props) {
  const { channels } = useChannels();
  const { socialSets } = useSocialSets();
  const socialSetTimezone = socialSets[0]?.timezone || "UTC";

  const [selectedChannels, setSelectedChannels] = useState<Set<string>>(new Set());
  const [mode, setMode] = useState<"now" | "schedule">("now");
  const [scheduleDate, setScheduleDate] = useState("");
  const [scheduleTime, setScheduleTime] = useState("09:00");
  const [sharing, setSharing] = useState(false);
  const [result, setResult] = useState<{ sent: number; failed: number } | null>(null);

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

  // Pre-select all active channels
  useEffect(() => {
    setSelectedChannels(new Set(activeChannels.map((ch) => ch.id)));
  }, [channels]);

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

  const handleShare = async () => {
    setSharing(true);
    setResult(null);
    try {
      const overrides: Record<string, { enabled: boolean; caption: string }> = {};
      channels.forEach((ch) => {
        overrides[ch.id] = { enabled: selectedChannels.has(ch.id), caption: "" };
      });

      const payload: any = {
        overrides: { globalEnabled: true, channels: overrides },
      };

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

      const res = await wpApi.post<any>(`share/${postId}`, payload);

      if (res.success) {
        setResult({ sent: res.sent, failed: res.failed });
        const msg = mode === "schedule"
          ? `Scheduled to ${res.sent} profile${res.sent !== 1 ? "s" : ""}`
          : `Shared to ${res.sent} profile${res.sent !== 1 ? "s" : ""}`;

        if (onNavigate) {
          sessionStorage.setItem("viraly_post_success", msg);
          onNavigate("calendar");
        } else {
          toast.success(msg);
          setTimeout(() => onDone(), 2000);
        }
      } else {
        toast.error("Failed to share.");
      }
    } catch {
      toast.error("Failed to share.");
    } finally {
      setSharing(false);
    }
  };

  if (result) {
    return (
      <div className="vr-p-4 vr-bg-emerald-50 vr-border vr-border-emerald-200 vr-rounded-lg vr-text-center">
        <i className="fa-solid fa-circle-check vr-text-emerald-500 vr-text-lg vr-mb-1" />
        <p className="vr-text-sm vr-font-medium vr-text-emerald-700">
          {mode === "schedule" ? "Scheduled" : "Shared"} to {result.sent} profile{result.sent !== 1 ? "s" : ""}
          {result.failed > 0 && ` (${result.failed} failed)`}
        </p>
      </div>
    );
  }

  return (
    <div className="vr-p-4 vr-bg-gray-50 vr-border vr-border-gray-200 vr-rounded-lg vr-space-y-4">
      {/* Channels */}
      <div>
        <p className="vr-text-xs vr-font-semibold vr-text-gray-500 vr-uppercase vr-tracking-wide vr-mb-2">
          Profiles ({selectedChannels.size} selected)
        </p>
        <ChannelSelector
          channels={activeChannels}
          selected={selectedChannels}
          onToggle={toggleChannel}
        />
      </div>

      {/* When */}
      <div className="vr-flex vr-items-center vr-gap-3 vr-flex-wrap">
        <div className="vr-flex vr-gap-1.5">
          <button
            onClick={() => setMode("now")}
            className={clsx(
              "vr-px-3 vr-py-1.5 vr-rounded-md vr-text-xs vr-font-semibold vr-transition-all vr-border-0 vr-cursor-pointer",
              mode === "now"
                ? "vr-bg-primary-600 vr-text-white"
                : "vr-bg-white vr-text-gray-600 hover:vr-bg-gray-100"
            )}
          >
            Now
          </button>
          <button
            onClick={() => setMode("schedule")}
            className={clsx(
              "vr-px-3 vr-py-1.5 vr-rounded-md vr-text-xs vr-font-semibold vr-transition-all vr-border-0 vr-cursor-pointer",
              mode === "schedule"
                ? "vr-bg-primary-600 vr-text-white"
                : "vr-bg-white vr-text-gray-600 hover:vr-bg-gray-100"
            )}
          >
            Schedule
          </button>
        </div>

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

      {/* Actions */}
      <div className="vr-flex vr-items-center vr-gap-2">
        <button
          onClick={handleShare}
          disabled={sharing || selectedChannels.size === 0 || (mode === "schedule" && !scheduleDate)}
          className="vr-inline-flex vr-items-center vr-gap-2 vr-px-5 vr-py-2 vr-bg-primary-600 vr-text-white vr-rounded-md vr-text-xs vr-font-semibold hover:vr-bg-primary-700 vr-transition-colors disabled:vr-opacity-50 vr-border-0 vr-cursor-pointer"
        >
          {sharing ? (
            <>
              <div className="vr-w-3.5 vr-h-3.5 vr-border-2 vr-border-white/30 vr-border-t-white vr-rounded-full vr-animate-spin" />
              {mode === "schedule" ? "Scheduling..." : "Sharing..."}
            </>
          ) : (
            <>
              <i className="fa-solid fa-share-nodes" style={{ fontSize: "10px" }} />
              {mode === "schedule" ? `Schedule (${selectedChannels.size})` : `Share Now (${selectedChannels.size})`}
            </>
          )}
        </button>
        <button
          onClick={onDone}
          className="vr-px-4 vr-py-2 vr-text-xs vr-font-medium vr-text-gray-500 hover:vr-text-gray-700 vr-transition-colors vr-border-0 vr-bg-transparent vr-cursor-pointer"
        >
          Cancel
        </button>
      </div>
    </div>
  );
}