"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import { toast } from "sonner"

export function RentActions({ payment }: { payment: any }) {
  const router = useRouter()
  const [loading, setLoading] = useState(false)

  async function markAs(status: string) {
    setLoading(true)
    await fetch(`/api/rent/${payment.id}`, {
      method: "PATCH",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        status,
        paid_date: status === "paid" ? new Date().toISOString().slice(0, 10) : null,
      }),
    })
    setLoading(false)
    toast.success(status === "paid" ? "Marked as paid" : "Marked as overdue")
    router.refresh()
  }

  async function handleDelete() {
    setLoading(true)
    await fetch(`/api/rent/${payment.id}`, { method: "DELETE" })
    setLoading(false)
    toast.success("Payment deleted")
    router.refresh()
  }

  async function sendLink() {
    setLoading(true)
    const res = await fetch("/api/rent/send-payment-link", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ payment_id: payment.id }),
    })
    const data = await res.json().catch(() => ({}))
    setLoading(false)
    if (res.ok) toast.success(data.message ?? "Payment link emailed to tenant")
    else toast.error(data.error ?? "Failed to send payment link")
    router.refresh()
  }

  if (loading) return <span className="text-xs text-white/30">Updating...</span>

  return (
    <div className="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition">
      {payment.status !== "paid" && (
        <button onClick={() => markAs("paid")} className="text-xs text-emerald-400 hover:text-emerald-300">
          Mark Paid
        </button>
      )}
      {payment.status !== "paid" && (
        <button onClick={sendLink} className="text-xs text-indigo-400 hover:text-indigo-300">
          Send link
        </button>
      )}
      {payment.status !== "overdue" && payment.status !== "paid" && (
        <button onClick={() => markAs("overdue")} className="text-xs text-red-400 hover:text-red-300">
          Mark Overdue
        </button>
      )}
      <button onClick={handleDelete} className="text-xs text-white/30 hover:text-red-400">
        Delete
      </button>
    </div>
  )
}