"use client";

import { useEffect, useRef } from "react";
import Button from "./button";
import { SliderHeader } from "./slider-header";
import type { SliderSlideProps } from "./slider-slide";

const ACTION_AREA_HEIGHT = 80;
const CONTENT_MASK = `linear-gradient(to bottom, black 0, black calc(100% - ${ACTION_AREA_HEIGHT}px), transparent calc(100% - ${ACTION_AREA_HEIGHT}px), transparent 100%)`;

type SliderSlideOneProps = SliderSlideProps & {
  onScrollToEnd?: () => void;
};

export function SliderSlideOne({ index, onScrollToEnd }: SliderSlideOneProps) {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const checkScroll = () => {
      const tolerance = 10;
      const isBottom =
        container.scrollHeight - container.scrollTop <=
        container.clientHeight + tolerance;
      if (isBottom) {
        onScrollToEnd?.();
      }
    };

    // Check initially
    checkScroll();

    container.addEventListener("scroll", checkScroll);
    window.addEventListener("resize", checkScroll);

    // Check after short delay for dynamically rendered container layout
    const timer = setTimeout(checkScroll, 150);

    return () => {
      container.removeEventListener("scroll", checkScroll);
      window.removeEventListener("resize", checkScroll);
      clearTimeout(timer);
    };
  }, [onScrollToEnd]);

  return (
    <section
      aria-label={`Slide ${index + 1}`}
      className="flex h-full min-h-0 w-full shrink-0 flex-col"
    >
      <div
        ref={containerRef}
        className="min-h-0 flex-1 overflow-y-auto"
        style={{
          paddingBottom: ACTION_AREA_HEIGHT,
          WebkitMaskImage: CONTENT_MASK,
          maskImage: CONTENT_MASK,
        }}
      >
        <SliderHeader index={index} title="Terms & Conditions" />
        <div className="bg-[#F14B46]/10 py-2.5 px-3.5 border border-[#F14B46] rounded-xl mt-8">
          <p className="text-[#F14B46] group-12 font-semibold text-center">
            Welcome to Habib Marriage. Please review our terms of service before
            proceeding. By registering and using this platform, you agree to
            these terms
          </p>
        </div>
        <div className="bg-white rounded-2xl mt-4 overflow-y-auto shadow-xs">
          <div className="space-y-6 px-5 py-5">
            <div className="space-y-3.5">
              <h3 className="text-[#F14B46] group-14 font-bold tracking-tight mb-3">
                1. Acceptance of Rules and Platform Goal
              </h3>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Full Acceptance of Agreement:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  Registration and use of any part of the application means
                  reading and fully accepting all rules. If you do not agree,
                  you must refrain from further use.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Changes and Updates:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  The application reserves the right to edit the rules when
                  necessary, and your continued use will constitute acceptance
                  of the new changes.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Exclusive Goal of the Application:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  This platform is designed solely for matchmaking and permanent
                  marriage. Use with the purpose of dating, temporary
                  relationships, or entertainment is prohibited.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Age and Legal Capacity Requirement:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  Use of services is allowed only for individuals over 18 years
                  of age who have the legal and religious capacity for marriage.
                </span>
              </p>
            </div>

            <div className="space-y-3.5 pt-1">
              <h3 className="text-[#F14B46] group-14 font-bold tracking-tight mb-3">
                2. User Account, Security, and Authentication
              </h3>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Accuracy of Personal Information:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  The user is obliged to enter all identity, occupational,
                  educational, and marital status information completely
                  accurately and honestly.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Prohibition of Fake Accounts:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  Creating an account using the identity, name, mobile number,
                  or photos of others, as well as creating multiple user
                  accounts, is a serious violation.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Maintaining Account Security:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  The responsibility for maintaining the confidentiality of the
                  password and login code lies with the user, and transferring
                  or renting the account to another person is prohibited.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Introducing a Trusted Person:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  To enhance security, users can introduce a trusted family
                  member. This information is used strictly for security and
                  urgent cases.
                </span>
              </p>
            </div>

            <div className="space-y-3.5 pt-1">
              <h3 className="text-[#F14B46] group-14 font-bold tracking-tight mb-3">
                3. Communications, Ethics, and User Behavior
              </h3>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Mutual Respect:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  Conversations must be ethical and purposeful. Sending
                  offensive, sexual, obscene, threatening, or harassing messages
                  is strictly prohibited.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Respecting Others&apos; Privacy:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  Saving, sending, or publishing screenshots of conversations
                  and photos of other users outside the application is a
                  violation of privacy.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Absolute Prohibition of Financial Requests:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  Requesting money, loans, gift cards, cryptocurrency, or any
                  financial benefit from other users under any pretext is
                  prohibited.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Prohibition of Commercial Activity:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  Any advertising, marketing, selling goods, or raising capital
                  within the application environment is considered a violation.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Respectful End of Conversation:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  If the other party does not wish to continue the
                  communication, the user is obliged to respect their decision
                  and refrain from pursuing or causing harassment.
                </span>
              </p>
            </div>

            <div className="space-y-3.5 pt-1">
              <h3 className="text-[#F14B46] group-14 font-bold tracking-tight mb-3">
                4. Privacy, Data, and Intellectual Property
              </h3>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Personal Information Protection:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  The application is committed to protecting your sensitive
                  information in accordance with the privacy policy and will not
                  sell it to third parties without permission.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Public Profile Display:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  By completing the profile, the user consents to their public
                  information being displayed to other qualified users for
                  service delivery.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Account Deletion Rules:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  Upon requesting account deletion, your information is removed
                  from public view, but necessary data for legal and security
                  requirements will remain archived in the system.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Intellectual Property Rights:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  All rights to software codes, design, database, and brand name
                  belong to the platform, and any copying or scraping is
                  prohibited.
                </span>
              </p>
            </div>

            <div className="space-y-3.5 pt-1">
              <h3 className="text-[#F14B46] group-14 font-bold tracking-tight mb-3">
                5. Financial Terms and Subscriptions
              </h3>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Nature of Paid Services:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  Payment is solely for using premium features and software
                  infrastructure and does not provide any guarantee for marriage
                  or finding a spouse.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">Refund Policy:</span>{" "}
                <span className="font-normal text-[#525252]">
                  Paid fees are non-refundable, except in definitive cases of
                  system technical errors.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Disclaimer for External Transactions:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  The application holds no responsibility for financial
                  transactions between users or outside the application&apos;s
                  official payment gateway.
                </span>
              </p>
            </div>

            <div className="space-y-3.5 pt-1">
              <h3 className="text-[#F14B46] group-14 font-bold tracking-tight mb-3">
                6. Monitoring, Violations, and Legal Prosecution
              </h3>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Confidential Reporting:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  Users must report violations, suspicious behavior, or
                  financial requests through the report violation option. The
                  identity of the reporter remains confidential.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Authorities of Application Moderators:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  The platform reserves the right to block, restrict, or suspend
                  the user account without prior notice if any violation or
                  breach of rules is detected.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Cooperation with Law Enforcement:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  In the event of cybercrimes, fraud, or threats, the
                  application will refer the necessary information to judicial
                  and law enforcement authorities.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Dispute Resolution:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  Any legal dispute must first be pursued through application
                  support. If no agreement is reached, the competent authority
                  will be the courts of the city where the application is
                  registered.
                </span>
              </p>
            </div>

            <div className="space-y-3.5 pt-1">
              <h3 className="text-[#F14B46] group-14 font-bold tracking-tight mb-3">
                7. Disclaimer and In-Person Meetings
              </h3>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Role of the Application:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  This platform is only a facilitator for initial communication
                  and does not replace family background research, counseling,
                  and pre-marital investigations.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Responsibility for Accuracy of Claims:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  Accurate verification of users&apos; claims regarding their
                  financial, occupational, marital, and health status is the
                  responsibility of the user and their family.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Responsibility for In-Person Meetings:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  Planning and deciding to meet in person is entirely the
                  responsibility of the users, and the application assumes no
                  liability for any incidents or potential damages.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Safety Recommendations in Meetings:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  It is strongly recommended that initial meetings be held in
                  crowded public places, and that a family member or a trusted
                  person be kept informed.
                </span>
              </p>

              <p className="group-12 leading-[1.55]">
                <span className="font-bold text-[#262626]">
                  Force Majeure Conditions:
                </span>{" "}
                <span className="font-normal text-[#525252]">
                  In the event of occurrences beyond control, such as a
                  nationwide internet outage, natural disasters, or sanctions,
                  the application will have no liability for temporary service
                  outages.
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

type SliderSlideOneActionsProps = {
  onAccept: () => void;
  disabled?: boolean;
};

export function SliderSlideOneActions({
  onAccept,
  disabled,
}: SliderSlideOneActionsProps) {
  const handleBack = () => {
    if (typeof window !== "undefined") {
      try {
        window.sessionStorage.setItem("skip_intro_redirect", "true");
      } catch (e) {
        console.warn("sessionStorage is not accessible:", e);
      }
    }
  };

  return (
    <div className="flex items-center gap-3 [&>a]:flex-1 [&>button]:flex-1">
      <Button
        variant="outlined"
        arrowDirection="left"
        href="/intro"
        onClick={handleBack}
      >
        Back
      </Button>
      <Button
        variant="countdown"
        countdownSeconds={0}
        onClick={onAccept}
        className="flex-1"
        disabled={disabled}
      >
        Accept
      </Button>
    </div>
  );
}