"use client";

import { Layout } from "@/components/organisms/Layout";
import { getData } from "@/server/interceptor";
import { convertListVersion } from "@/utils/helpers";
import Link from "next/link";
import { useParams } from "next/navigation";
import { useEffect, useState } from "react";
import { FaCalendar, FaWhatsapp } from "react-icons/fa";

export default function ProductPage() {
  const { slug } = useParams(); // Ambil slug dari URL
  const [rentalDays, setRentalDays] = useState(1); // Jumlah hari sewa

  const [product, setProduct] = useState({
    id: 0,
    name: "",
    slug: "",
    camera: "",
    price: "",
    os: "",
    ram: "",
    storage: "",
    battery: "",
    screen: "",
    available: false,
    description: "",
    advantages: "",
    notes: "",
    link_youtube: "",
    picture: "",
    createdAt: "",
    updatedAt: "",
  }); // Data produk

  const calculateTotal = (days: number) => Number(product.price) * days;

  const fetchProduct = async () => {
    try {
      const response = await getData(`/products/slug/${slug}`);
      setProduct(response);
      document.title = `${response.name} - Rentaliphone`;
    } catch (error: any) {
      console.error(error);
    }
  };

  useEffect(() => {
    fetchProduct();
  }, [slug]);

  return (
    <Layout>
      <section className="bg-gray-50 py-20">
        <div className="container mx-auto px-4 sm:px-6 lg:px-64">
          {/* Video Produk */}
          <iframe
            className="w-full rounded-md shadow-sm mb-6"
            height="315"
            src={product.link_youtube}
            title="YouTube video player"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          ></iframe>

          {/* Judul & Harga */}
          <h1 className="text-3xl font-semibold text-gray-900 mb-4">
            {product.name}
          </h1>
          <hr className="my-4 border-gray-300" />

          {/* Informasi Produk */}
          <h2 className="text-xl font-semibold text-gray-800 mb-2">
            Informasi Produk
          </h2>
          <p className="text-gray-700 mb-6">
            {/* <div htmldangers */}
            <div
              dangerouslySetInnerHTML={{
                __html: convertListVersion(product.description).newContent,
              }}
            />
          </p>
          <hr className="my-4 border-gray-300" />

          {/* Spesifikasi */}
          <div className="mb-6">
            <h3 className="text-xl font-semibold text-gray-800 mb-2">
              Spesifikasi
            </h3>
            <ul className="list-disc ml-6 space-y-2 text-gray-700">
              <li>
                Kamera: <span className="font-semibold">{product.camera}</span>
              </li>
              <li>
                Harga: <span className="font-semibold">{product.price}</span>
              </li>
              <li>
                OS: <span className="font-semibold">{product.os}</span>
              </li>
              <li>
                RAM: <span className="font-semibold">{product.ram}</span>
              </li>
              <li>
                Storage:{" "}
                <span className="font-semibold">{product.storage}</span>
              </li>
              <li>
                Battery:{" "}
                <span className="font-semibold">{product.battery}</span>
              </li>
              <li>
                Screen: <span className="font-semibold">{product.screen}</span>
              </li>
            </ul>
          </div>
          <hr className="my-4 border-gray-300" />

          {/* Keunggulan */}
          <div className="mb-6">
            <h3 className="text-lg font-semibold text-gray-800 mb-2">
              Keunggulan
            </h3>

            <div
              dangerouslySetInnerHTML={{
                __html: convertListVersion(product.advantages).newContent,
              }}
            />
          </div>
          <hr className="my-4 border-gray-300" />

          {/* Catatan */}
          <div className="mb-6">
            <h3 className="text-lg font-semibold text-gray-800 mb-2">
              Catatan
            </h3>
            <div
              dangerouslySetInnerHTML={{
                __html: convertListVersion(product.notes).newContent,
              }}
            />
          </div>
          <hr className="my-4 border-gray-300" />

          {/* Perhitungan Sewa */}
          <div className="mb-6">
            <h3 className="text-lg font-semibold text-gray-800 mb-2">
              Perhitungan Sewa
            </h3>
            <div className="relative grid grid-cols-4 sm:grid-cols-3 md:grid-cols-5 gap-4 mb-4">
              {/* Input dengan ikon */}
              <input
                type="number"
                placeholder="Masukkan Jumlah Hari"
                value={rentalDays}
                onChange={(e) => setRentalDays(Number(e.target.value))}
                className="w-full border border-gray-300 rounded-md p-2 pl-10 focus:outline-none focus:ring-2 focus:ring-blue-500"
              />
              <FaCalendar className="absolute top-1/2 left-3 transform -translate-y-1/2 text-gray-400" />
            </div>
            <p className="text-lg font-semibold text-gray-800">
              Total: Rp {calculateTotal(rentalDays).toLocaleString()}
            </p>
          </div>
          <hr className="my-4 border-gray-300" />

          {/* CTA WhatsApp */}
          <div className="text-center">
            <Link
              href={`/kontak?product=${
                product.slug
              }&days=${rentalDays}&total=${calculateTotal(rentalDays)}`}
              target="_blank"
              rel="noopener noreferrer"
              className="flex items-center justify-center bg-green-500 text-white py-4 px-6 rounded-lg hover:bg-green-600 transition shadow-md"
            >
              <FaWhatsapp className="mr-3 text-xl" />
              <span className="text-lg font-medium">
                Sewa Sekarang via WhatsApp
              </span>
            </Link>
          </div>
        </div>
      </section>
    </Layout>
  );
}