import Link from "next/link";
import { redirect } from "next/navigation";
import { ArrowLeftIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ComposeFormClient } from "./compose-form-client";

interface StepComposeParams {
  step?: string;
  accountId?: string;
  groupIds?: string;
  text?: string;
  mediaId?: string;
  caption?: string;
  scheduledAt?: string;
}

interface StepComposeProps {
  params: StepComposeParams;
}

export function StepCompose({ params }: StepComposeProps) {
  const { accountId, groupIds, text, mediaId, caption } = params;

  if (!accountId || !groupIds) {
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    redirect("/reminders/new" as any);
  }

  const backHref = `/reminders/new?step=2&accountId=${accountId}&groupIds=${groupIds}` as const;

  return (
    <div className="space-y-4">
      <div>
        <Button asChild variant="ghost" size="sm" className="-ml-2">
          {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
          <Link href={backHref as any}>
            <ArrowLeftIcon />
            Back
          </Link>
        </Button>
      </div>

      <p className="text-sm text-muted-foreground">
        Write your reminder message. You can also attach an image or document.
      </p>

      <ComposeFormClient
        accountId={accountId}
        groupIds={groupIds}
        initialText={text ?? ""}
        initialMediaId={mediaId}
        initialCaption={caption}
        passThroughParams={{
          scheduledAt: params.scheduledAt,
        }}
      />
    </div>
  );
}