"use client";

import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";

function BackIcon() {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      height="18"
      viewBox="0 0 18 18"
      width="18"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M10.5 4.5 6 9l4.5 4.5"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.8"
      />
    </svg>
  );
}

function HistoryIcon() {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      height="18"
      viewBox="0 0 18 18"
      width="18"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M3.75 8.25a5.25 5.25 0 1 1 1.539 3.711"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.6"
      />
      <path
        d="M3.75 4.5v3.75H7.5"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="1.6"
      />
    </svg>
  );
}

function PlayIcon() {
  return (
    <svg
      aria-hidden="true"
      fill="none"
      height="28"
      viewBox="0 0 28 28"
      width="28"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path d="M10 8.75 20 14l-10 5.25V8.75Z" fill="white" />
    </svg>
  );
}

const metrics = [
  { label: "marriage applicants", value: "120" },
  { label: "Successful marriage", value: "120" },
];

const mockVideoDuration = 12;

export default function VideoPageTwo() {
  const [isPlaying, setIsPlaying] = useState(false);
  const [watchedSeconds, setWatchedSeconds] = useState(0);
  const isCompleted = watchedSeconds >= mockVideoDuration;
  const progressPercent = Math.min(
    (watchedSeconds / mockVideoDuration) * 100,
    100,
  );

  useEffect(() => {
    if (!isPlaying || isCompleted) {
      return;
    }

    const timer = window.setInterval(() => {
      setWatchedSeconds((currentValue) => {
        const nextValue = Math.min(currentValue + 1, mockVideoDuration);

        if (nextValue >= mockVideoDuration) {
          setIsPlaying(false);
        }

        return nextValue;
      });
    }, 1000);

    return () => window.clearInterval(timer);
  }, [isCompleted, isPlaying]);

  const handlePlay = () => {
    if (isCompleted) {
      setWatchedSeconds(0);
    }

    setIsPlaying((currentValue) => !currentValue || isCompleted);
  };

  return (
    <main className="flex min-h-screen items-center justify-center bg-[#444446] p-2 sm:p-4">
      <section className="relative aspect-[375/813] w-full max-w-[375px] overflow-hidden rounded-[24px] bg-[#FCF8F7] shadow-[0_30px_70px_rgba(0,0,0,0.34)]">
        <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,#FF9BB8_0%,rgba(255,155,184,0.32)_14%,rgba(255,255,255,0)_34%),linear-gradient(180deg,rgba(255,255,255,0.72)_0%,rgba(255,255,255,0.98)_34%,#FCF8F7_100%)]" />
        <div className="absolute inset-0 opacity-40 [background-image:linear-gradient(45deg,rgba(226,201,206,0.28)_25%,transparent_25%),linear-gradient(-45deg,rgba(226,201,206,0.28)_25%,transparent_25%),linear-gradient(45deg,transparent_75%,rgba(226,201,206,0.22)_75%),linear-gradient(-45deg,transparent_75%,rgba(226,201,206,0.22)_75%)] [background-position:0_0,0_8px,8px_-8px,-8px_0] [background-size:16px_16px]" />

        <div className="relative z-10 flex h-full flex-col px-4 pb-4 pt-5">
          <div className="flex items-center justify-between px-2 text-[#1C1C1E]">
            <span className="text-[14px] font-semibold">9:41</span>
            <div className="flex items-center gap-1.5">
              <span className="block h-[7px] w-[18px] rounded-[3px] border border-current opacity-85" />
              <span className="block h-[7px] w-[7px] rounded-full bg-current opacity-85" />
            </div>
          </div>

          <div className="mt-4 flex items-center justify-between px-1">
            <Link
              aria-label="Back to rules"
              className="flex h-11 w-11 items-center justify-center rounded-full bg-white text-[#202020] shadow-[0_10px_24px_rgba(0,0,0,0.08)]"
              href="/rules"
            >
              <BackIcon />
            </Link>

            <h1
              className="text-[20px] font-semibold text-[#2A1D1E]"
              style={{ fontFamily: "Georgia, Times New Roman, serif" }}
            >
              Habib Marriage
            </h1>

            <button
              aria-label="Open watch history"
              className="flex h-11 w-11 items-center justify-center rounded-full bg-white text-[#202020] shadow-[0_10px_24px_rgba(0,0,0,0.08)]"
              type="button"
            >
              <HistoryIcon />
            </button>
          </div>

          <div className="mt-[110px] px-1">
            <div className="relative overflow-hidden rounded-[20px] shadow-[0_18px_40px_rgba(0,0,0,0.22)]">
              <Image
                alt="Video preview for Habib Marriage"
                height={420}
                priority
                sizes="(max-width: 375px) 100vw, 320px"
                src="/assets/images/Rectangle 3077.png"
                width={640}
              />
              <div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(6,8,14,0.08)_0%,rgba(6,8,14,0.44)_100%)]" />
              <div className="absolute inset-x-0 top-0 h-16 bg-[linear-gradient(180deg,rgba(6,8,14,0.38)_0%,rgba(6,8,14,0)_100%)] px-4 py-3 text-white">
                <div className="flex items-center justify-between text-[11px] font-medium uppercase tracking-[0.16em]">
                  <span>Mock video</span>
                  <span>{watchedSeconds}s / 12s</span>
                </div>
              </div>
              <div className="absolute inset-x-4 bottom-4">
                <div className="h-1.5 overflow-hidden rounded-full bg-white/30">
                  <div
                    className="h-full rounded-full bg-[#F04C99] transition-[width] duration-700"
                    style={{ width: `${progressPercent}%` }}
                  />
                </div>
              </div>
              <button
                aria-label={
                  isCompleted
                    ? "Replay mock video"
                    : isPlaying
                      ? "Pause mock video"
                      : "Play mock video"
                }
                className="absolute left-1/2 top-1/2 flex h-20 w-20 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-[#BF2F2F] shadow-[0_18px_35px_rgba(191,47,47,0.45)]"
                onClick={handlePlay}
                type="button"
              >
                <PlayIcon />
              </button>
            </div>
          </div>

          <p className="mt-4 px-2 text-center text-[12px] font-medium text-[#6D6268]">
            Watch the full mock video to unlock the next step.
          </p>

          <div className="mt-[102px] grid grid-cols-2 gap-4 px-4 text-center text-[#242424]">
            {metrics.map((metric) => (
              <div key={metric.label}>
                <p className="text-[20px] font-semibold">{metric.value}</p>
                <p className="mt-2 text-[13px] font-semibold leading-5">
                  {metric.label}
                </p>
              </div>
            ))}
          </div>

          <div className="mt-auto space-y-3">
            <button
              className="h-[44px] w-full rounded-[14px] bg-linear-to-r from-[#F04C99] to-[#FF8575] text-[18px] font-semibold text-white shadow-[0_16px_36px_rgba(240,76,153,0.28)]"
              type="button"
            >
              Information recording
            </button>

            <Link
              aria-disabled={!isCompleted}
              className={`flex h-[44px] items-center justify-center rounded-[14px] text-[18px] font-semibold transition-opacity ${
                isCompleted
                  ? "bg-[#242424] text-white shadow-[0_14px_30px_rgba(0,0,0,0.18)]"
                  : "pointer-events-none bg-[#D9D2D5] text-[#857D82] opacity-80"
              }`}
              href={isCompleted ? "/questions" : "/video-2"}
              tabIndex={isCompleted ? 0 : -1}
            >
              Next
            </Link>
          </div>
        </div>
      </section>
    </main>
  );
}
