// src/pages/DealPage.tsx
import { useEffect, useState } from "react"
import { useParams } from "react-router-dom"

import MainLayout from "../layouts/MainLayout"
import DealImages from "../components/DealDetails/DealImages"
import DealDetails from "../components/DealDetails/DealDetails"
import DealDescription from "../components/DealDetails/DealDescription"
import DealComments from "../components/DealDetails/DealComments"

import { getDealDetail } from "../api/deal/getDeal"
import type { DealDetail } from "../models/deal/DealDetail"

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

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

  useEffect(() => {
    if (!id) return
    ;(async () => {
      try {
        const d = await getDealDetail(Number(id))
        setDeal(d)
      } catch (err) {
        console.error("Deal yüklenemedi:", err)
      }
    })()
  }, [id])

  if (!deal) {
    return (
      <MainLayout>
        <div className="max-w-[1400px] mx-auto px-4 py-10">
          <div className="rounded-3xl bg-surface border border-white/10 p-6">
            <p className="text-text-muted">Yükleniyor...</p>
          </div>
        </div>
      </MainLayout>
    )
  }



  return (
    <MainLayout>
      <div className="max-w-[1400px] mx-auto px-4 py-8">
        {/* üst ana grid */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
          {/* SOL: Görseller */}
          <div className="lg:col-span-7">
            <div className="rounded-3xl bg-surface border border-white/10 p-4 sm:p-5">
              <DealImages images={deal.images} />
            </div>
          </div>

          {/* SAĞ: Detay kartı (sticky) */}
          <div className="lg:col-span-5">
            <div className="lg:sticky lg:top-24">

                <DealDetails
                  title={deal.title}
                  price={deal.price?.toString() ?? "-"}
                  store={deal.seller.name}
                  link={deal.url ?? ""}
                  postedBy={deal.user.username}
                  postedAgo={deal.createdAt}
                />
              </div>

              {/* küçük yan bilgi alanı */}


          </div>

          {/* ALT: Açıklama + Yorumlar */}
{/* ALT: açıklama + yorumlar (tam genişlik) */}
<div className="lg:col-span-12 flex flex-col gap-6 mt-1">
  <div className="rounded-3xl bg-surface border border-white/10 p-5">
    <DealDescription description={deal.description} />
  </div>

  <DealComments dealId={deal.id} onRequireLogin={onRequireLogin} />
</div>

        </div>
      </div>
    </MainLayout>
  )
}
