// File Path: monorepo/web/frontend/src/pages/Admin/Speaker/Detail/Order/List/Page.jsx

import { Link, useParams } from "react-router";
import {
  ChartBarIcon,
  UserGroupIcon,
  InformationCircleIcon,
  WrenchScrewdriverIcon,
  ChevronLeftIcon,
  ArrowPathIcon,
  EllipsisHorizontalIcon,
} from "@heroicons/react/24/outline";
import { useUIXTheme } from "../../../../../../components/UIX";

// Order status mappings are kept to populate the static filter dropdown
const ORDER_STATUS_OPTIONS = {
  1: { label: "New", colorClass: "text-blue-600" },
  2: { label: "Declined", colorClass: "text-red-600" },
  3: { label: "Pending", colorClass: "text-yellow-600" },
  4: { label: "Cancelled", colorClass: "text-gray-600" },
  5: { label: "Ongoing", colorClass: "text-blue-600" },
  6: { label: "In Progress", colorClass: "text-blue-600" },
  7: { label: "Completed (Unpaid)", colorClass: "text-yellow-600" },
  8: { label: "Completed (Paid)", colorClass: "text-green-600" },
  9: { label: "Archived", colorClass: "text-gray-600" },
};

function AdminSpeakerDetailOrderListPage() {
  const { aid } = useParams();
  const { getThemeClasses } = useUIXTheme();

  // All state, effects, and data-fetching logic have been removed.
  // The page is now a static template.

  const pageSizeOptions = [
    { value: 10, label: "10" },
    { value: 25, label: "25" },
    { value: 50, label: "50" },
    { value: 100, label: "100" },
  ];

  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      {/* Breadcrumb */}
      <nav className="flex mb-6" aria-label="Breadcrumb">
        <ol className="inline-flex items-center space-x-1 md:space-x-3">
          <li className="inline-flex items-center">
            <Link
              to="/admin/dashboard"
              className={`inline-flex items-center text-sm font-medium ${getThemeClasses("text-secondary")} ${getThemeClasses("link-primary")}`}
            >
              <ChartBarIcon className="w-4 h-4 mr-2" />
              Dashboard
            </Link>
          </li>
          <li>
            <div className="flex items-center">
              <span className={`mx-2 ${getThemeClasses("text-muted")}`}>/</span>
              <Link
                to="/admin/speakers"
                className={`text-sm font-medium ${getThemeClasses("text-secondary")} ${getThemeClasses("link-primary")}`}
              >
                <span className="inline-flex items-center">
                  <UserGroupIcon className="w-4 h-4 mr-2" />
                  Speakers
                </span>
              </Link>
            </div>
          </li>
          <li aria-current="page">
            <div className="flex items-center">
              <span className={`mx-2 ${getThemeClasses("text-muted")}`}>/</span>
              <span className={`text-sm font-medium ${getThemeClasses("text-muted")} inline-flex items-center`}>
                <InformationCircleIcon className="w-4 h-4 mr-2" />
                Detail
              </span>
            </div>
          </li>
        </ol>
      </nav>

      {/* Page Title */}
      <div className="mb-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className={`text-3xl font-bold ${getThemeClasses("text-primary")} flex items-center`}>
              <UserGroupIcon className={`w-8 h-8 mr-3 ${getThemeClasses("text-accent")}`} />
              Speaker
            </h1>
            <p className={`mt-1 text-sm ${getThemeClasses("text-secondary")} flex items-center`}>
              <InformationCircleIcon className="w-4 h-4 mr-1" />
              View and manage event contracts
            </p>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className={`${getThemeClasses("bg-card")} shadow-sm rounded-lg`}>
        <>
          {/* Header with Title and Refresh Button */}
          <div className={`px-6 py-5 border-b ${getThemeClasses("card-border")}`}>
            <div className="flex justify-between items-center flex-wrap gap-4">
              <div className="flex items-center gap-4">
                <h2 className={`text-2xl font-semibold ${getThemeClasses("text-primary")} flex items-center`}>
                  <WrenchScrewdriverIcon className={`w-7 h-7 mr-2 ${getThemeClasses("text-accent")}`} />
                  Event Contracts
                </h2>
              </div>
              <button className={`inline-flex items-center px-5 py-2.5 border ${getThemeClasses("border-border")} rounded-lg text-base font-medium ${getThemeClasses("text-secondary")} ${getThemeClasses("bg-card")} hover:bg-opacity-80 transition-colors`}>
                <ArrowPathIcon className="w-5 h-5 mr-2" />
                Refresh
              </button>
            </div>
          </div>

          {/* Tab Navigation */}
          <div className={`px-6 border-b ${getThemeClasses("card-border")}`}>
            <nav className="-mb-px flex space-x-8">
              <Link
                to={`/admin/speaker/${aid}`}
                className={`border-b-2 border-transparent py-4 px-1 text-base font-medium ${getThemeClasses("text-muted")} hover:text-opacity-80 transition-colors`}
              >
                Summary
              </Link>
              <Link
                to={`/admin/speaker/${aid}/detail`}
                className={`border-b-2 border-transparent py-4 px-1 text-base font-medium ${getThemeClasses("text-muted")} hover:text-opacity-80 transition-colors`}
              >
                Detail
              </Link>
              <div className={`border-b-2 border-blue-600 py-4 px-1 text-base font-medium ${getThemeClasses("text-accent")}`}>
                Event Contracts
              </div>
              <Link
                to={`/admin/speaker/${aid}/comments`}
                className={`border-b-2 border-transparent py-4 px-1 text-base font-medium ${getThemeClasses("text-muted")} hover:text-opacity-80 transition-colors`}
              >
                Comments
              </Link>
              <Link
                to={`/admin/speaker/${aid}/attachments`}
                className={`border-b-2 border-transparent py-4 px-1 text-base font-medium ${getThemeClasses("text-muted")} hover:text-opacity-80 transition-colors`}
              >
                Attachments
              </Link>
              <Link
                to={`/admin/speaker/${aid}/more`}
                className={`border-b-2 border-transparent py-4 px-1 text-base font-medium ${getThemeClasses("text-muted")} hover:text-opacity-80 transition-colors inline-flex items-center`}
              >
                More
                <EllipsisHorizontalIcon className="w-5 h-5 ml-1" />
              </Link>
            </nav>
          </div>

          <div className="p-6">
            {/* Filters Section */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
              <div>
                <label className={`block text-sm font-medium ${getThemeClasses("text-secondary")} mb-2`}>
                  Status Filter:
                </label>
                <select className={`block w-full px-3 py-2 border ${getThemeClasses("border-border")} rounded-lg focus:ring-2 ${getThemeClasses("input-focus-ring")}`}>
                  <option value={0}>All Statuses</option>
                  {Object.entries(ORDER_STATUS_OPTIONS).map(
                    ([value, option]) => (
                      <option key={value} value={value}>
                        {option.label}
                      </option>
                    ),
                  )}
                </select>
              </div>

              <div>
                <label className={`block text-sm font-medium ${getThemeClasses("text-secondary")} mb-2`}>
                  Sort By:
                </label>
                <select className={`block w-full px-3 py-2 border ${getThemeClasses("border-border")} rounded-lg focus:ring-2 ${getThemeClasses("input-focus-ring")}`}>
                  <option value="assignment_date,DESC">
                    Assignment Date (Newest)
                  </option>
                  <option value="assignment_date,ASC">
                    Assignment Date (Oldest)
                  </option>
                  <option value="start_date,DESC">Start Date (Newest)</option>
                  <option value="start_date,ASC">Start Date (Oldest)</option>
                  <option value="created_at,DESC">Created Date (Newest)</option>
                  <option value="created_at,ASC">Created Date (Oldest)</option>
                </select>
              </div>

              <div>
                <label className={`block text-sm font-medium ${getThemeClasses("text-secondary")} mb-2`}>
                  Items per page:
                </label>
                <select className={`block w-full px-3 py-2 border ${getThemeClasses("border-border")} rounded-lg focus:ring-2 ${getThemeClasses("input-focus-ring")}`}>
                  {pageSizeOptions.map((option) => (
                    <option key={option.value} value={option.value}>
                      {option.label}
                    </option>
                  ))}
                </select>
              </div>
            </div>

            {/* Results Count */}
            <div className={`mb-6 ${getThemeClasses("text-secondary")}`}>
              Showing <strong className={getThemeClasses("text-primary")}>0</strong> event contracts
            </div>

            {/* Event Contracts List */}
            <div className={`text-center py-16 ${getThemeClasses("bg-muted")} rounded-lg`}>
              <WrenchScrewdriverIcon className={`w-12 h-12 ${getThemeClasses("text-muted")} mx-auto mb-4`} />
              <h3 className={`text-lg font-medium ${getThemeClasses("text-primary")} mb-2`}>
                No Event Contracts Found
              </h3>
              <p className={getThemeClasses("text-muted")}>
                This speaker does not have any event contracts yet.
              </p>
            </div>

            {/* Action Buttons */}
            <div className={`flex justify-start mt-8 pt-6 border-t ${getThemeClasses("border-border")}`}>
              <Link to="/admin/speakers">
                <button className={`inline-flex items-center px-5 py-2.5 border ${getThemeClasses("border-border")} rounded-lg text-base font-medium ${getThemeClasses("text-secondary")} ${getThemeClasses("bg-card")} hover:bg-opacity-80 transition-colors`}>
                  <ChevronLeftIcon className="w-5 h-5 mr-2" />
                  Back to Speakers
                </button>
              </Link>
            </div>
          </div>
        </>
      </div>
    </div>
  );
}

export default AdminSpeakerDetailOrderListPage;
