'use client';

import { useState } from 'react';
import { Plus, Search } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { DataTable, type Column } from '@/components/ui/data-table';
import { PermissionGuard } from '@/features/auth/guards';
import { PERMISSIONS } from '@/constants/permissions';
import { useCourses } from '@/services/courses/queries';
import { useAllSectors } from '@/services/sectors/queries';
import type { CourseItem } from '@/services/courses/types';
import { CreateCourseModal } from './_components/CreateCourseModal';

export default function CoursesPage() {
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState('');
  const [sectorId, setSectorId] = useState('');
  const [open, setOpen] = useState(false);

  // Queries
  const courses = useCourses(page, search, sectorId);
  const sectors = useAllSectors('', '');

  // Table Column Definitions
  const columns: Column<CourseItem>[] = [
    {
      header: 'Course',
      cell: (course) => (
        <div>
          <div className="font-semibold">{course.name}</div>
          <div className="text-[10px] text-muted-foreground">
            {course.description || 'No description'}
          </div>
        </div>
      ),
    },
    {
      header: 'Sector',
      cell: (course) => `${course.sector.name} (${course.sector.code})`,
    },
    {
      header: 'Duration',
      cell: (course) =>
        `${course.durationWeeks} week${course.durationWeeks === 1 ? '' : 's'}`,
    },
    {
      header: 'Enrollments',
      cell: (course) => course._count?.enrollments ?? 0,
    },
  ];

  return (
    <div className="mx-auto max-w-7xl space-y-4">
      {/* Header Section */}
      <div className="flex items-center justify-between border-b border-border/10 pb-4">
        <div>
          <h1 className="text-sm font-black uppercase tracking-widest">
            Courses
          </h1>
          <p className="text-[11px] text-muted-foreground">
            Create courses and assign each one to an active sector.
          </p>
        </div>
        <PermissionGuard permission={PERMISSIONS.MASTERS_COURSES_MANAGE}>
          <Button
            onClick={() => setOpen(true)}
            // Applied specific styling here
            className="h-8 rounded-md px-3 text-[11px] font-bold tracking-wider uppercase shadow-sm gap-1.5 transition-all bg-foreground text-background hover:bg-foreground/90"
          >
            {/* Applied specific icon styling here */}
            <Plus className="h-3.5 w-3.5 stroke-[2.5]" /> New course
          </Button>
        </PermissionGuard>
      </div>

      {/* Filters Section */}
      <div className="flex flex-wrap gap-2">
      
        {/* SEARCH BAR BUS */}
        <div className="flex flex-wrap items-center gap-2">
          <div className="flex items-center max-w-xs w-full relative group">
            <Search className="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground/60 transition-colors group-focus-within:text-primary" />
            <input 
              type="text" 
              placeholder="Search Courses..." 
              value={search} 
              onChange={(e) => { setSearch(e.target.value); setPage(1); }}
              className="w-full text-xs font-medium pl-8 pr-3 py-2 border border-border/40 bg-surface rounded-lg text-foreground focus:outline-none focus:border-primary"
            />
          </div>
        </div>
                
        <select
          className="rounded-lg border border-border/40 bg-surface px-3 py-2 text-xs focus:border-primary/60 focus:ring-1 focus:ring-primary/60"
          value={sectorId}
          onChange={(event) => {
            setSectorId(event.target.value);
            setPage(1); // Reset to first page on filter change
          }}
        >
          <option value="">All active sectors</option>
          {sectors.data?.items?.map((sector: any) => (
            <option key={sector.id} value={sector.id}>
              {sector.name}
            </option>
          ))}
        </select>
      </div>

      {/* Data Table Section */}
      <DataTable
        data={courses.data?.items}
        columns={columns}
        emptyMessage="No courses created yet."
        pagination={
          courses.data
            ? { ...courses.data, onPageChange: setPage }
            : undefined
        }
      />

      {/* Modals */}
      {open && <CreateCourseModal onClose={() => setOpen(false)} />}
    </div>
  );
}