"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useState } from "react";
import { SubmitHandler, useForm } from "react-hook-form";
import { z } from "zod";
import { FormTextarea } from "../../../../../components";
import {
  Button,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  Form,
} from "../../../../../shadcnui";
import { formatDate } from "../../../components/utils";
import { StripeSubscriptionInterface, StripeSubscriptionService } from "../../data";

type CancelSubscriptionDialogProps = {
  subscription: StripeSubscriptionInterface;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSuccess: () => void;
};

const formSchema = z.object({
  reason: z.string().optional(),
});

export function CancelSubscriptionDialog({
  subscription,
  open,
  onOpenChange,
  onSuccess,
}: CancelSubscriptionDialogProps) {
  const [isSubmitting, setIsSubmitting] = useState<boolean>(false);

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      reason: "",
    },
  });

  const onSubmit: SubmitHandler<z.infer<typeof formSchema>> = async (_values) => {
    setIsSubmitting(true);

    try {
      await StripeSubscriptionService.cancelSubscription({
        id: subscription.id,
        cancelImmediately: false,
      });

      onSuccess();
      onOpenChange(false);
    } catch (error) {
      console.error("[CancelSubscriptionDialog] Failed to cancel subscription:", error);
    } finally {
      setIsSubmitting(false);
    }
  };

  const periodEndDate = formatDate(subscription.currentPeriodEnd);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle>Cancel Subscription</DialogTitle>
          <DialogDescription>
            Are you sure you want to cancel this subscription? This action cannot be undone.
          </DialogDescription>
        </DialogHeader>

        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-y-4">
            <div className="bg-primary/10 border-primary/30 text-foreground rounded-lg border p-3 text-sm">
              Your subscription will remain active until {periodEndDate}. You can continue using the service until then.
            </div>

            <FormTextarea
              form={form}
              id="reason"
              name="Reason (Optional)"
              placeholder="Let us know why you're canceling..."
              className="min-h-24"
            />

            <div className="flex gap-x-2 justify-end pt-2">
              <Button type="button" variant="outline" onClick={() => onOpenChange(false)} disabled={isSubmitting}>
                Keep Subscription
              </Button>
              <Button type="submit" variant="destructive" disabled={isSubmitting}>
                {isSubmitting ? "Canceling..." : "Confirm Cancellation"}
              </Button>
            </div>
          </form>
        </Form>
      </DialogContent>
    </Dialog>
  );
}