"use client";

import { BarChart3 } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { DashboardLayout } from "@/components/layout/dashboard-layout";
import { OnboardingFooter } from "@/components/layout/onboarding-footer";
import { PageHeader } from "@/components/layout/page-header";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { useMounted } from "@/hooks/use-mounted";
import { cn } from "@/lib/utils";
import { buildPlannedScheduleView } from "@/lib/scheduling/resolve-schedule";
import { flushProjectsSync } from "@/lib/client/projects-sync";
import { selectActiveProject } from "@/hooks/use-projects-hydrated";
import { useProjectsStore } from "@/store/projects-store";

export default function SmartSchedulePage() {
  const mounted = useMounted();
  const activeProject = useProjectsStore(selectActiveProject);
  const schedule = useProjectsStore((s) => s.getActiveData()?.schedule);
  const updateActiveSchedule = useProjectsStore((s) => s.updateActiveSchedule);
  const saveActiveSchedule = useProjectsStore((s) => s.saveActiveSchedule);

  const [postsPerDay, setPostsPerDay] = useState<1 | 2>(schedule?.postsPerDay ?? 2);
  const [saved, setSaved] = useState(schedule?.saved ?? false);
  const [syncing, setSyncing] = useState(false);
  const [syncError, setSyncError] = useState("");
  const timeSeed = schedule?.scheduleSeed ?? 0;

  useEffect(() => {
    setPostsPerDay(schedule?.postsPerDay ?? 2);
    setSaved(schedule?.saved ?? false);
  }, [activeProject?.id, schedule?.postsPerDay, schedule?.saved]);

  const plannedTimes = useMemo(() => {
    if (!mounted || activeProject?.status !== "active" || !activeProject.id) return [];
    return buildPlannedScheduleView({
      projectId: activeProject.id,
      timezone: activeProject.timezone,
      postsPerDay,
      scheduleSeed: timeSeed || undefined,
    }).slotTimes;
  }, [mounted, postsPerDay, activeProject?.id, activeProject?.status, activeProject?.timezone, timeSeed]);

  const handleSave = () => {
    updateActiveSchedule({ postsPerDay });
    saveActiveSchedule();
    setSaved(true);
    setSyncError("");
    setSyncing(true);
    void flushProjectsSync()
      .then(() => setSyncing(false))
      .catch((err) => {
        setSyncing(false);
        setSyncError(err instanceof Error ? err.message : "Server sync failed");
      });
  };

  return (
    <DashboardLayout>
      <PageHeader
        title="Smart Schedule"
        subtitle="Per-project schedule — times are chosen at random for optimal audience reach"
      />
      <div className="flex-1 px-4 pb-32 pt-2 sm:px-6 lg:px-8">
        {activeProject?.status === "paused" && (
          <div className="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-800">
            Project is paused — auto-planned times are hidden until the project is Active.
          </div>
        )}

        <Card className="mx-auto max-w-3xl">
          <div className="space-y-6">
            <div>
              <h3 className="text-sm font-semibold text-gray-900">How many posts per day?</h3>
              <p className="mt-1 text-sm text-gray-500">
                Saved for <strong>{activeProject?.name ?? "this project"}</strong>. The system
                picks random optimal times within morning and evening windows (2 posts/day).
              </p>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              {([1, 2] as const).map((count) => (
                <button
                  key={count}
                  type="button"
                  onClick={() => {
                    setPostsPerDay(count);
                    setSaved(false);
                  }}
                  className={cn(
                    "rounded-xl border-2 p-6 text-left transition-colors",
                    postsPerDay === count
                      ? "border-brand-600 bg-brand-50/30"
                      : "border-gray-200 hover:border-gray-300",
                  )}
                >
                  <span className="text-3xl font-bold text-action">{count}</span>
                  <p className="mt-2 text-sm font-medium text-gray-700">
                    {count === 1 ? "post per day" : "posts per day"}
                  </p>
                </button>
              ))}
            </div>

            <div>
              <div className="mb-3 flex items-center gap-2 text-sm font-semibold text-gray-900">
                <BarChart3 className="h-4 w-4 text-gray-500" />
                Today&apos;s auto-planned times (audience-optimized)
              </div>
              <div className="min-h-[120px] rounded-lg border border-gray-100 bg-gray-50/50 p-4">
                {plannedTimes.length === 0 ? (
                  <p className="text-sm text-gray-400">Activate project to see planned times.</p>
                ) : (
                  <ul className="space-y-2">
                    {plannedTimes.map((time) => (
                      <li
                        key={time}
                        className="rounded-lg bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm"
                      >
                        {time}
                      </li>
                    ))}
                  </ul>
                )}
              </div>
            </div>

            {syncError && (
              <p className="text-sm text-red-600">
                Server sync failed: {syncError}. Auto-publish needs this saved on the server.
              </p>
            )}
            {saved && !syncError && (
              <p className="text-sm text-green-700">
                {syncing ? "Syncing schedule to server…" : "Schedule saved and synced for auto-publish."}
              </p>
            )}

            <div className="flex justify-end pt-2">
              <Button type="button" onClick={handleSave} disabled={syncing}>
                {syncing ? "Saving…" : "Save Schedule"}
              </Button>
            </div>
          </div>
        </Card>
      </div>
      <OnboardingFooter currentStep={4} />
    </DashboardLayout>
  );
}