"use client";

import { useState } from "react";
import { Crown } from "lucide-react";
import { Button } from "@/components/ui/button";
import { subscribeToPlanAction } from "@/lib/actions/membership";

interface SubscribeButtonProps {
  planId: string;
  planName: string;
  isLoggedIn: boolean;
  isMember: boolean;
}

export function SubscribeButton({
  planId,
  planName,
  isLoggedIn,
  isMember,
}: SubscribeButtonProps) {
  const [pending, setPending] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState(false);

  if (isMember) {
    return (
      <Button disabled className="w-full">
        您已是會員
      </Button>
    );
  }

  if (!isLoggedIn) {
    return (
      <Button
        render={<a href={`/login?next=/membership`} />}
        nativeButton={false}
        className="w-full bg-primary text-primary-foreground"
      >
        登入後訂閱
      </Button>
    );
  }

  return (
    <div className="w-full">
      <Button
        type="button"
        disabled={pending || success}
        className="w-full bg-primary text-primary-foreground"
        onClick={async () => {
          setPending(true);
          setError(null);
          const result = await subscribeToPlanAction(planId);
          if (result?.error) {
            setError(result.error);
          } else {
            setSuccess(true);
            window.location.href = "/account";
          }
          setPending(false);
        }}
      >
        <Crown className="size-4" />
        {pending ? "處理中..." : success ? "訂閱成功" : `訂閱 ${planName}`}
      </Button>
      {error && <p className="mt-2 text-center text-sm text-destructive">{error}</p>}
    </div>
  );
}