import { ClipboardList, Plus, Printer } from 'lucide-react';

import type {
  CampusAttendancePageActions,
  CampusAttendancePageState,
} from '@/components/campus-attendance/types';
import { Button } from '@/components/ui/button';
import { ModuleHeader } from '@/components/ui/module-header';

type CampusAttendanceHeaderProps = {
  state: CampusAttendancePageState;
  actions: CampusAttendancePageActions;
};

export function CampusAttendanceHeader({ state, actions }: CampusAttendanceHeaderProps) {
  const { roleAccess, campusInfo, userCampus, showEntryForm } = state;

  return (
    <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
      <ModuleHeader
        title="Campus Attendance"
        description={
          roleAccess.isSuperintendent
            ? 'Organization-wide attendance dashboard - all campuses'
            : roleAccess.isDirector
              ? `${campusInfo?.fullName || userCampus} - Director attendance dashboard`
              : roleAccess.isOfficeManager
                ? `Manage ${campusInfo?.fullName || userCampus} attendance link and enter daily data`
                : `${campusInfo?.fullName || userCampus} attendance overview`
        }
        icon={ClipboardList}
        iconClassName="bg-gradient-to-br from-orange-400 to-orange-600"
        iconShadowClassName="shadow-orange-500/20"
      />
      <div className="flex items-center gap-2">
        {roleAccess.canPrint && (
          <Button
            type="button"
            onClick={actions.handlePrint}
            leadingIcon={<Printer size={16} />}
            className="flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-violet-500 to-purple-600 text-white rounded-xl font-medium text-sm hover:shadow-lg hover:shadow-violet-500/25 transition-all"
          >
            Print {roleAccess.canSeeAllCampuses ? 'All Campuses' : 'Campus'} Report
          </Button>
        )}
        {roleAccess.canEnterData && (
          <Button
            type="button"
            onClick={() => actions.setShowEntryForm(!showEntryForm)}
            leadingIcon={<Plus size={16} />}
            className="flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-orange-500 to-amber-500 text-white rounded-xl font-medium text-sm hover:shadow-lg hover:shadow-orange-500/25 transition-all"
          >
            Enter Today&apos;s Attendance
          </Button>
        )}
      </div>
    </div>
  );
}
