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 TimezoneInline from "./TimezoneInline";

interface Props {
  postId: number;
  postTitle: string;
  isOpen: boolean;
  onClose: () => void;
}

export default function ShareModal({ postId, postTitle, isOpen, onClose }: Props) {
  const { channels } = useChannels();
  const { socialSets } = useSocialSets();
  const socialSetTimezone = socialSets[0]?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone;
  const [selectedChannels, setSelectedChannels] = useState<Set<string>>(new Set());
  const [sharing, setSharing] = useState(false);
  const [mode, setMode] = useState<"now" | "schedule">("now");
  const [scheduleDate, setScheduleDate] = useState("");
  const [scheduleTime, setScheduleTime] = useState("09:00");

  // Select all active channels by default when modal opens
  useEffect(() => {
    if (isOpen && channels.length > 0) {
      const activeIds = new Set(
        channels.filter((ch) => ch.status === "Active").map((ch) => ch.id)
      );
      setSelectedChannels(activeIds);
    }
  }, [isOpen, channels]);

  if (!isOpen) return null;

  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);
    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 result = await wpApi.post<any>(`share/${postId}`, payload);

      if (result.success) {
        toast.success(
          mode === "schedule"
            ? `Scheduled to ${result.sent} channel${result.sent !== 1 ? "s" : ""}`
            : `Shared to ${result.sent} channel${result.sent !== 1 ? "s" : ""}`
        );
        onClose();
      } else {
        toast.error("Failed to share. Please try again.");
      }
    } catch {
      toast.error("Failed to share. Please try again.");
    } finally {
      setSharing(false);
    }
  };

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

  return (
    <div
      className="vr-fixed vr-inset-0 vr-z-[100000] vr-flex vr-items-center vr-justify-center"
      style={{ backgroundColor: "rgba(0,0,0,0.5)" }}
      onClick={(e) => {
        if (e.target === e.currentTarget) onClose();
      }}
    >
      <div className="vr-bg-white vr-rounded-xl vr-shadow-2xl vr-w-full vr-max-w-md vr-mx-4 vr-overflow-hidden">
        {/* Header */}
        <div className="vr-flex vr-items-center vr-justify-between vr-px-6 vr-py-4 vr-border-b vr-border-gray-200">
          <div>
            <h3 className="vr-text-base vr-font-bold vr-text-gray-900">Share to Social Media</h3>
            <p className="vr-text-xs vr-text-gray-500 vr-mt-0.5 vr-truncate vr-max-w-[280px]">{postTitle}</p>
          </div>
          <button
            onClick={onClose}
            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-cursor-pointer"
          >
            <i className="fa-solid fa-xmark" />
          </button>
        </div>

        {/* Channels */}
        <div className="vr-px-6 vr-py-4 vr-max-h-[300px] vr-overflow-y-auto">
          <p className="vr-text-xs vr-font-semibold vr-text-gray-500 vr-mb-3 vr-uppercase vr-tracking-wide">
            Select Channels ({selectedChannels.size} of {activeChannels.length})
          </p>
          <div className="vr-space-y-2">
            {activeChannels.map((ch) => (
              <label
                key={ch.id}
                className={clsx(
                  "vr-flex vr-items-center vr-gap-3 vr-p-3 vr-rounded-lg vr-border vr-cursor-pointer vr-transition-all",
                  selectedChannels.has(ch.id)
                    ? "vr-border-primary-300 vr-bg-primary-50"
                    : "vr-border-gray-200 hover:vr-border-gray-300"
                )}
              >
                <input
                  type="checkbox"
                  checked={selectedChannels.has(ch.id)}
                  onChange={() => toggleChannel(ch.id)}
                  style={{ accentColor: "#E03058" }}
                  className="vr-w-4 vr-h-4"
                />
                <div className="vr-flex-1 vr-min-w-0">
                  <p className="vr-text-sm vr-font-medium vr-text-gray-900 vr-truncate">{ch.name}</p>
                  <p className="vr-text-xs vr-text-gray-400">{ch.type}</p>
                </div>
              </label>
            ))}
          </div>

          {activeChannels.length === 0 && (
            <p className="vr-text-sm vr-text-gray-400 vr-text-center vr-py-4">No active channels. Connect channels first.</p>
          )}
        </div>

        {/* Mode selector */}
        <div className="vr-px-6 vr-py-3 vr-border-t vr-border-gray-100 vr-bg-gray-50">
          <div className="vr-flex vr-gap-2 vr-mb-3">
            <button
              onClick={() => setMode("now")}
              className={clsx(
                "vr-flex-1 vr-py-2 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 vr-border vr-border-gray-200"
              )}
            >
              Share Now
            </button>
            <button
              onClick={() => setMode("schedule")}
              className={clsx(
                "vr-flex-1 vr-py-2 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 vr-border vr-border-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 vr-rounded-md 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 vr-rounded-md vr-border vr-border-gray-200 vr-text-sm vr-outline-none focus:vr-border-primary-300"
                />
              </div>
              <div className="vr-mt-2">
                <TimezoneInline />
              </div>
            </div>
          )}
        </div>

        {/* Footer */}
        <div className="vr-px-6 vr-py-4 vr-border-t vr-border-gray-200 vr-flex vr-gap-3">
          <button
            onClick={onClose}
            className="vr-flex-1 vr-py-2.5 vr-rounded-lg vr-text-sm vr-font-medium vr-text-gray-600 vr-bg-gray-100 hover:vr-bg-gray-200 vr-transition-colors vr-border-0 vr-cursor-pointer"
          >
            Cancel
          </button>
          <button
            onClick={handleShare}
            disabled={sharing || selectedChannels.size === 0 || (mode === "schedule" && !scheduleDate)}
            className="vr-flex-1 vr-py-2.5 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"
          >
            {sharing
              ? "Sending..."
              : mode === "schedule"
                ? `Schedule (${selectedChannels.size})`
                : `Share Now (${selectedChannels.size})`}
          </button>
        </div>
      </div>
    </div>
  );
}