"use client";
import { Card } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { useTranslations } from "next-intl";
import { useState } from "react";
import TermsAndConditionsModal from "./TermsAndConditionsModal";
import { Policy } from "@/types/policy";

interface TermsAndConditionsCardProps {
  terms?: Policy | null;
  isTrial?: boolean;
  // Lifted to the stepper so submitting requires agreeing to the terms
  agreed: boolean;
  onAgreedChange: (agreed: boolean) => void;
}

export default function TermsAndConditionsCard({
  terms,
  isTrial = false,
  agreed,
  onAgreedChange: setAgreed,
}: TermsAndConditionsCardProps) {
  const t = useTranslations("SubscribePage");
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleToggleModal = (hasAgreed?: boolean) => {
    setIsModalOpen(false);
    if (hasAgreed === true) {
      setAgreed(true);
    }
  };

  return (
    <>
      <Card className="gap-5 p-5 lg:p-10">
        <h3 className="text-[16px] sm:text-[20px] md:text-[24px] font-bold">
          {isTrial ? t("trialReviewAndConfirm") : t("reviewAndConfirm")}
        </h3>
        <div className="flex items-center gap-4">
          <Checkbox
            id="terms-checkbox"
            checked={agreed}
            onCheckedChange={(checked) => setAgreed(checked === true)}
          />
          <label
            htmlFor="terms-checkbox"
            className="text-[14px] sm:text-[16px] md:text-[18px] font-normal flex items-center gap-1 cursor-pointer select-none"
          >
            <span>{t("iHaveRead")}</span>
            <span
              onClick={(e) => {
                e.preventDefault();
                e.stopPropagation();
                setIsModalOpen(true);
              }}
              className="text-secondary-dark underline cursor-pointer hover:text-secondary-main transition-colors"
            >
              {t("termsAndConditions")}
            </span>
            <span>{t("andAgree")}</span>
          </label>
        </div>
      </Card>

      <TermsAndConditionsModal
        isOpen={isModalOpen}
        onClose={handleToggleModal}
        terms={terms}
      />
    </>
  );
}