"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import { FiCreditCard, FiEdit3, FiMoreHorizontal, FiPlus, FiTrash } from "react-icons/fi"
import { toast } from "sonner"

import { RiyalIcon } from "@/components/icons/RandomIcons"
import { Button } from "@/components/ui/button"
import Pagination from "@/components/common/pagination"
import Table from "@/components/common/Table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import DeleteConfirmationDialog from "@/components/dialogs/DeleteConfirmationDialog"
import EmptyState from "@/components/common/EmptyState"
import { useAuth } from "@/context/AuthContext"
import { getMarketingProperties, deleteMarketingProperty, MarketingPropertyListItem } from "@/services/userPanelService"

const MARKETING_STATUS_STYLES: Record<string, string> = {
  paid: "bg-[#F0FDF4] text-[#00A63E]",
  payment_failed: "bg-[#FEF2F2] text-[#E7000B]",
  draft: "bg-[#0525311A] text-[#05222D]",
  pending: "bg-[#FFF7ED] text-[#F54900]",
}

const RequestsPage = () => {
  const { token } = useAuth()
  const [requests, setRequests] = useState<MarketingPropertyListItem[]>([])
  const [loading, setLoading] = useState(true)
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [selectedRequest, setSelectedRequest] = useState<MarketingPropertyListItem | null>(null)

  useEffect(() => {
    if (!token) { setLoading(false); return }
    getMarketingProperties(token).then((data) => {
      setRequests(data)
      setLoading(false)
    })
  }, [token])

  const handleDelete = async () => {
    if (!token || !selectedRequest) return

    setIsDeleting(true)
    try {
      const result = await deleteMarketingProperty(token, selectedRequest.id)

      if (result.success) {
        // Optimistic / Immediate UI update
        setRequests((prev) => prev.filter((r) => r.id !== selectedRequest.id))
        setDeleteDialogOpen(false)
        toast.success("تم حذف الطلب بنجاح")
      } else {
        if (result.status === 401 || result.status === 403) {
          toast.error("انتهت الجلسة أو ليس لديك صلاحية للحذف. يرجى تسجيل الدخول مرة أخرى.")
        } else {
          toast.error("فشل حذف الطلب. يرجى المحاولة لاحقاً.")
        }
      }
    } catch (error) {
      toast.error("حدث خطأ غير متوقع.")
    } finally {
      setIsDeleting(false)
      setSelectedRequest(null)
    }
  }

  const columns = [
    {
      key: "title",
      header: "العنوان",
      thClassName: "w-2/4",
      tdClassName: "py-2 pr-2",
      render: (request: MarketingPropertyListItem) => (
        <div className="flex gap-4">
          <div className="w-15 h-15 rounded-lg overflow-hidden">
            <Image
              className="w-full h-full object-cover"
              src={request.img}
              alt=""
              width={100}
              height={100}
            />
          </div>
          <div className="flex flex-col justify-around">
            <p className="font-medium">{request.title}</p>
            <p className="text-[#62748E] text-sm">{request.city}</p>
          </div>
        </div>
      ),
    },
    {
      key: "status",
      header: "حالة الطلب",
      render: (request: MarketingPropertyListItem) => (
        <span
          className={`w-fit px-2 py-1 rounded-sm text-sm ${MARKETING_STATUS_STYLES[request.status] || "bg-[#0525311A] text-[#05222D]"}`}
        >
          {request.statusDisplay}
        </span>
      ),
    },
    {
      key: "price",
      header: "التكلفة",
      render: (request: MarketingPropertyListItem) => (
        <div className="flex items-center gap-1 text-sm">
          <span>{request.price.toLocaleString()}</span>
          <RiyalIcon size={16} />
        </div>
      ),
    },
    {
      key: "actions",
      header: "الإجراءات",
      tdClassName: "py-2 pl-2",
      render: (request: MarketingPropertyListItem) => (
        <div className="flex items-center justify-end gap-4">
          {(request.status === "draft" || request.status === "payment_failed") && (
            <Button className="has-[>svg]:px-4 rounded-full font-normal">
              <FiCreditCard />
              <span>دفــع</span>
            </Button>
          )}

          <DropdownMenu dir="rtl">
            <DropdownMenuTrigger asChild>
              <Button
                className="bg-[#0525311A] text-[#05222D] rounded-full"
                variant="ghost"
                size="icon"
              >
                <FiMoreHorizontal />
              </Button>
            </DropdownMenuTrigger>

            <DropdownMenuContent>
              <DropdownMenuItem>
                <FiEdit3 />
                تعديل الطلب
              </DropdownMenuItem>
              <DropdownMenuItem
                variant="destructive"
                onClick={() => {
                  setSelectedRequest(request)
                  setDeleteDialogOpen(true)
                }}
              >
                <FiTrash />
                حذف
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      ),
    },
  ]

  if (loading) {
    return (
      <div className="flex-1 flex items-center justify-center py-20">
        <div className="w-8 h-8 border-2 border-[#0092B8] border-t-transparent rounded-full animate-spin" />
      </div>
    )
  }

  return (
    <div className="flex-1 overflow-auto">
      <div className="lg:w-3/4 lg:mx-auto">
        <h4 className="text-[#1D293D] text-lg font-medium">طلبات تسويق عقارية</h4>

        {requests.length > 0 ? (
          <>
            <Table columns={columns} data={requests} />
            <Pagination
              currentPage={1}
              totalPages={Math.ceil(requests.length / 10)}
              pageSize={10}
              totalCount={requests.length}
              onPageChange={() => { }}
            />
          </>
        ) : (
          <EmptyState title="لا توجد طلبات تسويق عقارية" description="قم بإضافة طلب جديد للبدء" />
        )}
      </div>

      <DeleteConfirmationDialog
        open={deleteDialogOpen}
        onOpenChange={setDeleteDialogOpen}
        onConfirm={handleDelete}
        isLoading={isDeleting}
      />
    </div>
  )
}

export default RequestsPage