import { useEffect, useState } from "react";
import { useSettings } from "../hooks/useSettings";
import { useChannels } from "../hooks/useChannels";
import { toast } from "react-toastify";
import clsx from "clsx";
import TimezoneSelector from "../components/TimezoneSelector";
import ChannelSelector from "../components/ChannelSelector";

const MERGE_TAGS = [
  { tag: "{TITLE}", label: "Title" },
  { tag: "{EXCERPT}", label: "Excerpt" },
  { tag: "{POST_LINK}", label: "Link" },
  { tag: "{AUTHOR}", label: "Author" },
  { tag: "{TAGS}", label: "Tags" },
  { tag: "{CATEGORIES}", label: "Categories" },
];

interface Props {
  onNavigate?: (tab: string) => void;
}

export default function AutoPost({ onNavigate }: Props) {
  const { settings, isLoading, save } = useSettings();
  const { channels } = useChannels();
  const activeChannels = channels.filter((ch) => ch.status === "Active");
  const [saving, setSaving] = useState(false);

  // Local form state
  const [enabled, setEnabled] = useState(false);
  const [timing, setTiming] = useState<"instant" | "delayed" | "scheduled">("instant");
  const [delayValue, setDelayValue] = useState(5);
  const [delayUnit, setDelayUnit] = useState<"minutes" | "hours" | "days">("minutes");
  const [scheduledTime, setScheduledTime] = useState("09:00");
  const [timezone, setTimezone] = useState("America/New_York");
  const [template, setTemplate] = useState("{TITLE}\n\n{EXCERPT}\n\n{POST_LINK}");
  const [includeImage, setIncludeImage] = useState(true);
  const [platforms, setPlatforms] = useState<string[]>([]); // Now stores channel IDs, not platform types
  const [postTypes, setPostTypes] = useState<string[]>(["post"]);

  // Sync from API
  useEffect(() => {
    if (!settings) return;
    setEnabled(settings.enabled);
    setTiming(settings.timing);
    setDelayValue(settings.delayValue);
    setDelayUnit(settings.delayUnit);
    setScheduledTime(settings.scheduledTime);
    setTimezone(settings.timezone);
    setTemplate(settings.template);
    setIncludeImage(settings.includeImage);
    setPlatforms(settings.platforms || []);
    setPostTypes(settings.postTypes || ["post"]);
  }, [settings]);

  const handleSave = async () => {
    setSaving(true);
    try {
      await save({
        enabled, timing, delayValue, delayUnit, scheduledTime,
        timezone, template, includeImage, platforms, postTypes,
      });
      toast.success("Settings saved.");
    } catch {
      toast.error("Failed to save.");
    } finally {
      setSaving(false);
    }
  };

  const insertTag = (tag: string) => {
    const el = document.getElementById("autopost-template") as HTMLTextAreaElement;
    if (!el) { setTemplate((t) => t + " " + tag); return; }
    const start = el.selectionStart;
    const end = el.selectionEnd;
    const newVal = template.slice(0, start) + tag + template.slice(end);
    setTemplate(newVal);
    setTimeout(() => { el.focus(); el.setSelectionRange(start + tag.length, start + tag.length); }, 0);
  };

  const toggleChannel = (channelId: string) => {
    setPlatforms((prev) => prev.includes(channelId) ? prev.filter((x) => x !== channelId) : [...prev, channelId]);
  };

  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>
    );
  }

  return (
    <div className="vr-bg-white vr-rounded-xl vr-border vr-border-gray-200 vr-shadow-sm vr-overflow-hidden">
      {/* Header with toggle */}
      <div className="vr-flex vr-items-center vr-justify-between vr-p-6 vr-border-b vr-border-gray-100">
        <div>
          <h2 className="vr-text-base vr-font-bold vr-text-gray-900">Blog to Social</h2>
          <p className="vr-text-xs vr-text-gray-500 vr-mt-0.5">
            {enabled
              ? "Every new blog post will be shared to your selected social profiles."
              : "Turn on to automatically share blog posts to social media when you publish."}
          </p>
        </div>
        <button
          onClick={async () => {
            const newVal = !enabled;
            setEnabled(newVal);
            try {
              await save({ enabled: newVal });
              toast.success(newVal ? "Auto-post enabled" : "Auto-post disabled");
            } catch {
              setEnabled(!newVal); // revert
              toast.error("Failed to update.");
            }
          }}
          className="vr-relative vr-flex-shrink-0 vr-border-0 vr-cursor-pointer vr-p-0"
          style={{
            width: "48px", height: "26px", borderRadius: "13px",
            backgroundColor: enabled ? "#E03058" : "#d1d5db",
            transition: "background-color 0.2s",
          }}
        >
          <span style={{
            position: "absolute", top: "2px",
            left: enabled ? "24px" : "2px",
            width: "22px", height: "22px", borderRadius: "50%",
            backgroundColor: "#fff", boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
            transition: "left 0.2s",
          }} />
        </button>
      </div>

      {/* Settings — all in one scrollable section */}
      {enabled && (
        <div className="vr-p-6 vr-space-y-6">

          {/* 1. Which profiles */}
          <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 ({platforms.filter((id) => activeChannels.some((ch) => ch.id === id)).length})
            </label>
            <p className="vr-text-xs vr-text-gray-500 vr-mb-3">Select which profiles receive your blog posts.</p>

            {activeChannels.length > 0 ? (
              <ChannelSelector
                channels={activeChannels}
                selected={platforms}
                onToggle={toggleChannel}
                showNames
              />
            ) : (
              <div className="vr-text-center vr-py-6 vr-bg-gray-50 vr-rounded-lg">
                <p className="vr-text-xs vr-text-gray-500">No social profiles connected.</p>
                <button
                  onClick={() => onNavigate?.("profiles")}
                  className="vr-text-xs vr-text-primary-600 vr-font-semibold vr-mt-1 vr-border-0 vr-bg-transparent vr-cursor-pointer vr-p-0"
                >
                  Connect profiles →
                </button>
              </div>
            )}

            {platforms.filter((id) => activeChannels.some((ch) => ch.id === id)).length === 0 && activeChannels.length > 0 && (
              <p className="vr-text-xs vr-text-red-500 vr-mt-2">Select at least one profile.</p>
            )}
          </div>

          {/* 2. When to post */}
          <div>
            <h3 className="vr-text-sm vr-font-semibold vr-text-gray-900 vr-mb-1">When to post?</h3>
            <p className="vr-text-xs vr-text-gray-500 vr-mb-3">Choose when the social post goes out after publishing.</p>
            <div className="vr-flex vr-gap-2 vr-mb-3">
              {[
                { value: "instant" as const, label: "Immediately" },
                { value: "delayed" as const, label: "After a delay" },
                { value: "scheduled" as const, label: "At a set time" },
              ].map((opt) => (
                <button
                  key={opt.value}
                  onClick={() => setTiming(opt.value)}
                  className={clsx(
                    "vr-px-4 vr-py-2 vr-rounded-lg vr-text-xs vr-font-semibold vr-transition-all vr-border-0 vr-cursor-pointer",
                    timing === opt.value
                      ? "vr-bg-primary-600 vr-text-white"
                      : "vr-bg-gray-100 vr-text-gray-600 hover:vr-bg-gray-200"
                  )}
                >
                  {opt.label}
                </button>
              ))}
            </div>

            {timing === "delayed" && (
              <div className="vr-flex vr-items-center vr-gap-2 vr-ml-1">
                <span className="vr-text-xs vr-text-gray-500">Wait</span>
                <input
                  type="number" value={delayValue} min={1}
                  onChange={(e) => setDelayValue(parseInt(e.target.value) || 1)}
                  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"
                />
                <select
                  value={delayUnit}
                  onChange={(e) => setDelayUnit(e.target.value as "minutes" | "hours" | "days")}
                  className="vr-px-2 vr-py-1.5 vr-rounded-md vr-border vr-border-gray-200 vr-text-sm vr-bg-white vr-outline-none focus:vr-border-primary-300"
                >
                  <option value="minutes">minutes</option>
                  <option value="hours">hours</option>
                  <option value="days">days</option>
                </select>
                <span className="vr-text-xs vr-text-gray-500">after publishing</span>
              </div>
            )}

            {timing === "scheduled" && (
              <div className="vr-flex vr-items-center vr-gap-2 vr-ml-1">
                <span className="vr-text-xs vr-text-gray-500">Daily at</span>
                <input
                  type="time" value={scheduledTime}
                  onChange={(e) => setScheduledTime(e.target.value)}
                  className="vr-px-2 vr-py-1.5 vr-rounded-md vr-border vr-border-gray-200 vr-text-sm vr-outline-none focus:vr-border-primary-300"
                />
                <TimezoneSelector />
              </div>
            )}
          </div>

          {/* 3. What to say */}
          <div>
            <h3 className="vr-text-sm vr-font-semibold vr-text-gray-900 vr-mb-1">What to say?</h3>
            <p className="vr-text-xs vr-text-gray-500 vr-mb-3">Customize the social post template. Use tags to insert content from your blog post.</p>

            <div className="vr-flex vr-flex-wrap vr-gap-1.5 vr-mb-2">
              {MERGE_TAGS.map((t) => (
                <button
                  key={t.tag}
                  onClick={() => insertTag(t.tag)}
                  className={clsx(
                    "vr-px-2.5 vr-py-1 vr-rounded-md vr-text-xs vr-font-medium vr-transition-all vr-border-0 vr-cursor-pointer",
                    template.includes(t.tag)
                      ? "vr-bg-emerald-100 vr-text-emerald-700"
                      : "vr-bg-gray-100 vr-text-gray-600 hover:vr-bg-gray-200"
                  )}
                >
                  {t.label}
                </button>
              ))}
            </div>

            <textarea
              id="autopost-template"
              value={template}
              onChange={(e) => setTemplate(e.target.value)}
              rows={4}
              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 vr-font-mono"
            />

            <label className="vr-flex vr-items-center vr-gap-2.5 vr-mt-3 vr-cursor-pointer">
              <input
                type="checkbox" checked={includeImage}
                onChange={(e) => setIncludeImage(e.target.checked)}
                className="vr-w-4 vr-h-4 vr-rounded"
                style={{ accentColor: "#E03058" }}
              />
              <span className="vr-text-sm vr-text-gray-700">Include featured image</span>
            </label>
          </div>

          {/* 4. Which post types */}
          <div>
            <h3 className="vr-text-sm vr-font-semibold vr-text-gray-900 vr-mb-1">Which content?</h3>
            <p className="vr-text-xs vr-text-gray-500 vr-mb-3">Choose which content types get shared to social.</p>
            <div className="vr-flex vr-gap-2">
              {["post", "page"].map((pt) => (
                <button
                  key={pt}
                  onClick={() => setPostTypes((prev) => prev.includes(pt) ? prev.filter((x) => x !== pt) : [...prev, pt])}
                  className={clsx(
                    "vr-px-4 vr-py-2 vr-rounded-lg vr-text-xs vr-font-medium vr-transition-all vr-border-0 vr-cursor-pointer",
                    postTypes.includes(pt)
                      ? "vr-bg-primary-600 vr-text-white"
                      : "vr-bg-gray-100 vr-text-gray-600 hover:vr-bg-gray-200"
                  )}
                >
                  {pt.charAt(0).toUpperCase() + pt.slice(1)}s
                </button>
              ))}
            </div>
          </div>

          {/* Save */}
          <div className="vr-pt-4 vr-border-t vr-border-gray-100 vr-flex vr-justify-end">
            <button
              onClick={handleSave}
              disabled={saving}
              className="vr-inline-flex vr-items-center vr-gap-2 vr-px-6 vr-py-2.5 vr-bg-primary-600 vr-text-white vr-rounded-lg vr-text-sm vr-font-semibold hover:vr-bg-primary-700 vr-transition-colors disabled:vr-opacity-50 vr-border-0 vr-cursor-pointer"
            >
              {saving ? "Saving..." : "Save Settings"}
            </button>
          </div>
        </div>
      )}

      {/* Disabled state - simple explanation */}
      {!enabled && (
        <div className="vr-p-8 vr-text-center">
          <i className="fa-solid fa-rotate vr-text-3xl vr-text-gray-200 vr-mb-3" />
          <p className="vr-text-sm vr-text-gray-500 vr-max-w-sm vr-mx-auto">
            When enabled, every time you publish a blog post, it will automatically be shared to your selected social profiles.
          </p>
        </div>
      )}
    </div>
  );
}