// File Path: monorepo/web/frontend/src/pages/Admin/TaskItem/SurveyEventContract/Page.jsx

import React from "react";
import { useNavigate } from "react-router";
import {
  ClipboardDocumentListIcon,
  HomeIcon,
  ChatBubbleLeftRightIcon,
} from "@heroicons/react/24/outline";
import {
  Breadcrumb,
  Button,
  Card,
  Alert,
  useUIXTheme,
  UIXThemeProvider,
} from "../../../../components/UIX";

function AdminTaskItemSurveyEventContractPage() {
  const navigate = useNavigate();
  const { getThemeClasses } = useUIXTheme();

  // Breadcrumb items
  const breadcrumbItems = [
    {
      label: "Dashboard",
      to: "/admin/dashboard",
      icon: HomeIcon,
    },
    {
      label: "Task Items",
      to: "/admin/tasks",
      icon: ClipboardDocumentListIcon,
    },
    {
      label: "Survey Facilitator/Speaker",
      icon: ChatBubbleLeftRightIcon,
      isActive: true,
    },
  ];

  return (
    <UIXThemeProvider>
      <div className={`min-h-screen ${getThemeClasses("bg-primary")}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          {/* Breadcrumb */}
          <Breadcrumb items={breadcrumbItems} />

          {/* Header */}
          <div className="mt-6 mb-8">
            <h1
              className={`text-3xl font-bold ${getThemeClasses("text-primary")}`}
            >
              Survey Facilitator/Speaker for Event Contract
            </h1>
            <p className={`mt-2 ${getThemeClasses("text-secondary")}`}>
              Collect feedback on event delivery and performance
            </p>
          </div>

          {/* Stub Content */}
          <Card>
            <div className="p-6">
              <Alert variant="info" className="mb-6">
                <ChatBubbleLeftRightIcon className="w-5 h-5" />
                <span>This page is under development.</span>
              </Alert>

              <div className="text-center py-12">
                <ChatBubbleLeftRightIcon className="w-16 h-16 mx-auto mb-4 text-gray-400" />
                <h3
                  className={`text-lg font-medium mb-2 ${getThemeClasses("text-primary")}`}
                >
                  Survey Feature Coming Soon
                </h3>
                <p className={`text-sm ${getThemeClasses("text-secondary")}`}>
                  The survey functionality for facilitators and speakers will be
                  available here.
                </p>
              </div>

              <div className="flex justify-end">
                <Button
                  variant="secondary"
                  onClick={() => navigate("/admin/tasks")}
                >
                  Back to Task Items
                </Button>
              </div>
            </div>
          </Card>
        </div>
      </div>
    </UIXThemeProvider>
  );
}

export default AdminTaskItemSurveyEventContractPage;
