import { useState } from "react";
import Compose from "./Compose";
import Calendar from "./Calendar";
import clsx from "clsx";

type SubTab = "compose" | "calendar" | "blog";
type Tab = "dashboard" | "scheduler" | "autopost" | "analytics" | "profiles" | "settings";

interface Props {
  initialSubTab?: SubTab;
  scheduleForDate?: string | null;
  onScheduleDateConsumed?: () => void;
  onNavigate?: (tab: string) => void;
}

export default function Scheduler({ initialSubTab, scheduleForDate, onScheduleDateConsumed, onNavigate }: Props) {
  const [subTab, setSubTab] = useState<SubTab>(initialSubTab || "compose");

  // When Compose or BlogPost successfully posts, switch to Calendar sub-tab
  const handleNavigateToCalendar = () => {
    setSubTab("calendar");
  };

  // When Calendar's + button is clicked, switch to Compose with the date
  const [composeDate, setComposeDate] = useState<string | null>(scheduleForDate || null);
  const handleCreatePost = (date?: string) => {
    if (date) setComposeDate(date);
    setSubTab("compose");
  };

  // After compose consumes the date, clear it
  const handleDateConsumed = () => {
    setComposeDate(null);
    onScheduleDateConsumed?.();
  };

  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-overflow-hidden">
        {/* Header with sub-tabs */}
        <div className="vr-p-6 vr-pb-0">
          <div className="vr-mb-4">
            <h2 className="vr-text-base vr-font-bold vr-text-gray-900">Scheduler</h2>
            <p className="vr-text-xs vr-text-gray-500 vr-mt-0.5">Create, schedule, and manage your social media posts.</p>
          </div>

          <div className="vr-flex vr-gap-1 vr-border-b vr-border-gray-200 vr--mx-6 vr-px-6">
            {([
              { id: "compose" as SubTab, label: "Compose", icon: "fa-solid fa-pen-to-square" },
              { id: "calendar" as SubTab, label: "Calendar", icon: "fa-solid fa-calendar-days" },
              { id: "blog" as SubTab, label: "From Blog Post", icon: "fa-solid fa-blog" },
            ]).map((tab) => (
              <button
                key={tab.id}
                onClick={() => setSubTab(tab.id)}
                className={clsx(
                  "vr-flex vr-items-center vr-gap-1.5 vr-px-4 vr-py-2.5 vr-text-sm vr-font-medium vr-border-0 vr-bg-transparent vr-cursor-pointer vr-transition-colors vr-border-b-2 vr--mb-px",
                  subTab === tab.id
                    ? "vr-border-primary-600 vr-text-primary-600"
                    : "vr-border-transparent vr-text-gray-500 hover:vr-text-gray-700"
                )}
              >
                <i className={tab.icon} style={{ fontSize: "11px" }} />
                {tab.label}
              </button>
            ))}
          </div>
        </div>

        {/* Sub-tab content */}
        <div className="vr-p-6">
          {subTab === "compose" && (
            <Compose
              scheduleForDate={composeDate}
              onScheduleDateConsumed={handleDateConsumed}
              onNavigate={handleNavigateToCalendar as any}
              embedded
            />
          )}

          {subTab === "blog" && (
            <Compose
              onNavigate={handleNavigateToCalendar as any}
              embedded
              initialMode="blog"
            />
          )}
        </div>
      </div>

      {/* Calendar renders outside the card — it has its own card */}
      {subTab === "calendar" && (
        <Calendar onCreatePost={handleCreatePost} onNavigate={onNavigate} />
      )}
    </div>
  );
}