"use client";

import { useEffect, useState } from "react";
import api from "@/lib/api";

import {
  Wallet,
  RefreshCw,
} from "lucide-react";

export default function VendorPayoutsPage() {
  const [loading, setLoading] = useState(true);
  const [payouts, setPayouts] = useState<any[]>([]);

  useEffect(() => {
    loadPayouts();
  }, []);

  const loadPayouts = async () => {
    try {
      const token = localStorage.getItem("auth_token");

      const res = await api.get("/vendor/payouts", {
        headers: {
          Authorization: `Bearer ${token}`,
        },
      });

      setPayouts(res.data.data.data || []);
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="space-y-6">

      <div className="bg-white rounded-[2rem] border border-green-100 shadow-sm p-8">
        <div className="flex justify-between items-center">

          <div>
            <h1 className="text-3xl font-black flex items-center gap-3">
              <Wallet className="text-green-600" />
              Payout History
            </h1>

            <p className="text-slate-500 mt-2">
              Track all your withdrawals and payouts
            </p>
          </div>

          <button
            onClick={loadPayouts}
            className="cursor-pointer bg-green-600 text-white px-4 py-2 rounded-xl flex items-center gap-2"
          >
            <RefreshCw size={16} />
            Refresh
          </button>

        </div>
      </div>

      <div className="bg-white rounded-[2rem] border border-green-100 shadow-sm overflow-hidden">

        {loading ? (
          <div className="p-10 text-center">
            Loading payouts...
          </div>
        ) : payouts.length === 0 ? (
          <div className="p-10 text-center text-slate-500">
            No payout history found
          </div>
        ) : (
          <div className="overflow-x-auto">

            <table className="w-full">

              <thead className="bg-green-50">
                <tr>

                  <th className="p-4 text-left">
                    ID
                  </th>

                  <th className="p-4 text-left">
                    Amount
                  </th>

                  <th className="p-4 text-left">
                    Method
                  </th>

                  <th className="p-4 text-left">
                    Transaction ID
                  </th>

                  <th className="p-4 text-left">
                    Status
                  </th>

                  <th className="p-4 text-left">
                    Paid Date
                  </th>

                </tr>
              </thead>

              <tbody>

                {payouts.map((payout) => (
                  <tr
                    key={payout.id}
                    className="border-t"
                  >
                    <td className="p-4 font-bold">
                      #{payout.id}
                    </td>

                    <td className="p-4">
                      ৳{payout.amount}
                    </td>

                    <td className="p-4">
                      {payout.payment_method}
                    </td>

                    <td className="p-4">
                      {payout.transaction_id || "-"}
                    </td>

                    <td className="p-4">
                      <span
                        className={`px-3 py-1 rounded-full text-sm ${
                          payout.status === "paid"
                            ? "bg-green-100 text-green-700"
                            : payout.status === "pending"
                            ? "bg-yellow-100 text-yellow-700"
                            : "bg-red-100 text-red-700"
                        }`}
                      >
                        {payout.status}
                      </span>
                    </td>

                    <td className="p-4">
                      {payout.paid_at
                        ? new Date(
                            payout.paid_at
                          ).toLocaleDateString()
                        : "-"}
                    </td>
                  </tr>
                ))}

              </tbody>

            </table>

          </div>
        )}

      </div>
    </div>
  );
}