// src/pages/DealPage.tsx
import { useEffect, useMemo, useState } from "react"
import { useParams } from "react-router-dom"
import Breadcrumbs from "../components/Shared/Breadcrumbs"
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 DealNotice from "../components/DealDetails/DealNotice"
import SimilarDeals from "../components/DealDetails/SimilarDeals"



import { getDealDetail } from "../api/deal/getDeal"
import type { DealDetail, DealNoticeSeverity } 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])

  const statusNotice = useMemo(() => {
    if (!deal) return null

    if (deal.status === "PENDING") {
      return {
        title: "İncelemede",
        body: "Bu fırsat moderasyon incelemesinde. Onaylanınca herkese açık görünecek.",
        severity: "WARNING" as DealNoticeSeverity,
      }
    }

    if (deal.status === "REJECTED") {
      return {
        title: "Reddedildi",
        body: "Bu fırsat moderasyon tarafından reddedildi.",
        severity: "DANGER" as DealNoticeSeverity,
      }
    }

    if (deal.status === "EXPIRED") {
      return {
        title: "Süresi doldu",
        body: "Bu fırsatın süresi dolmuş olabilir. Link/ücret güncel olmayabilir.",
        severity: "INFO" as DealNoticeSeverity,
      }
    }

    return null
  }, [deal])

  if (!deal) {
    return (
      <MainLayout>
        <div className="max-w-[1400px] mx-auto px-4 py-8">
          <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>
      {/* ✅ Navbar'a yapışmasın + sayfa ile aynı hizaya gelsin */}
      <div className="max-w-[1400px] mx-auto px-4 pt-5 pb-2">
        <Breadcrumbs breadcrumb={deal.breadcrumb} currentLabel={deal.title} />
      </div>

      {/* ✅ Aşağıdaki boşluğu azalttık: py-8 -> py-5 */}
      <div className="max-w-[1400px] mx-auto px-4 py-0">
        {statusNotice && (
          <div className="mb-4">
            <DealNotice
              title={statusNotice.title}
              body={statusNotice.body}
              severity={statusNotice.severity}
            />
          </div>
        )}

        {deal.notice && (
          <div className="mb-5">
            <DealNotice
              title={deal.notice.title}
              body={deal.notice.body}
              severity={deal.notice.severity}
            />
          </div>
        )}

        <div className="grid grid-cols-1 lg:grid-cols-12 gap-6">
          <div className="lg:col-span-7">
            <div className="rounded-3xl bg-surface border border-white/10 p-0 sm:p-0">
              <DealImages images={deal.images} isExpired={deal.status === "EXPIRED"} />
            </div>
          </div>

          <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>
          </div>

          {/* ✅ alt taraf boşluğu azalttık: gap-6 -> gap-4 */}
          <div className="lg:col-span-12 flex flex-col gap-4 mt-1">
            <div className="rounded-3xl bg-surface border border-white/10 p-5">
              <DealDescription description={deal.description} />
            </div>
<SimilarDeals deals={deal.similarDeals ?? []} />

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