// src/pages/DealPage.tsx
import { useEffect, useState } from "react"
import { useParams } from "react-router-dom"
import { getDeal } from "../api/deal/getDeal"
import MainLayout from "../layouts/MainLayout"
import DealImages from "../components/DealScreen/DealImages"
import DealDetails from "../components/DealScreen/DealDetails"
import DealDescription from "../components/DealScreen/DealDescription"
import DealComments from "../components/DealScreen/DealComments"
import type { Deal } from "../models/Deal"

type DealPageProps = {
  onRequireLogin: () => void
}

export default function DealPage({ onRequireLogin }: DealPageProps) {
  const { id } = useParams()
  const [deal, setDeal] = useState<Deal | null>(null)

  useEffect(() => {
    if (!id) return
    getDeal(Number(id))
      .then(setDeal)
      .catch((err) => console.error("Deal yüklenemedi:", err))
  }, [id])

  if (!deal) return <p className="p-4">Yükleniyor...</p>

  return (
    <MainLayout>
      <div className="max-w-[1400px] mx-auto px-4 py-8 grid grid-cols-1 lg:grid-cols-4 gap-6">
        {/* Sol: görsel */}
        <div className="lg:col-span-1 flex justify-center items-start">
          <DealImages imageUrl={deal.images?.[0]?.imageUrl || "/placeholder.png"} />
        </div>

        {/* Sağ: detaylar */}
        <div className="lg:col-span-3 flex flex-col gap-6">
          <DealDetails
            title={deal.title}
            price={deal.price?.toString() || "-"}
            store={deal.url || ""}
            link={deal.url || ""}
            postedBy={deal.user?.username || "Anonim"}
            postedAgo={deal.createdAt}
          />
        </div>

        {/* Alt: açıklama + yorumlar */}
        <div className="lg:col-span-4 flex flex-col gap-6">
          <section>
            <DealDescription description={deal.description || ""} />
          </section>
          <section>
            <DealComments dealId={deal.id} onRequireLogin={onRequireLogin} />
          </section>
        </div>
      </div>
    </MainLayout>
  )
}
