import formatPrice from "@/shared/lib/formatPrice";
import { Eye } from "lucide-react";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";

type Booking = {
  id: number;
  userName: string;
  tourName: string;
  agentName: string;
  destination: string;
  totalAmount: number;
  paidAmount: number;
  status: "Paid" | "Partial" | "Pending";
};

const initialBookings: Booking[] = [
  {
    id: 1,
    userName: "Alijon Saidov",
    tourName: "Ichan Qala - Xiva",
    agentName: "Xiva Tours",
    destination: "Xiva",
    totalAmount: 1200000,
    paidAmount: 1200000,
    status: "Paid",
  },
  {
    id: 2,
    userName: "Shahnoza Karimova",
    tourName: "Samarqandning Qadimiy Go'zalligi",
    agentName: "Samarqand Travel",
    destination: "Samarqand",
    totalAmount: 1500000,
    paidAmount: 800000,
    status: "Partial",
  },
  {
    id: 3,
    userName: "Javlon Tursunov",
    tourName: "Tog'li Chimyon Sayohati",
    agentName: "Toshkent Explorer",
    destination: "Toshkent V.",
    totalAmount: 1000000,
    paidAmount: 400000,
    status: "Pending",
  },
];

const getStatusColor = (status: string) => {
  switch (status) {
    case "Paid":
      return "bg-gray-600 text-green-500 border-gray-500";
    case "Partial":
      return "bg-gray-600 text-yellow-500 border-gray-600";
    case "Pending":
      return "bg-gray-600 text-red-500 border-gray-600";
    default:
      return "bg-gray-600 text-gray-100 border-gray-500";
  }
};

const BookingsPanel = () => {
  const { t } = useTranslation();
  const bookings = initialBookings;

  return (
    <div className="min-h-screen bg-gray-900 p-4 sm:p-8 font-[Inter] text-gray-100 w-full">
      <div className="max-w-[90%] mx-auto">
        <h1 className="text-3xl sm:text-4xl font-extrabold text-blue-400 mb-6">
          {t("Bronlar Paneli")}
        </h1>

        <div className="bg-gray-800 shadow-2xl rounded-xl overflow-hidden">
          <div className="overflow-x-auto">
            <table className="min-w-full divide-y divide-gray-700">
              <thead className="bg-gray-700">
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                    {t("Foydalanuvchi")}
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                    {t("Tour (Agent)")}
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                    {t("Destination")}
                  </th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
                    {t("Total / Paid")}
                  </th>
                  <th className="px-6 py-3 text-center text-xs font-medium text-gray-300 uppercase tracking-wider">
                    {t("Status")}
                  </th>
                  <th className="px-6 py-3 text-center text-xs font-medium text-gray-300 uppercase tracking-wider">
                    {t("Ko'rish")}
                  </th>
                </tr>
              </thead>
              <tbody className="bg-gray-800 divide-y divide-gray-700">
                {bookings.map((booking) => (
                  <tr
                    key={booking.id}
                    className="hover:bg-gray-700 transition duration-150 ease-in-out"
                  >
                    <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-100">
                      {booking.userName}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                      <span className="font-semibold">{booking.tourName}</span>{" "}
                      <span className="text-gray-400">
                        ({booking.agentName})
                      </span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                      {booking.destination}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-300">
                      {formatPrice(booking.paidAmount, true)} /{" "}
                      {formatPrice(booking.totalAmount, true)}
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-center">
                      <p
                        className={`px-3 py-1 text-xs font-semibold rounded-full border ${getStatusColor(
                          booking.status,
                        )}`}
                      >
                        {booking.status}
                      </p>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-center">
                      <Link to={`/bookings/${booking.id}`}>
                        <button className="bg-blue-600 text-white px-3 py-2 rounded-lg hover:bg-blue-700 flex items-center gap-1 transition-colors">
                          <Eye className="w-4 h-4" /> {t("Details")}
                        </button>
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  );
};

export default BookingsPanel;
