"use client";

import { useQuoteStore } from "@/lib/quote-store";
import Image from "next/image";
import Link from "next/link";
import { Trash2, Plus, Minus, ShoppingBag, ArrowRight } from "lucide-react";
import QuoteForm from "@/components/quote/quote-form";
import Banner from "@/components/banner";
import { useEffect, useState } from "react";
import { fetchQuotaImage } from "@/lib/api";

export default function QuotesPage() {
  const [heroImage, setHeroImage] = useState<string | undefined>();

  useEffect(() => {
    const fetchHeroImage = async () => {
      const resp = await fetchQuotaImage();
      setHeroImage(resp.image_url);
    };

    fetchHeroImage();
  }, []);

  const { items, removeItem, updateQuantity } = useQuoteStore();

  const handleQuantityChange = (id: number, quantity: number) => {
    if (quantity < 1) return;
    updateQuantity(id, quantity);
  };

  const handleRemove = (id: number) => {
    removeItem(id);
  };

  return (
    <div className="bg-white px-4 md:px-8 ">
      <Banner imageSrc={heroImage} height={400}>
        <div className="text-center text-white w-[600px]">
          <h1 className="text-5xl font-bold mb-4">Requested Quotes</h1>
          <span className="ml-2 text-white/80"></span>
        </div>
      </Banner>

      {/* Quote Content */}
      <div className="container py-16 max-w-7xl mx-auto ">
        {items.length === 0 ? (
          <div className="text-center py-16 max-w-lg mx-auto">
            <div className="bg-gray-100 w-24 h-24 rounded-full flex items-center justify-center mx-auto mb-6">
              <ShoppingBag className="w-10 h-10 text-gray-400" />
            </div>
            <h2 className="text-2xl font-bold text-gray-900 mb-4">
              Your Quote is Empty
            </h2>
            <p className="text-gray-600 mb-8">
              Start adding products to your quote to get started with your
              request.
            </p>
            <Link
              href="/products"
              className="inline-flex items-center px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors"
            >
              Browse Products
              <ArrowRight className="ml-2 w-4 h-4" />
            </Link>
          </div>
        ) : (
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {/* Quote Items */}
            <div className="lg:col-span-2">
              <h2 className="text-2xl font-bold text-gray-900 mb-6">
                Quote Items
              </h2>

              <div className="overflow-x-auto">
                <table className="w-full border-collapse">
                  <thead className="bg-gray-50 text-left">
                    <tr>
                      <th className="px-4 py-3 text-sm font-medium text-gray-500 uppercase tracking-wider">
                        Product
                      </th>
                      <th className="px-4 py-3 text-sm font-medium text-gray-500 uppercase tracking-wider">
                        Quantity
                      </th>
                      <th className="px-4 py-3 text-sm font-medium text-gray-500 uppercase tracking-wider text-right">
                        Actions
                      </th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-gray-200">
                    {items.map((item) => (
                      <tr key={item.id} className="bg-white">
                        <td className="px-4 py-4">
                          <div className="flex items-center">
                            <div className="flex-shrink-0 h-16 w-16 relative rounded overflow-hidden bg-gray-100">
                              <Image
                                src={`${process.env.NEXT_PUBLIC_IMAGE_URL || process.env.NEXT_PUBLIC_API_URL + "/storage/"}${item.image}`}
                                alt={item.title}
                                fill
                                className="object-cover"
                              />
                            </div>
                            <div className="ml-4">
                              <div className="text-sm font-medium text-gray-900">
                                {item.title}
                              </div>
                            </div>
                          </div>
                        </td>
                        <td className="px-4 py-4">
                          <div className="flex items-center border border-gray-200 rounded-md w-32">
                            <button
                              onClick={() =>
                                handleQuantityChange(item.id, item.quantity - 1)
                              }
                              className="px-3 py-1 text-gray-600 hover:text-red-600 transition-colors"
                              aria-label="Decrease quantity"
                            >
                              <Minus className="w-4 h-4" />
                            </button>
                            <input
                              type="number"
                              value={item.quantity}
                              onChange={(e) =>
                                handleQuantityChange(
                                  item.id,
                                  Number.parseInt(e.target.value) || 1,
                                )
                              }
                              min="1"
                              className="w-full text-center py-1 border-x border-gray-200 focus:outline-none"
                            />
                            <button
                              onClick={() =>
                                handleQuantityChange(item.id, item.quantity + 1)
                              }
                              className="px-3 py-1 text-gray-600 hover:text-red-600 transition-colors"
                              aria-label="Increase quantity"
                            >
                              <Plus className="w-4 h-4" />
                            </button>
                          </div>
                        </td>
                        <td className="px-4 py-4 text-right">
                          <button
                            onClick={() => handleRemove(item.id)}
                            className="text-gray-500 hover:text-red-600 transition-colors"
                            aria-label="Remove item"
                          >
                            <Trash2 className="w-5 h-5" />
                          </button>
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </div>

            {/* Quote Form */}
            <div className="lg:col-span-1">
              <div className="bg-gray-50 rounded-lg p-6 shadow-sm">
                <h2 className="text-2xl font-bold text-gray-900 mb-6">
                  Request Information
                </h2>
                <QuoteForm items={items} />
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}