"use client";

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 { Toggle } from "@/components/ui/toggle";
import { cn } from "@/lib/utils";
import { flushProjectsSync } from "@/lib/client/projects-sync";
import { selectActiveProject } from "@/hooks/use-projects-hydrated";
import { useProjectsStore } from "@/store/projects-store";
import { useState } from "react";
import Link from "next/link";

const RULES = [
  {
    id: "high-score",
    icon: "📈",
    title: "Require High Score (optional)",
    description:
      "Optional filter only. When ON, skip posts with engagement score below 80. When OFF (default), every draft publishes at schedule time — no approval step.",
    badge: "Score > 80",
    badgeColor: "bg-green-100 text-green-700",
    defaultOn: false,
    highlighted: false,
  },
  {
    id: "loop-sequence",
    icon: "🔄",
    title: "Loop Post Sequence",
    description:
      "At each morning/evening slot, auto-generate the next post and publish it directly to connected social accounts (no approve step). Keep this ON for hands-free posting.",
    badge: "Auto gen + publish",
    badgeColor: "bg-blue-100 text-blue-700",
    defaultOn: true,
    highlighted: true,
  },
  {
    id: "smart-timing",
    icon: "⏰",
    title: "Smart Random Timing",
    description:
      "Auto-schedule at optimal random times within morning and evening windows",
    badge: "Audience-optimized",
    badgeColor: "bg-purple-100 text-purple-700",
    defaultOn: true,
    highlighted: false,
  },
] as const;

export default function AutomationPage() {
  const activeProject = useProjectsStore(selectActiveProject);
  const automation = useProjectsStore((s) => s.getActiveData()?.automation ?? {});
  const setActiveAutomationRule = useProjectsStore((s) => s.setActiveAutomationRule);
  const [saving, setSaving] = useState(false);
  const [savedMsg, setSavedMsg] = useState("");

  const loopOn = automation["loop-sequence"] ?? true;

  const handleToggle = async (ruleId: string, checked: boolean) => {
    setActiveAutomationRule(ruleId, checked);
    setSaving(true);
    setSavedMsg("");
    try {
      await flushProjectsSync();
      setSavedMsg(
        ruleId === "loop-sequence"
          ? checked
            ? "Loop Post Sequence ON — cron will auto-generate and publish at your schedule slots."
            : "Loop Post Sequence OFF — cron will only publish drafts already in the queue."
          : "Automation rule saved to server.",
      );
    } catch {
      setSavedMsg("Saved locally — server sync failed. Try again.");
    } finally {
      setSaving(false);
    }
  };

  return (
    <DashboardLayout>
      <PageHeader
        title="Automation Rules"
        subtitle={`Per-project automation for ${activeProject?.name ?? "active project"}`}
      />
      <div className="flex-1 px-4 pb-32 pt-2 sm:px-6 lg:px-8">
        <div
          className={cn(
            "mb-6 rounded-lg border px-4 py-3 text-sm",
            loopOn
              ? "border-green-200 bg-green-50 text-green-900"
              : "border-amber-200 bg-amber-50 text-amber-950",
          )}
        >
          {loopOn ? (
            <p>
              <strong>Loop Post Sequence is ON.</strong> At each Smart Schedule slot, the server
              generates the next post and publishes it to LinkedIn (and other connected accounts)
              — no approve step.{" "}
              <Link href="/live-generation" className="font-medium underline">
                Open Live Generation
              </Link>{" "}
              to monitor or Generate Now early.
            </p>
          ) : (
            <p>
              <strong>Loop Post Sequence is OFF.</strong> Toggle it ON below so cron can
              auto-generate and publish at morning/evening times. Without it, you must generate
              drafts manually in Live Generation.
            </p>
          )}
        </div>

        <div className="grid gap-5 lg:grid-cols-3">
          {RULES.map((rule) => (
            <div
              key={rule.id}
              className={cn(
                "rounded-[var(--radius-card)] border bg-white p-6 shadow-[var(--shadow-card)]",
                rule.highlighted ? "border-brand-600/40 ring-1 ring-brand-600/10" : "border-gray-100",
              )}
            >
              <div className="mb-4 flex items-start justify-between">
                <span className="flex h-9 w-9 items-center justify-center rounded-lg bg-gray-50 text-lg">
                  {rule.icon}
                </span>
                <Toggle
                  checked={automation[rule.id] ?? rule.defaultOn}
                  onChange={(checked) => void handleToggle(rule.id, checked)}
                  label={rule.title}
                />
              </div>
              <h3 className="text-sm font-semibold text-gray-900">{rule.title}</h3>
              <p className="mt-1.5 text-sm text-gray-500">{rule.description}</p>
              <span
                className={cn(
                  "mt-4 inline-block rounded px-2 py-0.5 text-xs font-medium",
                  rule.badgeColor,
                )}
              >
                {rule.badge}
              </span>
            </div>
          ))}
        </div>

        <div className="mt-8 flex flex-wrap items-center justify-end gap-3">
          {savedMsg && <p className="text-xs text-gray-600">{savedMsg}</p>}
          <Button type="button" disabled>
            {saving ? "Saving…" : "Rules auto-save per project"}
          </Button>
        </div>
      </div>
      <OnboardingFooter currentStep={5} />
    </DashboardLayout>
  );
}