import CourseCard from '../../components/CourseCard.jsx';
import {
  Typography,
  SearchField,
  Separator,
  Button,
  Tabs
} from '@heroui/react';
import {
  BellIcon,
  QuestionMarkCircleIcon,
  UserCircleIcon,
  FunnelIcon,
  PlusIcon
} from '@heroicons/react/16/solid';

const stats = [
  {
    code: 'LDR-101',
    title: 'Foundations of Modern Leadership',
    description:
      'An introductory course covering essential leadership principles for new managers.',
    status: 'Published',
    lastUpdate: '2026-08-19',
    image:
      'https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=800&q=80'
  },
  {
    code: 'TEC-204',
    title: 'Advanced Cloud Architecture Patterns',
    description:
      'Deep dive into scalable cloud infrastructure design and implementation strategies.',
    status: 'Draft',
    lastUpdate: '2026-08-19',
    image:
      'https://images.unsplash.com/photo-1533090161767-e6ffed986c88?auto=format&fit=crop&w=800&q=80'
  },
  {
    code: 'CMP-099',
    title: '2022 Annual Compliance Review',
    description: 'Outdated compliance materials from the previous fiscal year.',
    status: 'Archived',
    lastUpdate: '2026-08-19',
    image:
      'https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=800&q=80'
  }
];

function CoursePage() {
  return (
    <>
      <div className="mb-3 flex flex-row items-center justify-between">
        <SearchField name="search">
          <SearchField.Group className="rounded-xl border border-gray-300 w-100">
            <SearchField.SearchIcon />

            <SearchField.Input
              className="flex-1"
              placeholder="Search LMS Author"
            />

            <SearchField.ClearButton />
          </SearchField.Group>
        </SearchField>
        <div className="flex flex-row items-center gap-5">
          <BellIcon className="mr-1 inline h-6 w-6" />
          <QuestionMarkCircleIcon className="mr-1 inline h-6 w-6" />
          <UserCircleIcon className="mr-1 inline h-6 w-6" />
        </div>
      </div>
      <Separator className="my-4" />
      <div className="mb-4 flex flex-row items-center justify-between">
        <div>
          <Typography variant="h3" className="mb-2">
            Course
          </Typography>
          <Typography variant="body1" className="text-gray-600">
            Manage and organize your learning content.
          </Typography>
        </div>
        <div className="flex flex-row item-center gap-2">
          <Button variant="outline" className="rounded-lg">
            <FunnelIcon />
            Filter
          </Button>
          <Button className="rounded-lg">
            <PlusIcon />
            New Course
          </Button>
        </div>
      </div>
      <Separator className="my-4" />
      <div className="flex flex-row items-center justify-between my-3 bg-white rounded-md border p-3">
        <Tabs defaultSelectedKey="all" className="w-fit">
          <Tabs.ListContainer>
            <Tabs.List
              aria-label="Course status"
              className="gap-1 rounded-md bg-gray-100"
            >
              <Tabs.Tab
                id="all"
                className="h-7 rounded px-6 py-5 text-base font-normal text-gray-700"
              >
                All
                <Tabs.Indicator className="rounded bg-white shadow-sm" />
              </Tabs.Tab>

              <Tabs.Tab
                id="draft"
                className="h-7 rounded px-6 py-5 text-base font-normal text-gray-500"
              >
                Draft
                <Tabs.Indicator className="rounded bg-white shadow-sm" />
              </Tabs.Tab>

              <Tabs.Tab
                id="published"
                className="h-7 rounded px-6 py-5 text-base font-normal text-gray-500"
              >
                Published
                <Tabs.Indicator className="rounded bg-white shadow-sm" />
              </Tabs.Tab>

              <Tabs.Tab
                id="archived"
                className="h-7 rounded px-6 py-5 text-base font-normal text-gray-500"
              >
                Archived
                <Tabs.Indicator className="rounded bg-white shadow-sm" />
              </Tabs.Tab>
            </Tabs.List>
          </Tabs.ListContainer>
        </Tabs>
        <SearchField name="search">
          <SearchField.Group className="rounded-xl border border-gray-300 w-100">
            <SearchField.SearchIcon />

            <SearchField.Input placeholder="Search course by title or code..." />

            <SearchField.ClearButton />
          </SearchField.Group>
        </SearchField>
      </div>
      <div className="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-4">
        {stats.map((course) => (
          <CourseCard key={course.code} course={course} image={course.image} />
        ))}
      </div>
    </>
  );
}

export default CoursePage;