"use client";

import { CheckCircle2, ExternalLink, Loader2, MinusCircle, XCircle, Zap } from "lucide-react";
import { useCallback, useMemo, useState } from "react";
import { Button } from "@/components/ui/button";
import { publishPostWithOutcomes, type PlatformPublishOutcome } from "@/lib/client/generation-api";
import { getPublishContext } from "@/lib/client/generation-payload";
import {
  buildInitialQuickPublishStates,
  canPublishToYouTube,
  YOUTUBE_NO_VIDEO_MESSAGE,
  type QuickPublishPlatformState,
  validateQuickPublish,
} from "@/lib/social/quick-publish";
import { getPlatformConfig } from "@/lib/social/platforms";
import { cn } from "@/lib/utils";
import type { ConnectedAccount, GeneratedPost } from "@/types/workflow";

function applyOutcomes(
  states: QuickPublishPlatformState[],
  outcomes: PlatformPublishOutcome[],
): QuickPublishPlatformState[] {
  const byPlatform = new Map(outcomes.map((o) => [o.platform, o]));
  return states.map((s) => {
    const outcome = byPlatform.get(s.platform);
    if (!outcome) return s;
    if (outcome.skipped) {
      return { ...s, status: "skipped", error: outcome.error };
    }
    if (outcome.success) {
      return { ...s, status: "success", permalink: outcome.permalink, error: undefined };
    }
    return { ...s, status: "failed", error: outcome.error ?? "Publish failed" };
  });
}

interface QuickPublishPanelProps {
  post: GeneratedPost;
  accounts: ConnectedAccount[];
  projectStatus: string;
  onPublished?: (post: GeneratedPost) => void;
  className?: string;
}

export function QuickPublishPanel({
  post,
  accounts,
  projectStatus,
  onPublished,
  className,
}: QuickPublishPanelProps) {
  const [publishing, setPublishing] = useState(false);
  const [platformStates, setPlatformStates] = useState<QuickPublishPlatformState[]>([]);
  const [summaryError, setSummaryError] = useState("");

  const initialStates = useMemo(
    () => buildInitialQuickPublishStates(accounts),
    [accounts],
  );

  const displayStates = platformStates.length ? platformStates : initialStates;
  const hasStarted = platformStates.length > 0;
  const publishTargets = initialStates.filter((s) => s.platform !== "youtube");

  const handleQuickPublish = useCallback(async () => {
    const validation = validateQuickPublish(accounts, projectStatus);
    if (!validation.ok) {
      setSummaryError(validation.message);
      return;
    }

    setSummaryError("");
    setPublishing(true);

    const publishingStates: QuickPublishPlatformState[] = initialStates.map((s) => {
      if (s.platform === "youtube") {
        if (canPublishToYouTube(post)) {
          return { ...s, status: "publishing" };
        }
        return {
          ...s,
          status: "skipped",
          error: YOUTUBE_NO_VIDEO_MESSAGE,
        };
      }
      return { ...s, status: "publishing" };
    });

    setPlatformStates(publishingStates);

    try {
      const result = await publishPostWithOutcomes(post.id, projectStatus, accounts, {
        ...getPublishContext(),
        quickPublish: true,
        forcePublish: true,
      });

      setPlatformStates((prev) => applyOutcomes(prev.length ? prev : initialStates, result.outcomes));

      if (result.ok && result.post) {
        onPublished?.(result.post);
      } else if (!result.ok) {
        const failed = result.outcomes.filter((o) => !o.success && !o.skipped);
        if (failed.length) {
          setSummaryError(
            failed.map((o) => `${getPlatformConfig(o.platform)?.label ?? o.platform}: ${o.error}`).join(" · "),
          );
        } else {
          setSummaryError(result.error ?? "Quick Publish failed on all platforms.");
        }
        if (result.post) onPublished?.(result.post);
      }
    } catch (err) {
      setSummaryError(err instanceof Error ? err.message : "Quick Publish failed");
      setPlatformStates((prev) =>
        prev.map((s) =>
          s.status === "publishing" ? { ...s, status: "failed", error: "Request failed" } : s,
        ),
      );
    } finally {
      setPublishing(false);
    }
  }, [accounts, initialStates, onPublished, post.id, projectStatus]);

  if (post.status === "published") {
    return (
      <div className={cn("rounded-lg border border-green-200 bg-green-50 px-4 py-3", className)}>
        <p className="text-sm font-medium text-green-800">This post is already published.</p>
        {post.platformPermalinks && Object.keys(post.platformPermalinks).length > 0 && (
          <div className="mt-2 flex flex-wrap gap-2">
            {Object.entries(post.platformPermalinks).map(([platform, url]) => (
              <a
                key={platform}
                href={url}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex items-center gap-1 text-xs font-medium text-green-700 hover:underline"
              >
                {getPlatformConfig(platform)?.label ?? platform}
                <ExternalLink className="h-3 w-3" />
              </a>
            ))}
          </div>
        )}
      </div>
    );
  }

  return (
    <div className={cn("rounded-lg border border-gray-200 bg-gray-50/80 p-4", className)}>
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <p className="text-sm font-semibold text-gray-900">Quick Publish</p>
          <p className="text-xs text-gray-500">
            Publish instantly to LinkedIn, Facebook, and YouTube (when MP4 is generated)
          </p>
        </div>
        <Button
          type="button"
          variant="purple"
          size="sm"
          disabled={publishing || projectStatus === "paused" || !publishTargets.length}
          onClick={() => void handleQuickPublish()}
          className="shrink-0"
        >
          {publishing ? (
            <Loader2 className="h-4 w-4 animate-spin" />
          ) : (
            <Zap className="h-4 w-4" />
          )}
          Quick Publish
        </Button>
      </div>

      {publishTargets.length === 0 && (
        <p className="mt-3 text-xs text-amber-700">
          Connect LinkedIn, Facebook, or Instagram in Connected Accounts to use Quick Publish.
        </p>
      )}

      {(hasStarted || initialStates.length > 0) && (
        <ul className="mt-4 space-y-2">
          {displayStates.map((item) => (
            <li
              key={item.platform}
              className="flex items-start gap-3 rounded-md border border-gray-100 bg-white px-3 py-2 text-sm"
            >
              <StatusIcon status={item.status} />
              <div className="min-w-0 flex-1">
                <div className="flex flex-wrap items-center gap-2">
                  <span className="font-medium text-gray-900">{item.label}</span>
                  <StatusBadge status={item.status} />
                </div>
                {item.error && (
                  <p className="mt-1 text-xs text-red-600">{item.error}</p>
                )}
                {item.platform === "youtube" && item.status === "idle" && !item.error && (
                  <p className="mt-1 text-xs text-gray-500">
                    {canPublishToYouTube(post)
                      ? "Ready — MP4 will upload to your connected YouTube channel."
                      : "Connect YouTube and regenerate with VIDEO_PROVIDER=ffmpeg for video upload."}
                  </p>
                )}
                {item.permalink && item.status === "success" && (
                  <a
                    href={item.permalink}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="mt-1 inline-flex items-center gap-1 text-xs font-medium text-brand-600 hover:underline"
                  >
                    View post
                    <ExternalLink className="h-3 w-3" />
                  </a>
                )}
              </div>
            </li>
          ))}
        </ul>
      )}

      {summaryError && (
        <p className="mt-3 rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
          {summaryError}
        </p>
      )}
    </div>
  );
}

function StatusIcon({ status }: { status: QuickPublishPlatformState["status"] }) {
  if (status === "publishing") {
    return <Loader2 className="mt-0.5 h-4 w-4 shrink-0 animate-spin text-brand-600" />;
  }
  if (status === "success") {
    return <CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0 text-green-600" />;
  }
  if (status === "failed") {
    return <XCircle className="mt-0.5 h-4 w-4 shrink-0 text-red-500" />;
  }
  if (status === "skipped") {
    return <MinusCircle className="mt-0.5 h-4 w-4 shrink-0 text-gray-400" />;
  }
  return <span className="mt-1 h-2 w-2 shrink-0 rounded-full bg-gray-300" />;
}

function StatusBadge({ status }: { status: QuickPublishPlatformState["status"] }) {
  const styles: Record<QuickPublishPlatformState["status"], string> = {
    idle: "bg-gray-100 text-gray-600",
    publishing: "bg-blue-100 text-blue-700",
    success: "bg-green-100 text-green-700",
    failed: "bg-red-100 text-red-700",
    skipped: "bg-gray-100 text-gray-500",
  };
  const labels: Record<QuickPublishPlatformState["status"], string> = {
    idle: "Ready",
    publishing: "Publishing…",
    success: "Success",
    failed: "Failed",
    skipped: "Skipped",
  };
  return (
    <span className={cn("rounded-full px-2 py-0.5 text-xs font-medium", styles[status])}>
      {labels[status]}
    </span>
  );
}