"use client"

import { useState, useEffect } from "react"
import { FiCheck, FiClock, FiEdit3, FiPlus, FiTrash } from "react-icons/fi"
import { toast } from "sonner"

import DeleteConfirmationDialog from "@/components/dialogs/DeleteConfirmationDialog"
import { Button } from "@/components/ui/button"
import Pagination from "@/components/common/pagination"
import Table from "@/components/common/Table"
import EmptyState from "@/components/common/EmptyState"
import { useAuth } from "@/context/AuthContext"
import { getFinanceRequests, deleteFinanceRequest, FinanceRequestListItem } from "@/services/userPanelService"

const FinanceRequestsPage = () => {
  const { token } = useAuth()
  const [requests, setRequests] = useState<FinanceRequestListItem[]>([])
  const [loading, setLoading] = useState(true)
  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
  const [isDeleting, setIsDeleting] = useState(false)
  const [selectedId, setSelectedId] = useState<number | null>(null)

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

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

    setIsDeleting(true)
    try {
      const result = await deleteFinanceRequest(token, selectedId)

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

  const columns = [
    {
      key: "title",
      header: "بيانات الطلب",
      thClassName: "w-2/3",
      tdClassName: "py-2 pr-2",
      render: (request: FinanceRequestListItem) => (
        <div className="flex gap-4">
          <div className="w-15 h-15 rounded-lg overflow-hidden bg-[#F1F5F9] flex items-center justify-center">
            <span className="text-xs text-[#90A1B9]">تمويل</span>
          </div>
          <div className="flex flex-col justify-around">
            <p className="font-medium">{request.fullName}</p>
            <p className="text-[#62748E] text-sm">{request.occupation}</p>
          </div>
        </div>
      ),
    },
    {
      key: "status",
      header: "حالة الطلب",
      render: (request: FinanceRequestListItem) => (
        <span
          className={`
            flex items-center gap-1 w-fit px-2 py-1 rounded-sm text-sm
            ${request.status === "completed" || request.status === "approved" ? "bg-[#F0FDF4] text-[#00A63E]" : ""}
            ${request.status === "reviewing" || request.status === "pending" || request.status === "rejected" ? "bg-[#FFF7ED] text-[#F54900]" : ""}
          `}
        >
          {request.status === 'completed' || request.status === 'approved' ? (
            <FiCheck />
          ) : (
            <FiClock />
          )}
          {request.statusDisplay}
        </span>
      ),
    },
    {
      key: "actions",
      header: "الإجراءات",
      tdClassName: "py-2 pl-2",
      render: (request: FinanceRequestListItem) => (
        <div className="flex justify-center gap-2">
          <Button className="w-8 h-8 bg-[#0525311A] hover:bg-[#0525311A] text-[#05222D] rounded-full font-normal ">
            <FiEdit3 strokeWidth={1.8} />
          </Button>
          <Button
            variant="destructive"
            className="w-8 h-8 bg-[#FEF2F2] hover:bg-[#FEF2F2] text-[#E7000B] rounded-full font-normal "
            onClick={() => {
              setSelectedId(request.id)
              setDeleteDialogOpen(true)
            }}
          >
            <FiTrash />
          </Button>
        </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">
        <div className="flex flex-col md:flex-row items-center justify-between mb-4 gap-4">
          <h4 className="text-[#1D293D] text-lg font-medium">طلبات حساب التمويل</h4>
          <Button
            className="font-normal text-base rounded-full bg-[#0525311A]"
            variant="secondary"
          >
            <FiPlus />
            اضافة طلب جديد
          </Button>
        </div>

        {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 FinanceRequestsPage;