"use client"

import { useEffect, useState } from "react"
import { Header } from "@/components/ui/header"
import { Button } from "@/components/ui/button"
import ReviewCard from "@/components/reviews/ReviewCard"
import { DataAPI } from "@/lib/data-api"
import { useToast } from "@/components/ui/toast"

export default function OwnerReviewsPage() {
  const [reviews, setReviews] = useState<any[]>([])
  const [filter, setFilter] = useState<'pending'|'approved'|'rejected'|'all'>('pending')
  const toast = useToast()

  const load = async () => {
    const params: any = {}
    if (filter !== 'all') params.status = filter
    const res = await fetch(`/api/owner/reviews${new URLSearchParams(params).toString() ? `?${new URLSearchParams(params).toString()}` : ''}`)
    const data = await res.json()
    setReviews(data?.data?.reviews || [])
  }

  useEffect(()=>{ load() },[filter])

  const flag = async (id: string) => {
    try {
      await fetch(`/api/reviews/${id}/flag`, { method: 'POST', body: JSON.stringify({ reason: 'Owner flagged' }), headers: { 'Content-Type': 'application/json' } })
      toast.success("Flagged for review")
      load()
    } catch {}
  }

  return (
    <div className="min-h-screen bg-slate-50">
      <Header />
      <main className="container mx-auto px-4 py-8">
        <div className="flex items-center justify-between mb-4">
          <h1 className="text-2xl font-bold">Facility Reviews</h1>
          <div className="flex gap-2">
            {(['pending','approved','rejected','all'] as const).map((s)=> (
              <Button key={s} variant={filter===s? 'default':'outline'} size="sm" onClick={()=>setFilter(s)} className="capitalize">{s}</Button>
            ))}
          </div>
        </div>
        {reviews.length===0 ? (
          <div className="text-sm text-slate-600">No reviews in this state.</div>
        ) : (
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            {reviews.map((r)=> (
              <div key={r.id}>
                <ReviewCard review={r} />
                <div className="mt-2 flex justify-end">
                  <Button variant="outline" size="sm" onClick={()=>flag(r.id)}>Flag</Button>
                </div>
              </div>
            ))}
          </div>
        )}
      </main>
    </div>
  )
}