"use client";
import Image from "next/image";
import { useState } from "react";

type TabKey = "card" | "paypal";

export default function PaymentForm() {
  const [tab, setTab] = useState<TabKey>("card");
  const [save, setSave] = useState(false);

  return (
    <div className="rounded-md border bg-card shadow-sm">
      <div className="border-b px-4 py-3">
        <h2 id="payment-section" className="text-lg font-semibold">
          Select Payment Method
        </h2>
      </div>

      <div className="grid grid-cols-2 sm:grid-cols-4 overflow-hidden rounded-md border text-sm sm:text-base mb-6">
        <button
          type="button"
          onClick={() => setTab("card")}
          className={`relative flex flex-col items-center justify-center gap-2 border-r px-3 py-3 transition ${
            tab === "card"
              ? "bg-gray-50 font-semibold text-green-600"
              : "bg-white"
          }`}
        >
          <Image
            src="/assets/images/paymentcard.svg"
            alt="Credit/Debit Card"
            className="h-8 w-8 sm:h-10 sm:w-10 object-contain"
          />
          <span className="text-center">Credit/Debit Card</span>

          {tab === "card" && (
            <span className="absolute bottom-0 left-1/2 h-[2px] w-8 -translate-x-1/2 transform bg-green-500 rounded-full" />
          )}
        </button>

        <button
          type="button"
          onClick={() => setTab("paypal")}
          className={`relative flex flex-col items-center justify-center gap-2 px-3 py-3 transition ${
            tab === "paypal"
              ? "bg-gray-50 font-semibold text-green-600"
              : "bg-white"
          }`}
        >
          <Image
            src="/assets/images/paypal.svg"
            alt="PayPal"
            className="h-8 w-8 sm:h-10 sm:w-10 object-contain"
          />
          <span className="text-center">PayPal</span>

          {tab === "paypal" && (
            <span className="absolute bottom-0 left-1/2 h-[2px] w-8 -translate-x-1/2 transform bg-green-500 rounded-full" />
          )}
        </button>
      </div>

      {tab === "card" ? (
        <>
          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 border-b border-gray-200 bg-gray-100 px-4 py-3 rounded-md">
            <div className="flex items-center gap-2">
              <input
                id="visa"
                type="checkbox"
                className="size-4 accent-green-600"
                defaultChecked
              />
              <label
                htmlFor="visa"
                className="flex items-center gap-2 text-base cursor-pointer"
              >
                <Image
                  src="/assets/images/visa.png"
                  alt="Visa"
                  className="h-5 w-5 object-contain"
                />
                New Debit or Credit card
              </label>
            </div>

            <div className="flex items-center gap-2">
              <Image
                src="/assets/images/visa.png"
                alt="Visa"
                className="h-5 w-5"
              />
              <Image
                src="/assets/images/mastercard.png"
                alt="MasterCard"
                className="h-5 w-5"
              />
            </div>
          </div>

          <div className="space-y-6 p-4 sm:p-6">
            <div className="flex flex-col sm:flex-row sm:items-center gap-3">
              <label className="sm:w-1/4 md:w-1/5 text-gray-700 text-base sm:text-right">
                Card Number
              </label>
              <div className="flex-1">
                <input
                  className="w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-base focus:border-green-500 focus:ring-1 focus:ring-green-500"
                  placeholder="•••• •••• •••• ••••"
                  inputMode="numeric"
                />
              </div>
            </div>

            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
              <label className="text-gray-700 text-base w-full sm:w-1/4 md:w-1/5 sm:text-right font-medium">
                Expiration
              </label>
              <div className="flex-1 flex items-center gap-2">
                <select
                  className="flex-1 rounded-md border border-gray-300 bg-white px-4 py-2 text-base focus:border-green-500 focus:ring-2 focus:ring-green-500 sm:w-32 sm:flex-none transition duration-150"
                  defaultValue="01"
                >
                  {Array.from({ length: 12 }, (_, i) =>
                    String(i + 1).padStart(2, "0")
                  ).map((m) => (
                    <option key={m}>{m}</option>
                  ))}
                </select>
                <span className="text-gray-600">/</span>
                <select
                  className="flex-1 rounded-md border border-gray-300 bg-white px-4 py-2 text-base focus:border-green-500 focus:ring-2 focus:ring-green-500 sm:w-36 sm:flex-none transition duration-150"
                  defaultValue={new Date().getFullYear()}
                >
                  {Array.from(
                    { length: 12 },
                    (_, i) => new Date().getFullYear() + i
                  ).map((y) => (
                    <option key={y}>{y}</option>
                  ))}
                </select>
              </div>
            </div>

            <div className="flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3">
              <label className="text-gray-700 text-base w-full sm:w-1/4 md:w-1/5 sm:text-right font-medium">
                CVV
              </label>
              <div className="flex-1">
                <input
                  className="w-full sm:w-40 rounded-md border border-gray-300 bg-white px-4 py-2 text-base placeholder-gray-400 focus:border-green-500 focus:ring-2 focus:ring-green-500 transition duration-150"
                  placeholder="123"
                  maxLength={4}
                  inputMode="numeric"
                />
              </div>
            </div>

            <div className="flex items-center gap-2 sm:pl-[25%] md:pl-[20%] pt-2">
              <input
                id="saveCard"
                type="checkbox"
                className="size-5 accent-green-600 border-gray-300 rounded focus:ring-green-500"
                checked={save}
                onChange={(e) => setSave(e.target.checked)}
              />
              <label
                htmlFor="saveCard"
                className="text-base text-gray-700 cursor-pointer"
              >
                Save this Detail
              </label>
            </div>

            <div className="p-4 text-sm sm:text-base">
              <p className="font-semibold mb-2">Temporary Test Cards:</p>
              <ul className="list-inside space-y-1">
                <li>4117760000000001</li>
                <li>4139550000000002</li>
                <li>4415980000000004</li>
                <li>5402700000000006</li>
                <li>5406180000000003</li>
                <li>3728970000000009</li>
                <li>6011485500612731</li>
              </ul>
              <p className="mt-3 font-medium">CVV: 123</p>
            </div>

            <div className="text-center">
              <button className="inline-flex items-center justify-center bg-green-600 text-white px-6 py-2 rounded-md font-semibold hover:bg-green-700 transition">
                PAY $38.11
              </button>
            </div>
          </div>
        </>
      ) : (
        <div className="space-y-6 p-4 sm:p-6">
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 items-center">
            <p className="text-base font-semibold">
              Amount: <span className="text-gray-900">$38.11</span>
            </p>

            <div className="flex flex-col items-center space-y-1">
              <button className="flex w-56 sm:w-64 items-center justify-center gap-2 rounded-full bg-[#FFC439] py-2 text-base font-semibold text-[#003087] shadow-md hover:bg-[#ffce4d] transition">
                <Image
                  src="/assets/images/paypal-img.svg"
                  alt="PayPal"
                  className="h-6 w-16 object-contain"
                />
              </button>
              <p className="text-center text-sm text-gray-600">
                The safer, easier way to pay
              </p>
            </div>
          </div>

          <div className="space-y-2">
            <p className="font-semibold">Email:</p>
            <ul className="list-disc list-inside text-gray-800">
              <li>test123--Buyer@gmail.com</li>
              <li>darshanpatel.vibrant-buyer@gmail.com</li>
            </ul>
          </div>

          <div>
            <p className="font-semibold">Password:</p>
            <p className="text-gray-800">darshan@vibrant</p>
          </div>
        </div>
      )}
    </div>
  );
}