"use client";

import { useEffect, useState } from "react";
import Footer from "../components/Footer";
import Link from "next/link";
import {
  getCart,
  type CartItem,
} from "../lib/cart";

export default function CheckoutPage() {
  const [cart, setCart] = useState<CartItem[]>([]);

  useEffect(() => {
    setCart(getCart());
  }, []);

  const subtotal = cart.reduce(
    (sum, item) => sum + item.price * item.quantity,
    0
  );

  const shipping = subtotal > 0 ? 0 : 0;

  const total = subtotal + shipping;

  if (cart.length === 0) {
    return (
      <main className="min-h-screen bg-white py-16">
        <div className="mx-auto max-w-7xl px-4 text-center">
          <h1 className="text-2xl font-semibold text-[#4B5966]">
            Checkout
          </h1>

          <p className="mt-4 text-sm text-gray-500">
            Your cart is empty.
          </p>

          <Link
            href="/category"
            className="mt-6 inline-block rounded-lg bg-[#B570D4] px-6 py-3 text-sm font-medium text-white"
          >
            Continue Shopping
          </Link>
        </div>
      </main>
    );
  }

  return (
    <main className="min-h-screen bg-white py-10">
      <div className="mx-auto max-w-7xl px-4">

        <h1 className="text-2xl font-semibold text-[#4B5966]">
          Checkout
        </h1>

        <div className="mt-8 grid gap-8 lg:grid-cols-3">

          {/* CUSTOMER DETAILS */}
          <div className="lg:col-span-2 rounded-xl border border-[#EEEEEE] p-6">

            <h2 className="text-lg font-semibold text-[#4B5966]">
              Billing Details
            </h2>

            <div className="mt-6 grid gap-5 md:grid-cols-2">

              <div>
                <label className="text-sm text-gray-600">
                  First Name
                </label>
                <input
                  type="text"
                  className="mt-2 w-full rounded-lg border border-[#EEEEEE] p-3 outline-none focus:border-[#B570D4]"
                />
              </div>

              <div>
                <label className="text-sm text-gray-600">
                  Last Name
                </label>
                <input
                  type="text"
                  className="mt-2 w-full rounded-lg border border-[#EEEEEE] p-3 outline-none focus:border-[#B570D4]"
                />
              </div>

              <div>
                <label className="text-sm text-gray-600">
                  Email
                </label>
                <input
                  type="email"
                  className="mt-2 w-full rounded-lg border border-[#EEEEEE] p-3 outline-none focus:border-[#B570D4]"
                />
              </div>

              <div>
                <label className="text-sm text-gray-600">
                  Phone
                </label>
                <input
                  type="tel"
                  className="mt-2 w-full rounded-lg border border-[#EEEEEE] p-3 outline-none focus:border-[#B570D4]"
                />
              </div>

              <div className="md:col-span-2">
                <label className="text-sm text-gray-600">
                  Address
                </label>
                <input
                  type="text"
                  className="mt-2 w-full rounded-lg border border-[#EEEEEE] p-3 outline-none focus:border-[#B570D4]"
                />
              </div>

              <div>
                <label className="text-sm text-gray-600">
                  City
                </label>
                <input
                  type="text"
                  className="mt-2 w-full rounded-lg border border-[#EEEEEE] p-3 outline-none focus:border-[#B570D4]"
                />
              </div>

              <div>
                <label className="text-sm text-gray-600">
                  Country
                </label>
                <input
                  type="text"
                  value="United Arab Emirates"
                  readOnly
                  className="mt-2 w-full rounded-lg border border-[#EEEEEE] bg-gray-50 p-3 outline-none"
                />
              </div>

              <div className="md:col-span-2">
                <label className="text-sm text-gray-600">
                  Order Notes
                </label>
                <textarea
                  rows={4}
                  className="mt-2 w-full rounded-lg border border-[#EEEEEE] p-3 outline-none focus:border-[#B570D4]"
                  placeholder="Optional notes about your order..."
                />
              </div>

            </div>
          </div>

          {/* ORDER SUMMARY */}
          <div className="h-fit rounded-xl border border-[#EEEEEE] p-6">

            <h2 className="text-lg font-semibold text-[#4B5966]">
              Your Order
            </h2>

            <div className="mt-6 space-y-4">
              {cart.map((item) => (
                <div
                  key={item.id}
                  className="flex gap-3 border-b border-[#EEEEEE] pb-4"
                >
                  <img
                    src={item.image || "/products/01_1_.jpg"}
                    alt={item.name}
                    className="h-16 w-16 object-contain"
                  />

                  <div className="flex-1">
                    <p className="text-sm font-medium text-[#4B5966]">
                      {item.name}
                    </p>

                    <p className="mt-1 text-xs text-gray-500">
                      Qty: {item.quantity}
                    </p>

                    <p className="mt-1 text-sm text-gray-600">
                      AED {(item.price * item.quantity).toFixed(2)}
                    </p>
                  </div>
                </div>
              ))}
            </div>

            <div className="mt-6 space-y-3 text-sm">
              <div className="flex justify-between">
                <span className="text-gray-500">
                  Subtotal
                </span>

                <span>
                  AED {subtotal.toFixed(2)}
                </span>
              </div>

              <div className="flex justify-between">
                <span className="text-gray-500">
                  Shipping
                </span>

                <span className="text-green-600">
                  Free
                </span>
              </div>

              <div className="border-t border-[#EEEEEE] pt-4">
                <div className="flex justify-between">
                  <span className="font-semibold text-[#4B5966]">
                    Total
                  </span>

                  <span className="text-xl font-bold text-[#4B5966]">
                    AED {total.toFixed(2)}
                  </span>
                </div>
              </div>
            </div>

            <button
              type="button"
              className="mt-6 w-full rounded-lg bg-[#B570D4] px-6 py-3 text-sm font-medium text-white transition hover:opacity-90"
            >
              Place Order
            </button>

          </div>

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