import React from 'react';
import {
  Avatar,
  Button,
  DatePicker,
  Select,
  Spin,
  Tooltip,
} from 'antd';
import {
  ExportOutlined,
  FileSearchOutlined,
  ReloadOutlined,
  ScheduleOutlined,
  UndoOutlined,
  WarningFilled,
} from '@ant-design/icons';
import dayjs, { type Dayjs } from 'dayjs';
import PermissionButton from '../../components/PermissionButton';
import {
  ADMIN_METRIC_META,
  STATUS_META,
  type AlertItem,
  type AttendanceSummary,
  type ClassOption,
  type DingTalkSyncStatus,
  type HistoryScheduleOption,
} from './AttendanceAdmin.helpers';

export const AttendanceAdminHeader: React.FC<{
  syncStatus: DingTalkSyncStatus | null;
  canEdit: boolean;
  refreshingDingTalk: boolean;
  onOpenPeriodConfig: () => void;
  onRefreshDingTalk: () => void;
  onExport: () => void;
  attendanceDate: Dayjs | null;
  onDateChange: (date: Dayjs | null) => void;
  classId?: number;
  onClassChange: (value?: number) => void;
  classOptions: ClassOption[];
  effectiveScheduleId?: number;
  onScheduleChange: (value?: number) => void;
  scheduleOptions: HistoryScheduleOption[];
  scheduleOptionsLoading: boolean;
  session?: string;
  onSessionChange: (value?: string) => void;
  sessionOptions: Array<{ value: string; label: string }>;
  onReset: () => void;
  onQuery: () => void;
  selectedClass: string;
  dateLabel: string;
  visibleStudentCount: number;
  total: number;
  headTeacherNames: string;
  lifeTeacherNames: string;
  subjectTeacherNames: string;
  attendanceRate: number;
  summary: AttendanceSummary;
  metricFilter: string;
  onMetricFilterChange: (key: string) => void;
  alerts: AlertItem[];
}> = ({
  syncStatus,
  canEdit,
  refreshingDingTalk,
  onOpenPeriodConfig,
  onRefreshDingTalk,
  onExport,
  attendanceDate,
  onDateChange,
  classId,
  onClassChange,
  classOptions,
  effectiveScheduleId,
  onScheduleChange,
  scheduleOptions,
  scheduleOptionsLoading,
  session,
  onSessionChange,
  sessionOptions,
  onReset,
  onQuery,
  selectedClass,
  dateLabel,
  visibleStudentCount,
  total,
  headTeacherNames,
  lifeTeacherNames,
  subjectTeacherNames,
  attendanceRate,
  summary,
  metricFilter,
  onMetricFilterChange,
  alerts,
}) => {
  return (
    <>
      <header className="student-center-topbar">
        <div className="student-center-title">
          <h1>学生考勤中心</h1>
          <span>班级考勤总览</span>
        </div>
        <div className="student-center-actions">
          <Tooltip title={syncStatus?.detail || syncStatus?.action || '暂无钉钉拉取记录'}>
            <span className="student-sync-status">
              <i />
              {syncStatus?.lastPulledAt
                ? `最近拉取钉钉 ${dayjs(syncStatus.lastPulledAt).format('YYYY-MM-DD HH:mm')}`
                : '暂无钉钉拉取记录'}
            </span>
          </Tooltip>
          {canEdit && (
            <Button icon={<ScheduleOutlined />} onClick={onOpenPeriodConfig}>
              时段配置
            </Button>
          )}
          <PermissionButton
            permission="attendance:create"
            icon={<ReloadOutlined />}
            loading={refreshingDingTalk}
            onClick={onRefreshDingTalk}
          >
            刷新钉钉考勤
          </PermissionButton>
          <PermissionButton permission="attendance:export" icon={<ExportOutlined />} onClick={onExport}>
            导出当前报表
          </PermissionButton>
        </div>
      </header>

      <section className="student-filter-panel" aria-label="考勤筛选">
        <div className="student-filter-field student-filter-field--date">
          <label>日期</label>
          <DatePicker
            allowClear={false}
            value={attendanceDate}
            disabledDate={(current) => current.isAfter(dayjs(), 'day')}
            onChange={onDateChange}
          />
        </div>
        <div className="student-filter-field">
          <label>班级</label>
          <Select
            allowClear
            showSearch
            optionFilterProp="label"
            placeholder="全部班级"
            value={classId}
            onChange={onClassChange}
            options={classOptions.map((item) => ({ value: item.classId, label: item.className }))}
          />
        </div>
        <div className="student-filter-field">
          <label>科目</label>
          <Select
            allowClear
            showSearch
            optionFilterProp="label"
            placeholder={classId ? '全部科目' : '请先选择班级'}
            value={effectiveScheduleId}
            loading={scheduleOptionsLoading}
            disabled={!classId || !attendanceDate}
            notFoundContent={scheduleOptionsLoading ? <Spin size="small" /> : '当前日期没有排课'}
            onChange={onScheduleChange}
            options={scheduleOptions.map((schedule) => ({
              value: schedule.id,
              label: `${schedule.subject}（${schedule.startTime}-${schedule.endTime}）`,
            }))}
          />
        </div>
        <div className="student-filter-field">
          <label>任课老师</label>
          <Select disabled placeholder="全部老师" />
        </div>
        <div className="student-filter-field">
          <label>时段</label>
          <Select
            allowClear
            placeholder="全部时段"
            value={session}
            onChange={onSessionChange}
            options={sessionOptions}
          />
        </div>
        <div className="student-filter-actions">
          <Button icon={<UndoOutlined />} onClick={onReset}>
            重置
          </Button>
          <Button type="primary" icon={<FileSearchOutlined />} onClick={onQuery}>
            查询
          </Button>
        </div>
      </section>

      <section className="student-class-overview" aria-label="班级考勤汇总">
        <div className="student-class-identity">
          <div className="student-class-heading">
            <h2>{selectedClass}</h2>
            <p>
              {dateLabel} · 当前展示 {visibleStudentCount} 名学生 / {total} 条记录
            </p>
          </div>
          <div className="student-teacher-list" aria-label="筛选上下文">
            <div className="student-teacher-item">
              <Avatar>班</Avatar>
              <div>
                <span>班主任</span>
                <strong>{headTeacherNames}</strong>
              </div>
            </div>
            <div className="student-teacher-item">
              <Avatar>生</Avatar>
              <div>
                <span>生活老师</span>
                <strong>{lifeTeacherNames}</strong>
              </div>
            </div>
            <div className="student-teacher-item">
              <Avatar>任</Avatar>
              <div>
                <span>任课老师</span>
                <strong>{subjectTeacherNames}</strong>
              </div>
            </div>
          </div>
        </div>
        <div className="student-metric-strip">
          {ADMIN_METRIC_META.map((metric) => {
            const value =
              metric.key === 'all'
                ? `${attendanceRate}%`
                : metric.key === 'absent'
                  ? summary.absent + summary.pending
                  : (summary[metric.key as keyof AttendanceSummary] ?? 0);
            const meta = STATUS_META[metric.key] ?? { className: 'is-present' };
            return (
              <button
                type="button"
                key={metric.key}
                className={`student-metric-card ${metricFilter === metric.key ? 'active' : ''}`}
                onClick={() => onMetricFilterChange(metric.key)}
              >
                <span className={`student-metric-icon ${meta.className}`}>{metric.short}</span>
                <span className="student-metric-copy">
                  <strong>{value}</strong>
                  <small>{metric.label}</small>
                </span>
              </button>
            );
          })}
        </div>
      </section>

      {alerts.length > 0 && (
        <div className="archive-alert">
          <WarningFilled />
          <div>
            <strong>{alerts.length} 名学生存在连续异常</strong>
            <span>建议优先核查最近 14 天的缺勤记录</span>
          </div>
          <Tooltip
            title={alerts
              .slice(0, 5)
              .map((item) => `${item.studentName}：${item.type}${item.count}次`)
              .join('；')}
          >
            <Button type="link">查看摘要</Button>
          </Tooltip>
        </div>
      )}
    </>
  );
};