"use client";

import { useCarDetail } from "@/components/lib_components/carDetailProvider";
import Text from "@/components/lib_components/text";
import Image from "next/image";
import React, { useState } from "react";
import CarRentalModal from "@/components/lib_components/carRentalModal";
import { useTranslation } from "react-i18next";

export default function CarDetailPage() {
  const { detail } = useCarDetail();
  const [modalOpen, setModalOpen] = useState<boolean>(false);

  if (!detail) {
    return (
      <div className="my-20 text-center text-gray-500">
        <Text txt="Mahsulot topilmadi yoki hali tanlanmagan." />
      </div>
    );
  }

 const {t} = useTranslation();

  const techSpecs: Record<string, string | number | undefined> = {
    [t("weight_kg")]: detail.weight_kg && `${detail.weight_kg.toLocaleString("uz-UZ")} kg`,
    [t("maxLength_m")]: detail.maxLength_m && `${detail.maxLength_m} m`,
    [t("maxHeight_m")]: detail.maxHeight_m && `${detail.maxHeight_m} m`,
    [t("capacity_tons")]: detail.capacity_tons && `${detail.capacity_tons} t`,
    [t("capacity_kg")]: detail.capacity_kg && `${detail.capacity_kg} kg`,
    [t("fuelType")]: detail.fuelType,
    [t("tankVolume_m3")]: detail.tankVolume_m3 && `${detail.tankVolume_m3} m³`,
    [t("maxSpeed_kmh")]: detail.maxSpeed_kmh && `${detail.maxSpeed_kmh} km/soat`,
    [t("intercooler")]: detail.intercooler,
    [t("enginePower_hp")]: detail.enginePower_hp,
    [t("transmission")]: detail.transmission,
    [t("bom")]: detail.bom && `${detail.bom} m`,
    [t("qazish")]: detail.qazish && `${detail.qazish} m`,
    [t("pichoq")]: detail.pichoq && `${detail.pichoq} m`,
    [t("zichlash")]: detail.zichlash && `${detail.zichlash} m`,
    [t("siqish")]: detail.siqish && `${detail.siqish} bar`,
    [t("havo")]: detail.havo && `${detail.havo} l`,
    [t("kompressor_sig")]: detail.kompressor_sig && `${detail.kompressor_sig} l`
  };

  return (
    <div
      dir="ltr"
      className="my-10 max-w-[1200px] w-full mx-auto space-y-8 flex flex-col items-start justify-center px-2"
    >
      {/* 1️⃣ Mashina nomi */}
      <div className="text-2xl font-bold w-full text-center text-secondary mb-10">
        <Text txt={detail.name} />
      </div>

      {/* 2️⃣ Rasmi + asosiy narx ma’lumotlari */}
      <div className="flex flex-col md:flex-row md:items-start items-center gap-6 justify-center w-full">
        {/* Mashina rasmi */}
        <div className="max-w-[600px] w-full h-auto">
          <Image
            src={detail.image}
            alt={detail.name}
            width={600}
            height={200}
            className="rounded-lg object-cover border border-gray-200 w-full"
          />
        </div>

        {/* Asosiy ma’lumotlar */}
        <div className="lg:space-y-6 space-y-3 w-full">
          <div className="text-lg font-semibold flex gap-2">
            <Text txt="hour-price" />
            <span className="font-medium flex gap-2 text-gray-500">
              {detail.price?.toLocaleString("uz-UZ")}
              <Text txt="wallet" />
            </span>
          </div>
          <div className="text-lg font-semibold flex gap-2">
            <Text txt="min-time" />
            <span className="font-medium flex gap-2 text-gray-500">
              {detail.min_order_time}
              <Text txt="time" />
            </span>
          </div>
          <div className="text-lg font-semibold flex gap-2">
            <Text txt="day-price" />
            <span className="font-medium flex gap-2 text-gray-500">
              {detail.price && (detail.price * 8).toLocaleString("uz-UZ")}
              <Text txt="wallet" />
            </span>
          </div>

          {/* Izoh */}
          <div className="space-y-2 text-gray-500 text-lg">
            <Text txt="note1" />
            <Text txt="note2" />
          </div>

          {/* Buyurtma tugmasi */}
          <div className="flex gap-6">
            <button
              onClick={() => setModalOpen(true)}
              className="bg-secondary p-3 px-6 rounded-lg border-2 border-secondary text-white
                hover:cursor-pointer hover:bg-white hover:text-secondary transition-all"
            >
              <Text txt="book" />
            </button>
          </div>
        </div>
      </div>

      {/* 3️⃣ Texnik xususiyatlar (faqat mavjudlari) */}
      <div className="w-full border-t border-gray-300 pt-6">
        <h2 className="text-xl font-semibold mb-4 text-secondary">Texnik xususiyatlari</h2>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 text-gray-700">
          {Object.entries(techSpecs)
            .filter(([_, value]) => value !== undefined)
            .map(([key, value]) => (
              <div
                key={key}
                className="p-3 rounded-md bg-gray-50 border border-gray-200 hover:bg-gray-100 transition"
              >
                <p className="font-medium">{key}:</p>
                <p className="text-gray-600">{value}</p>
              </div>
            ))}
        </div>
      </div>

      {/* 4️⃣ Ijara modal */}
      <CarRentalModal
        car={detail}
        isOpen={modalOpen}
        onClose={() => setModalOpen(false)}
      />
    </div>
  );
}
