import React, { useState } from "react";
import Navbar from "../../components/Elements/Navbar";
import Footer from "../../components/Elements/Footer";

const Checkout = () => {
  const [selectedMethod, setSelectedMethod] = useState(null);
  const [showEwalletOptions, setShowEwalletOptions] = useState(false);
  const [showRecommendationOptions, setShowRecommendationOptions] = useState(false);
  const [showAgenMitraOptions, setShowAgenMitraOptions] = useState(false);
  const [showTransferOptions, setShowTransferOptions] = useState(false);

  const handleMethodSelect = (method) => {
    setSelectedMethod(method);
    setShowEwalletOptions(method === "E-Wallet");
    setShowRecommendationOptions(method === "Recommendation");
    setShowAgenMitraOptions(method === "Agen Mitra");
    setShowTransferOptions(method === "Transfer");
  };

  return (
    <div className="min-h-screen bg-gray-100">
      <Navbar name="Dashboard" />

      {/* Container for the sections, arranged vertically */}
      <div className="max-w-5xl mx-auto mt-8 px-4 sm:px-6 lg:px-8">
        {/* Products Ordered Box */}
        <div className="bg-white rounded-xl shadow-lg p-6 mb-6">
          <div className="border-b border-gray-300 pb-2 mb-4">
            <h2 className="text-2xl font-semibold text-purple-500">Products ordered</h2>
          </div>
          <div className="space-y-4">
            {/* Product Items */}
            <div className="flex flex-col sm:flex-row justify-between items-center border-b pb-4">
              <div className="flex items-center space-x-4">
                <img src="/image/tehtarik.png" alt="" className="h-16 w-12 object-contain" />
                <div>
                  <h3 className="text-lg font-medium">Savva Teh Tarik Caramel Flavour</h3>
                  <p className="text-xs text-gray-500">20g x 15 sachets</p>
                </div>
              </div>
              <div className="text-center mt-2 sm:mt-0 w-12">
                <span>x 1</span>
              </div>
              <div className="text-right text-purple-500 mt-2 sm:mt-0">
                <p className="text-lg font-semibold">$9.00 USD</p>
              </div>
            </div>

            <div className="flex flex-col sm:flex-row justify-between items-center border-b pb-4">
              <div className="flex items-center space-x-4">
                <img src="/image/tehtarik.png" alt="" className="h-16 w-12 object-contain" />
                <div>
                  <h3 className="text-lg font-medium">Savva Teh Tarik Caramel Flavour</h3>
                  <p className="text-xs text-gray-500">20g x 30 sachets</p>
                </div>
              </div>
              <div className="text-center mt-2 sm:mt-0 w-12">
                <span>x 1</span>
              </div>
              <div className="text-right text-purple-500 mt-2 sm:mt-0">
                <p className="text-lg font-semibold">$15.00 USD</p>
              </div>
            </div>

            <div className="flex flex-col sm:flex-row justify-between items-center font-semibold p-2 text-base">
              <div className="text-xl">Subtotal</div>
              <div className="text-lg">$24.00 USD</div>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-lg p-6 mb-6">
          <h2 className="text-2xl font-semibold mb-4 text-purple-500">Payment Methods</h2>
          <div className="flex flex-wrap gap-2 mb-6 justify-between">
            <button
              onClick={() => handleMethodSelect("Recommendation")}
              className={`py-2 px-10 rounded-full border ${selectedMethod === "Recommendation" ? "border-purple-500 text-purple-500 bg-purple-100" : "border-gray-300"
                }`}
            >
              Recommendation
            </button>
            <button
              onClick={() => handleMethodSelect("COD")}
              className={`py-2 px-12 rounded-full border ${selectedMethod === "COD" ? "border-purple-500 text-purple-500 bg-purple-100" : "border-gray-300"
                }`}
            >
              COD
            </button>
            <button
              onClick={() => handleMethodSelect("Transfer")}
              className={`py-2 px-10 rounded-full border ${selectedMethod === "Transfer" ? "border-purple-500 text-purple-500 bg-purple-100" : "border-gray-300"
                }`}
            >
              Transfer Bank
            </button>
            <button
              onClick={() => handleMethodSelect("E-Wallet")}
              className={`py-2 px-12 rounded-full border ${selectedMethod === "E-Wallet" ? "border-purple-500 text-purple-500 bg-purple-100" : "border-gray-300"
                }`}
            >
              E-Wallet
            </button>
            <button
              onClick={() => handleMethodSelect("Agen Mitra")}
              className={`py-2 px-10 rounded-full border ${selectedMethod === "Agen Mitra" ? "border-purple-500 text-purple-500 bg-purple-100" : "border-gray-300"
                }`}
            >
              Agen Mitra
            </button>
          </div>

          {showRecommendationOptions && (
            <div className="bg-white p-4 rounded-lg">

              <div className="space-y-4">
                <div className="border p-4 rounded-lg flex items-center justify-between">
                  <span>BCA Virtual Account</span>
                  <img src="/image/becea.png" alt="BCA" className="h-6" />
                </div>
                <div className="border p-4 rounded-lg flex items-center justify-between ">
                  <span>Bank BRI</span>
                  <img src="/image/bri.png" alt="BRI" className="h-6" />
                </div>
                <div className="border p-4 rounded-lg flex items-center justify-between ">
                  <span>MANDIRI Virtual Account</span>
                  <img src="/image/mandiri.png" alt="Mandiri" className="h-6" />
                </div>
              </div>
            </div>
          )}
          {showAgenMitraOptions && (
            <div className="bg-white p-4 rounded-lg">
              <h3 className="text-lg font-semibold mb-3">Select Agen Mitra</h3>
              <div className="space-y-4">
                <div className="border p-4 rounded-lg flex items-center justify-between">
                  <span>Alfamart</span>
                  <img src="/image/alfamart.png" alt="Alfamart" className="h-6" />
                </div>
                <div className="border p-4 rounded-lg flex items-center justify-between ">
                  <span>Indomart</span>
                  <img src="/image/indomart.png" alt="Indomart" className="h-6" />
                </div>
              </div>
            </div>
          )}
          {showTransferOptions && (
            <div className="bg-white p-4 rounded-lg">
              <h3 className="text-lg font-semibold mb-3">Select Bank</h3>
              <div className="space-y-4">
                <div className="border p-4 rounded-lg flex items-center justify-between">
                  <span>BCA Virtual Account</span>
                  <img src="/image/becea.png" alt="BCA" className="h-6" />
                </div>
                <div className="border p-4 rounded-lg flex items-center justify-between ">
                  <span>Bank BRI</span>
                  <img src="/image/bri.png" alt="BRI" className="h-6" />
                </div>
                <div className="border p-4 rounded-lg flex items-center justify-between ">
                  <span>MANDIRI Virtual Account</span>
                  <img src="/image/mandiri.png" alt="Mandiri" className="h-6" />
                </div>
              </div>
            </div>
          )}

          {/* E-Wallet Options */}
          {showEwalletOptions && (
            <div className="bg-white p-4 rounded-lg">
              <h3 className="text-lg font-semibold mb-3">Select E-Wallet</h3>
              <div className="space-y-4">
                <div className="border p-4 rounded-lg flex items-center justify-between">
                  <span>OVO</span>
                  <img src="/image/ovo.png" alt="OVO" className="h-6" />
                </div>
                <div className="border p-4 rounded-lg flex items-center justify-between ">
                  <span>DANA</span>
                  <img src="/image/dana.png" alt="DANA" className="h-6" />
                </div>
                <div className="border p-4 rounded-lg flex items-center justify-between ">
                  <span>ShopeePay</span>
                  <img src="/image/shopee.png" alt="ShopeePay" className="h-6" />
                </div>
              </div>
            </div>
          )}

        </div>
      </div>

      <Footer />
    </div>
  );
};

export default Checkout;
