import React from 'react';
import {
  Alert,
  Button,
  Card,
  Col,
  DatePicker,
  Empty,
  Form,
  Input,
  InputNumber,
  Modal,
  Popconfirm,
  Row,
  Select,
  Space,
  Spin,
  Statistic,
  Switch,
  Tag,
  TimePicker,
} from 'antd';
import { CloudSyncOutlined, EditOutlined, PlusOutlined, StopOutlined } from '@ant-design/icons';
import type { Dayjs } from 'dayjs';
import PermissionButton from '../../components/PermissionButton';
import { isMaskedSchedule } from './schedule-visibility';
import type { ScheduleFormValues } from './schedule-form';
import type { ClassItem, ClassScheduleItem, ClassTeacherOption, ClassroomItem } from './ScheduleGrids';
import { WEEKDAYS } from './ScheduleGrids';

export interface ScheduleModalProps {
  open: boolean;
  mode: 'create' | 'edit' | 'detail';
  submitting: boolean;
  form: ReturnType<typeof Form.useForm<ScheduleFormValues>>[0];
  selectedCell: { classroomId: number; weekDay: number } | null;
  selectedDate: Dayjs | null;
  selectedSchedules: ClassScheduleItem[];
  editingSchedule: ClassScheduleItem | null;
  selectedClassroom?: ClassroomItem;
  classOptions: Array<{ value: number; label: string }>;
  classroomOptions: Array<{ value: number; label: string }>;
  classTeachers: ClassTeacherOption[];
  classes: ClassItem[];
  onCancel: () => void;
  onSubmit: () => void;
  onStartCreate: () => void;
  onEdit: (schedule: ClassScheduleItem) => void;
  onDisable: (id: number | null) => void;
  onClassChange: (classId: number) => void;
  onSubjectBlur: (value: string) => void;
}

export const ScheduleModal: React.FC<ScheduleModalProps> = ({
  open,
  mode,
  submitting,
  form,
  selectedCell,
  selectedDate,
  selectedSchedules,
  editingSchedule,
  selectedClassroom,
  classOptions,
  classroomOptions,
  classTeachers,
  classes,
  onCancel,
  onSubmit,
  onStartCreate,
  onEdit,
  onDisable,
  onClassChange,
  onSubjectBlur,
}) => {
  const title =
    mode === 'create'
      ? `新增排课 — ${selectedClassroom?.name || ''} · ${
          selectedCell ? WEEKDAYS[selectedCell.weekDay - 1] : ''
        }`
      : mode === 'edit'
        ? `编辑排课 — ${editingSchedule?.subject || ''}`
        : selectedDate
          ? `排课详情 — ${selectedDate.format('YYYY-MM-DD')} ${
              WEEKDAYS[selectedDate.day() === 0 ? 6 : selectedDate.day() - 1]
            }`
          : `排课详情 — ${selectedClassroom?.name || ''} · ${
              selectedCell ? WEEKDAYS[selectedCell.weekDay - 1] : ''
            }`;

  return (
    <Modal
      title={title}
      open={open}
      onCancel={onCancel}
      onOk={mode !== 'detail' ? onSubmit : undefined}
      confirmLoading={submitting}
      okText={mode === 'edit' ? '保存' : mode === 'create' ? '创建' : undefined}
      footer={mode === 'detail' ? null : undefined}
      width={600}
      destroyOnHidden
    >
      {mode !== 'detail' ? (
        <Form form={form} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item name="classId" label="班级" rules={[{ required: true, message: '请选择班级' }]}>
            <Select
              placeholder="选择班级"
              showSearch
              optionFilterProp="label"
              options={classOptions}
              onChange={onClassChange}
            />
          </Form.Item>
          <Form.Item
            name="classroomId"
            label="教室"
            rules={[{ required: true, message: '请选择教室' }]}
          >
            <Select
              placeholder="选择教室"
              showSearch
              optionFilterProp="label"
              options={classroomOptions}
            />
          </Form.Item>
          <Form.Item
            name="weekDay"
            label="星期"
            rules={[{ required: true, message: '请选择星期' }]}
          >
            <Select
              options={WEEKDAYS.map((label, index) => ({ value: index + 1, label }))}
            />
          </Form.Item>
          <Form.Item
            name="subject"
            label="科目"
            rules={[{ required: true, message: '请输入科目' }]}
          >
            <Input
              placeholder="如：数学、语文"
              onBlur={(event) => onSubjectBlur(event.target.value)}
            />
          </Form.Item>
          <Form.Item name="teacherId" label="任课老师">
            <Select
              showSearch
              allowClear
              placeholder="先选班级；系统会按科目自动带出任课老师"
              optionFilterProp="label"
              options={classTeachers.map((teacher) => ({
                value: teacher.userId,
                label: `${teacher.name || teacher.username || `#${teacher.userId}`}${
                  teacher.subject ? ` · ${teacher.subject}` : ''
                }`,
              }))}
              notFoundContent="该班级暂无可选教师，请先在班级详情配置教师"
            />
          </Form.Item>
          <Form.Item name="notes" label="备注" rules={[{ max: 500, message: '备注不能超过500字' }]}>
            <Input.TextArea
              rows={3}
              maxLength={500}
              showCount
              placeholder="可填写排课说明、设备需求或临时调整原因"
            />
          </Form.Item>
          <Form.Item
            name="attendanceAdvanceMinutes"
            label="课前签到时间"
            tooltip="从上课前指定分钟开始，到下课时间结束；期间任意上班或下班打卡都计为出勤"
            initialValue={30}
            rules={[{ required: true, message: '请设置课前签到时间' }]}
          >
            <InputNumber
              min={0}
              max={1440}
              step={5}
              suffix="分钟"
              style={{ width: '100%' }}
              placeholder="例如 30"
            />
          </Form.Item>
          <Form.Item
            name="timeRange"
            label="上课时段"
            tooltip="同一教室的前后两节排课必须至少间隔10分钟"
            extra="系统按10分钟选择时间，并为相邻排课强制预留至少10分钟。"
            rules={[{ required: true, message: '请选择时段' }]}
          >
            <TimePicker.RangePicker
              format="HH:mm"
              minuteStep={10}
              style={{ width: '100%' }}
              placeholder={['开始时间', '结束时间']}
            />
          </Form.Item>
          <Form.Item
            name="dateRange"
            label="日期范围"
            rules={[{ required: true, message: '请选择日期范围' }]}
          >
            <DatePicker.RangePicker
              style={{ width: '100%' }}
              placeholder={['开始日期', '结束日期']}
            />
          </Form.Item>
        </Form>
      ) : (
        <div style={{ lineHeight: 2 }}>
          <div
            style={{
              marginBottom: 12,
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
            }}
          >
            <span style={{ fontWeight: 500 }}>已有排课</span>
            <PermissionButton
              permission="schedule:create"
              type="primary"
              icon={<PlusOutlined />}
              onClick={onStartCreate}
            >
              新增排课
            </PermissionButton>
          </div>
          {selectedSchedules.length === 0 ? (
            <Empty description="该时段暂无排课" />
          ) : (
            selectedSchedules.map((s) => (
              <Card
                key={`${s.id ?? 'busy'}-${s.classroomId}-${s.weekDay}-${s.startTime}-${s.endTime}`}
                size="small"
                style={{ marginBottom: 8 }}
                styles={{ body: { padding: 12 } }}
              >
                <div
                  style={{
                    display: 'flex',
                    justifyContent: 'space-between',
                    alignItems: 'flex-start',
                  }}
                >
                  <div>
                    <div>
                      <strong>{isMaskedSchedule(s) ? '状态：' : '科目：'}</strong>
                      <Tag color={isMaskedSchedule(s) ? 'default' : 'blue'}>{s.subject}</Tag>
                    </div>
                    {!isMaskedSchedule(s) && (
                      <div>
                        <strong>班级：</strong>
                        {classes.find((c) => c.id === s.classId)?.name || `#${s.classId}`}
                      </div>
                    )}
                    {!isMaskedSchedule(s) && s.teacherId != null && (
                      <div>
                        <strong>教师：</strong>
                        {classTeachers.find((u) => u.userId === s.teacherId)?.name ||
                          classTeachers.find((u) => u.userId === s.teacherId)?.username ||
                          `#${s.teacherId}`}
                      </div>
                    )}
                    <div>
                      <strong>时段：</strong>
                      {s.startTime} ~ {s.endTime}
                    </div>
                    {!isMaskedSchedule(s) && (
                      <div>
                        <strong>签到窗口：</strong>
                        课前 {s.attendanceAdvanceMinutes ?? 30} 分钟至下课
                      </div>
                    )}
                    <div>
                      <strong>日期：</strong>
                      {s.startDate} ~ {s.endDate}
                    </div>
                    {!isMaskedSchedule(s) && s.notes && (
                      <div>
                        <strong>备注：</strong>
                        {s.notes}
                      </div>
                    )}
                    {!isMaskedSchedule(s) && (
                      <div>
                        <Tag color={s.scheduleType === 'RENTAL' ? 'orange' : 'green'}>
                          {s.scheduleType === 'RENTAL' ? '租赁' : '内部'}
                        </Tag>
                        <Tag color={s.status === 'active' ? 'green' : 'default'}>{s.status}</Tag>
                      </div>
                    )}
                  </div>
                  {!isMaskedSchedule(s) && (
                    <Space>
                      {s.scheduleType !== 'RENTAL' && (
                        <PermissionButton
                          permission="schedule:edit"
                          size="small"
                          icon={<EditOutlined />}
                          onClick={() => onEdit(s)}
                        >
                          编辑
                        </PermissionButton>
                      )}
                      {s.scheduleType !== 'RENTAL' && s.status === 'active' && (
                        <Popconfirm
                          title="确认停用该排课？"
                          description="停用后历史考勤记录会保留，但该排课不会再显示或占用教室。"
                          onConfirm={() => onDisable(s.id)}
                          okText="停用"
                          cancelText="取消"
                        >
                          <PermissionButton
                            permission="schedule:edit"
                            size="small"
                            icon={<StopOutlined />}
                          >
                            停用
                          </PermissionButton>
                        </Popconfirm>
                      )}
                    </Space>
                  )}
                </div>
              </Card>
            ))
          )}
        </div>
      )}
    </Modal>
  );
};

export interface SyncModalProps {
  open: boolean;
  syncing: boolean;
  syncStatus: {
    activeSchedules: number;
    mappedClasses: number;
    totalClasses: number;
  } | null;
  syncResult: {
    scheduleCount: number;
    shiftCount: number;
    groupCount: number;
    syncedItems: number;
    skippedNoMapping: number;
    failedBatchCount: number;
    failedItems: number;
    errors: string[];
    groups: Array<{ className: string; groupId: number; itemCount: number }>;
  } | null;
  syncDateFrom: Dayjs;
  syncDays: number;
  attendanceMachineOnly: boolean;
  onClose: () => void;
  onSync: () => void;
  onDateChange: (date: Dayjs) => void;
  onDaysChange: (days: number) => void;
  onMachineOnlyChange: (value: boolean) => void;
}

export const SyncModal: React.FC<SyncModalProps> = ({
  open,
  syncing,
  syncStatus,
  syncResult,
  syncDateFrom,
  syncDays,
  attendanceMachineOnly,
  onClose,
  onSync,
  onDateChange,
  onDaysChange,
  onMachineOnlyChange,
}) => {
  return (
    <Modal
      title="同步排课到钉钉考勤排班"
      open={open}
      onCancel={onClose}
      footer={
        syncResult
          ? [
              <Button key="close" onClick={onClose}>
                关闭
              </Button>,
            ]
          : [
              <Button key="cancel" onClick={onClose}>
                取消
              </Button>,
              <Button
                key="sync"
                type="primary"
                icon={<CloudSyncOutlined />}
                loading={syncing}
                onClick={onSync}
                disabled={!syncStatus || syncStatus.activeSchedules === 0}
              >
                开始同步
              </Button>,
            ]
      }
      width={560}
    >
      {syncResult ? (
        <div>
          <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
            <Col xs={12} sm={6}>
              <Statistic title="排课" value={syncResult.scheduleCount} suffix="条" />
            </Col>
            <Col xs={12} sm={6}>
              <Statistic title="班次" value={syncResult.shiftCount} suffix="个" />
            </Col>
            <Col xs={12} sm={6}>
              <Statistic title="考勤组" value={syncResult.groupCount} suffix="个" />
            </Col>
            <Col xs={12} sm={6}>
              <Statistic
                title="排班数"
                value={syncResult.syncedItems}
                suffix="条"
                styles={{ content: { color: '#3f8600' } }}
              />
            </Col>
          </Row>
          {syncResult.skippedNoMapping > 0 && (
            <Alert
              type="warning"
              title={`${syncResult.skippedNoMapping} 条排课因班级无钉钉绑定学生而跳过`}
              style={{ marginBottom: 16 }}
              showIcon
            />
          )}
          {syncResult.failedBatchCount > 0 && (
            <>
              <Alert
                type="error"
                title={`${syncResult.failedBatchCount} 批写入失败，共 ${syncResult.failedItems} 条`}
                description={
                  syncResult.errors.length > 0
                    ? syncResult.errors.slice(0, 5).map((err, i) => (
                        <div key={i} style={{ wordBreak: 'break-all' }}>
                          {err}
                        </div>
                      ))
                    : undefined
                }
                style={{ marginBottom: 16 }}
                showIcon
              />
              {syncResult.errors.length > 5 && (
                <div style={{ fontSize: 12, color: '#999', marginBottom: 16, marginTop: -12 }}>
                  ...以及其他 {syncResult.errors.length - 5} 条错误
                </div>
              )}
            </>
          )}
          {syncResult.groups.length > 0 && (
            <div>
              <div style={{ fontWeight: 500, marginBottom: 8 }}>按班级分组：</div>
              {syncResult.groups.map((g) => (
                <Tag key={g.groupId} color="blue" style={{ marginBottom: 4 }}>
                  {g.className}：{g.itemCount} 条排班
                </Tag>
              ))}
            </div>
          )}
        </div>
      ) : syncStatus ? (
        <div>
          <Row gutter={[16, 16]} style={{ marginBottom: 16 }}>
            <Col xs={24} sm={8}>
              <Statistic title="活跃排课" value={syncStatus.activeSchedules} suffix="条" />
            </Col>
            <Col xs={24} sm={8}>
              <Statistic
                title="已就绪班级"
                value={syncStatus.mappedClasses}
                suffix={`/ ${syncStatus.totalClasses}`}
                styles={{
                  content: {
                    color:
                      syncStatus.mappedClasses < syncStatus.totalClasses ? '#faad14' : '#3f8600',
                  },
                }}
              />
            </Col>
            <Col xs={24} sm={8}>
              <Statistic
                title="无绑定学生班级"
                value={syncStatus.totalClasses - syncStatus.mappedClasses}
                suffix="个"
              />
            </Col>
          </Row>
          {syncStatus.mappedClasses < syncStatus.totalClasses && (
            <Alert
              type="warning"
              title={`${syncStatus.totalClasses - syncStatus.mappedClasses} 个班级没有已绑定钉钉的学生，其排课将被跳过。请先在钉钉集成页导入并绑定学生。`}
              style={{ marginBottom: 16 }}
              showIcon
            />
          )}
          <div style={{ marginBottom: 16 }}>
            <div style={{ marginBottom: 8, fontWeight: 500 }}>同步参数</div>
            <Space wrap>
              <span>起始日期：</span>
              <DatePicker
                value={syncDateFrom}
                onChange={(d) => d && onDateChange(d)}
                allowClear={false}
              />
              <span>天数：</span>
              <Select
                value={syncDays}
                onChange={onDaysChange}
                style={{ width: 100 }}
                options={[
                  { value: 7, label: '7 天' },
                  { value: 14, label: '14 天' },
                  { value: 30, label: '30 天' },
                  { value: 60, label: '60 天' },
                  { value: 90, label: '90 天' },
                ]}
              />
            </Space>
            <div style={{ marginTop: 16 }}>
              <Space align="start">
                <Switch checked={attendanceMachineOnly} onChange={onMachineOnlyChange} />
                <div>
                  <div style={{ fontWeight: 500 }}>仅允许考勤机打卡</div>
                  <div style={{ color: '#8c8c8c', fontSize: 12, marginTop: 2 }}>
                    开启后将关闭外勤、定位、Wi-Fi 和手机蓝牙打卡，并禁止无排班打卡。
                  </div>
                </div>
              </Space>
            </div>
            {attendanceMachineOnly && (
              <Alert
                type="info"
                showIcon
                message="已存在的同名考勤组也会在本次同步中更新为仅考勤机打卡。"
                style={{ marginTop: 12 }}
              />
            )}
          </div>
          {syncStatus.activeSchedules === 0 && (
            <Alert
              type="info"
              message="当前没有活跃排课。请先在排课页面创建排课记录。"
              showIcon
            />
          )}
        </div>
      ) : (
        <Spin description="查询同步状态..." />
      )}
    </Modal>
  );
};
