"use client"

import { useEffect, useMemo, useState } from "react"
import { Stars } from "./Stars"
import { Button } from "@/components/ui/button"
import { DataAPI } from "@/lib/data-api"
import { useToast } from "@/hooks/use-toast"

type MediaItem = { url: string; type: 'image'|'video'; thumbnailUrl?: string }

type Props = {
  open: boolean
  onClose: () => void
  facilityId: string
  existing?: { id: string; rating: number; comment?: string; media?: MediaItem[]; status?: string }
  onSubmitted?: (info?: { review?: any; isRevision?: boolean }) => void
}

export default function ReviewModal({ open, onClose, facilityId, existing, onSubmitted }: Props) {
  const { toast } = useToast()
  const [rating, setRating] = useState(existing?.rating || 0)
  const [comment, setComment] = useState(existing?.comment || "")
  const [media, setMedia] = useState<MediaItem[]>(existing?.media || [])
  const [pending, setPending] = useState(false)

  useEffect(() => {
    if (open) {
      setRating(existing?.rating || 0)
      setComment(existing?.comment || "")
      setMedia(existing?.media || [])
    }
  }, [open, existing])

  const canSubmit = useMemo(() => rating >= 0 && rating <= 5 && !pending, [rating, pending])

  const handleUpload = async (files: FileList | null) => {
    if (!files) return
    const list = Array.from(files).slice(0, Math.max(0, 5 - media.length))
    for (const file of list) {
      if (file.size > 10 * 1024 * 1024) {
        toast({ title: "File too large", description: `${file.name} exceeds 10MB`, variant: "destructive" })
        continue
      }
      try {
        const res = await DataAPI.upload.uploadFile(file, file.type.startsWith('video') ? 'document' : 'facility-image')
        const url = (res as any)?.data?.url || (res as any)?.url
        const type: 'image'|'video' = file.type.startsWith('video') ? 'video' : 'image'
        if (url) setMedia((prev) => [...prev, { url, type }])
      } catch (e:any) {
        toast({ title: "Upload failed", description: e?.message || 'Try again', variant: 'destructive' })
      }
    }
  }

  const handleRemoveMedia = (idx: number) => {
    setMedia((prev) => prev.filter((_, i) => i !== idx))
  }

  const handleSubmit = async () => {
    console.log('[ReviewModal] Submit clicked', { existing, rating, comment, mediaCount: media.length })
    try {
      setPending(true)
      if (existing?.id) {
        console.log('[ReviewModal] Editing existing review', { id: existing.id, status: existing.status })
        if (existing?.status && existing.status !== 'pending') {
          console.log('[ReviewModal] Creating revision for approved review')
          // Directly create a pending revision without hitting the update endpoint
          const payload = { 
            facilityId, 
            rating, 
            content: comment, // API expects 'content', not 'comment'
            photos: media.filter(m=>m.type==='image').map(m=>m.url) // API expects 'photos', not 'media'
          }
          console.log('[ReviewModal] Revision payload:', payload)
          const rev = await DataAPI.reviews.createReview(payload as any)
          console.log('[ReviewModal] Revision response:', rev)
          const wasRevision = (rev as any)?.data?.isRevision
          toast({ 
            title: wasRevision ? "Revision submitted" : "Review submitted", 
            description: wasRevision ? "Your changes are pending admin approval" : "Awaiting approval" 
          })
          onSubmitted?.({ review: (rev as any)?.data?.review, isRevision: wasRevision })
          onClose()
          setPending(false)
          return
        }
        console.log('[ReviewModal] Updating pending review via PUT')
        // Try update; if API blocks (approved), create revision instead
        try {
          const res = await DataAPI.reviews.updateReview(existing.id, { rating, comment, media } as any)
          console.log('[ReviewModal] Update response:', res)
          if (res?.success) {
            toast({ title: "Review updated" })
            onSubmitted?.({ review: (res as any)?.data?.review })
          } else {
            console.log('[ReviewModal] Update failed, creating revision')
            const rev = await DataAPI.reviews.createReview({ 
              facilityId, 
              rating, 
              content: comment, 
              photos: media.filter(m=>m.type==='image').map(m=>m.url) 
            } as any)
            console.log('[ReviewModal] Fallback revision response:', rev)
            toast({ title: "Revision submitted", description: "Awaiting approval" })
            onSubmitted?.({ review: (rev as any)?.data?.review, isRevision: true })
          }
        } catch (updateErr: any) {
          console.log('[ReviewModal] Update threw error, creating revision', updateErr)
          const rev = await DataAPI.reviews.createReview({ 
            facilityId, 
            rating, 
            content: comment, 
            photos: media.filter(m=>m.type==='image').map(m=>m.url) 
          } as any)
          console.log('[ReviewModal] Catch revision response:', rev)
          toast({ title: "Revision submitted", description: "Awaiting approval" })
          onSubmitted?.({ review: (rev as any)?.data?.review, isRevision: true })
        }
      } else {
        console.log('[ReviewModal] Creating new review')
        const res = await DataAPI.reviews.createReview({ 
          facilityId, 
          rating, 
          content: comment, 
          photos: media.filter(m=>m.type==='image').map(m=>m.url) 
        } as any)
        console.log('[ReviewModal] Create response:', res)
        if (res?.success) {
          toast({ title: "Review submitted", description: "Awaiting approval" })
          onSubmitted?.({ review: (res as any)?.data?.review })
        }
      }
      onClose()
    } catch (e:any) {
      console.error('[ReviewModal] Submit error:', e)
      toast({ title: "Failed to submit", description: e?.message || 'Please try again', variant: 'destructive' })
    } finally {
      setPending(false)
    }
  }

  const tooMany = media.length >= 5
  if (!open) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
      <div className="w-full max-w-lg rounded-xl bg-white shadow-xl">
        <div className="p-5 border-b">
          <h3 className="text-lg font-semibold">{existing ? 'Edit your review' : 'Write a review'}</h3>
        </div>
        <div className="p-5 space-y-4">
          <div>
            <div className="mb-2 text-sm text-slate-700">Your rating</div>
            <Stars value={rating} onChange={setRating} size={28} />
          </div>
          <div>
            <div className="mb-2 text-sm text-slate-700">Comments (optional)</div>
            <textarea
              value={comment}
              onChange={(e) => setComment(e.target.value.slice(0, 2000))}
              className="w-full min-h-[100px] rounded-md border p-3 text-sm"
              placeholder="Share details that help others (up to 2000 characters)"
            />
            <div className="mt-1 text-xs text-slate-500">{comment.length}/2000</div>
          </div>
          <div>
            <div className="mb-2 text-sm text-slate-700">Media (optional)</div>
            <input type="file" accept="image/*,video/*" multiple onChange={(e) => handleUpload(e.target.files)} disabled={tooMany} />
            {tooMany && <div className="text-xs text-red-600 mt-1">Maximum 5 files allowed.</div>}
            <div className="mt-3 grid grid-cols-3 gap-2">
              {media.map((m, idx) => (
                <div key={idx} className="relative">
                  <img src={m.url} alt="media" className="h-24 w-full object-cover rounded" />
                  <button className="absolute top-1 right-1 bg-black/60 text-white text-xs px-1 py-0.5 rounded" onClick={() => handleRemoveMedia(idx)}>Remove</button>
                </div>
              ))}
            </div>
          </div>
        </div>
        <div className="p-5 border-t flex justify-end gap-2">
          <Button variant="outline" onClick={onClose} disabled={pending}>Cancel</Button>
          <Button onClick={handleSubmit} disabled={!canSubmit || tooMany}>Submit</Button>
        </div>
      </div>
    </div>
  )
}