"use client";

import Link from "next/link";
import { useParams } from "next/navigation";
import { Skeleton } from "@/components/ui/kit";
import { useApi } from "@/lib/use-api";
import type { Campaign } from "@/lib/types";
import { CampaignWizard } from "./campaign-wizard";

export function EditCampaign() {
  const { id } = useParams<{ id: string }>();
  const { data, error } = useApi<{ data: Campaign }>(`/campaigns/${id}`);
  if (error) return <p className="rounded-md bg-brick-soft px-4 py-3 text-sm text-brick">{error}</p>;
  if (!data) return <Skeleton className="h-96 w-full" />;
  const c = data.data;
  if (c.status !== "draft" && c.status !== "scheduled")
    return (
      <p className="text-sm text-muted">
        This campaign has already started and can no longer be edited.{" "}
        <Link className="font-medium text-teal hover:underline" href={`/campaigns/${c.id}`}>
          View its report
        </Link>
      </p>
    );
  return <CampaignWizard key={c.id} initial={c} />;
}