'use client';

import { useState } from 'react';
import Link from 'next/link';
import { Truck } from 'lucide-react';
import AskQuestionModal from '@/components/shared/AskQuestionModal';
import { useAppSelector } from '@/state/hooks';
import routes from '@/app/routes';
import type { Product } from '../products/product.types';

interface ProductInfoProps {
  product: Product;
}

export default function ProductInfo({ product }: ProductInfoProps) {
  const [modalVariant, setModalVariant] = useState<'question' | 'quote' | 'offer' | null>(null);
  const { user } = useAppSelector((state) => state.auth);

  const isNew =
    product.type === 'new' ||
    product.productType === 'new-ads' ||
    product.productType === 'new';

  // Sellers can't offer / quote / ask on their own listing (the API rejects it too)
  const currentUserId = user?.id || user?._id;
  const isOwnListing = Boolean(currentUserId && product.sellerId && currentUserId === product.sellerId);

  return (
    <div className="flex flex-col">

      <h1
        className="font-helvetica font-medium tracking-normal"
        style={{ fontSize: '32px', lineHeight: '40px', color: '#0E1420', maxWidth: '650px' }}
      >
        {product.title}
      </h1>

      <div className="mt-4 flex flex-wrap items-center gap-3">
        <span className="rounded bg-blue-50 px-3 py-1 text-xs font-semibold text-blue-700">
          Ref: {product.code}
        </span>

        <span className="text-gray-500 text-xs font-medium">
          Brand: {product.brand}
        </span>

        {product.workingCondition && (
          <span className="rounded bg-slate-100 px-2.5 py-0.5 text-xs text-slate-600 capitalize">
            Condition: {product.workingCondition}
          </span>
        )}
      </div>

      {/* New products are quote-based, so price & negotiable are shown for used only */}
      {!isNew && (
        <div className="mt-5 flex items-baseline gap-3">
          <span className="font-helvetica text-3xl font-bold text-[#0E1420]">
            {product.price}
          </span>
          {product.negotiable && (
            <span className="rounded-full bg-emerald-50 border border-emerald-200 px-3 py-0.5 text-xs font-semibold text-emerald-700">
              Price Negotiable
            </span>
          )}
        </div>
      )}

      <div className="mt-8 rounded-2xl bg-[#F7F8FA] p-8">
        <h3
          className="font-helvetica font-normal tracking-normal"
          style={{ fontSize: '20px', lineHeight: '30px', color: '#1657D9', maxWidth: '450px' }}
        >
          {isNew
            ? "Don't Pay Too Much!! Same Product - Better Price"
            : 'Verified Broadcast Hardware - Inspect & Propose an Offer'}
        </h3>

        <p
          className="font-helvetica mt-4 font-medium tracking-normal opacity-80"
          style={{ fontSize: '14px', lineHeight: '20px', color: '#1F528E', maxWidth: '610px' }}
        >
          {isNew
            ? 'We can source the Same Product for often a Better Price & your fully Covered.'
            : 'Competitive pre-owned professional equipment tested for production reliability.'}
        </p>

        <p
          className="font-helvetica mt-2 font-medium tracking-normal opacity-80"
          style={{ fontSize: '14px', lineHeight: '20px', color: '#1F528E', maxWidth: '610px' }}
        >
          {isNew
            ? 'Package Deals & Trade-ins may also be Available as well as Ex demo and good quality used. Ask us for a quote you have nothing to lose.'
            : 'Make an offer below or reach out directly with questions to negotiate or bundle gear.'}
        </p>

        <div className="mt-4 flex items-center gap-3">
          <Truck
            size={18}
            className="shrink-0 text-[#2F6EC9]"
          />

          <span
            className="font-helvetica font-normal tracking-normal opacity-80"
            style={{ fontSize: '14px', lineHeight: '24px', color: '#0B0F19', maxWidth: '478px' }}
          >
            {isNew
              ? 'Full Local Warranty and Free Delivery within Australia for all New Equipment.'
              : 'Safe and insured shipping available across Australia.'}
          </span>
        </div>
      </div>

      <p
        className="font-helvetica mt-8 font-normal tracking-normal"
        style={{ fontSize: '16px', lineHeight: '24px', color: '#3A4756', maxWidth: '650px' }}
      >
        {product.description}
      </p>

      {isOwnListing ? (
        <div className="mt-8 rounded-xl border border-[#E2E8F0] bg-[#F8FAFC] px-5 py-4">
          <p className="font-helvetica text-sm text-[#3A4756]">
            This is your listing. Buyers will see the offer and question options here.{' '}
            <Link href={routes.myListings} className="font-medium text-[#1657D9] underline hover:text-[#134BB8]">
              Manage it in My Ads
            </Link>
          </p>
        </div>
      ) : (
        <div className="mt-8 flex gap-4">
          {isNew ? (
            <button
              onClick={() => setModalVariant('quote')}
              className="h-[60px] w-[317px] rounded-md text-sm font-semibold uppercase bg-[#1657D9] text-white transition hover:bg-[#255cb3] cursor-pointer"
            >
              Request A Quote
            </button>
          ) : (
            <button
              onClick={() => setModalVariant('offer')}
              className="h-[60px] w-[317px] rounded-md text-sm font-semibold uppercase bg-[#1657D9] text-white transition hover:bg-[#255cb3] cursor-pointer"
            >
              Make An Offer
            </button>
          )}

          <button
            onClick={() => setModalVariant('question')}
            className="h-[60px] w-[317px] rounded-md text-sm font-semibold uppercase border border-[#1657D9] text-[#1657D9] transition hover:bg-blue-50 cursor-pointer"
          >
            Ask A Question
          </button>
        </div>
      )}

      <AskQuestionModal
        open={modalVariant !== null}
        onClose={() => setModalVariant(null)}
        product={{
          id: product.id,
          image: product.image,
          title: product.title,
          brand: product.brand,
          model: product.code,
          listingNo: product.listingNo || product.code,
        }}
        variant={modalVariant ?? 'question'}
      />
    </div>
  );
}