import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import Form from '../index';
import Button from '../../Button';
import { ScrollView } from 'react-native';
import BottomSafeArea from '../../BottomSafeArea';
import { Fill, Toast } from '@xrnjs/ui';
import Card from '_global/Card';
import dayjs from 'dayjs';

type FormData = {
  vacationPeriod: [Date, Date];
  projectDuration: [Date, Date];
  eventTimeRange: [Date, Date];
  workingHours: [Date, Date];
  reportPeriod: [Date, Date];
  campaignDuration: [Date, Date];
};

const DateRangeExamplesDemo: React.FC = () => {
  const form = Form.useForm<FormData>({
    defaultValues: {
      vacationPeriod: [],
      projectDuration: [new Date(), new Date()],
      eventTimeRange: [new Date(), new Date()],
      workingHours: [new Date(), new Date()],
      reportPeriod: [new Date(), new Date()],
      campaignDuration: [new Date(), new Date()],
    },
  });

  const [fixedRange, setFixedRange] = React.useState<[Date, Date]>([
    new Date('2025-01-01'),
    new Date('2025-02-01'),
  ]);

  const onSubmit = (data: FormData) => {
    console.log('Form submitted:', data);
    const formatDate = (date: Date) => dayjs(date).format('YYYY-MM-DD');
    Toast(
      `日期范围设置成功！\n假期: ${formatDate(
        data.vacationPeriod[0]
      )} ~ ${formatDate(data.vacationPeriod[1])}\n项目: ${formatDate(
        data.projectDuration[0]
      )} ~ ${formatDate(data.projectDuration[1])}`
    );
  };

  const onError = (errors: Record<string, unknown>) => {
    console.log('Form errors:', errors);
  };

  return (
    <View style={styles.container}>
      <ScrollView
        style={styles.scrollContainer}
        keyboardShouldPersistTaps="handled"
      >
        <Form.FormProvider {...form}>
          {/* Form.DateRange 快捷用法 */}
          <Card
            title="1. Form.DateRange 快捷用法"
            style={styles.cardStyle}
            noSpace
          >
            <Form.DateRange
              name="vacationPeriod"
              label="假期时间"
              message="请选择假期开始和结束时间"
              placeholder={['开始日期', '结束日期']}
              mode="Y-D"
              rules={{
                required: '请选择假期时间',
                validate: (value: [Date, Date]) => {
                  if (!value || !value[0] || !value[1]) {
                    return '请选择完整的时间范围';
                  }
                  if (dayjs(value[1]).isBefore(dayjs(value[0]))) {
                    return '结束时间不能早于开始时间';
                  }
                  const diffDays = dayjs(value[1]).diff(dayjs(value[0]), 'day');
                  if (diffDays > 30) {
                    return '假期时间不能超过30天';
                  }
                  return true;
                },
              }}
            />
          </Card>

          {/* 年月模式示例 */}
          <Card title="3. 年月模式示例" style={styles.cardStyle} noSpace>
            <Form.DateRange
              name="reportPeriod"
              label="报告周期"
              message="选择报告的起止月份"
              placeholder={['起始月份', '结束月份']}
              mode="Y-M"
              rules={{
                required: '请选择报告周期',
                validate: (value: [Date, Date]) => {
                  if (!value || !value[0] || !value[1]) {
                    return '请选择完整的报告周期';
                  }
                  const diffMonths = dayjs(value[1]).diff(
                    dayjs(value[0]),
                    'month'
                  );
                  if (diffMonths > 12) {
                    return '报告周期不能超过12个月';
                  }
                  return true;
                },
              }}
            />
          </Card>

          {/* 时间模式示例 */}
          <Card title="4. 时间模式示例" style={styles.cardStyle} noSpace>
            <Form.DateRange
              name="workingHours"
              label="工作时间"
              message="设置每日工作时间范围"
              placeholder={['上班时间', '下班时间']}
              mode="h-m"
              defaultValue={[
                dayjs().hour(9).minute(0).toDate(),
                dayjs().hour(18).minute(0).toDate(),
              ]}
              rules={{
                required: '请设置工作时间',
                validate: (value: [Date, Date]) => {
                  if (!value || !value[0] || !value[1]) {
                    return '请设置完整的工作时间';
                  }
                  const startHour = dayjs(value[0]).hour();
                  const endHour = dayjs(value[1]).hour();
                  if (endHour <= startHour) {
                    return '下班时间必须晚于上班时间';
                  }
                  const workHours = endHour - startHour;
                  if (workHours > 12) {
                    return '工作时间不能超过12小时';
                  }
                  if (workHours < 4) {
                    return '工作时间不能少于4小时';
                  }
                  return true;
                },
              }}
            />
          </Card>

          {/* 复杂验证示例 */}
          <Card title="5. 复杂验证示例" style={styles.cardStyle} noSpace>
            <Form.DateRange
              name="campaignDuration"
              label="营销活动周期"
              message="设置营销活动的有效期，需要考虑与其他活动的冲突"
              placeholder={['活动开始', '活动结束']}
              mode="Y-D"
              rules={{
                required: '请选择营销活动周期',
                validate: (value: [Date, Date]) => {
                  if (!value || !value[0] || !value[1]) {
                    return '请选择完整的活动周期';
                  }

                  const startDate = dayjs(value[0]);
                  const endDate = dayjs(value[1]);
                  const now = dayjs();

                  // 检查开始时间
                  if (startDate.isBefore(now.add(1, 'day'))) {
                    return '活动开始时间至少需要提前1天设置';
                  }

                  // 检查活动时长
                  const duration = endDate.diff(startDate, 'day');
                  if (duration < 3) {
                    return '营销活动至少需要3天';
                  }
                  if (duration > 90) {
                    return '营销活动不能超过90天';
                  }

                  // 检查是否在工作日
                  const startWeekday = startDate.day();
                  if (startWeekday === 0 || startWeekday === 6) {
                    return '营销活动不能在周末开始';
                  }

                  // 检查是否与假期冲突
                  const vacationPeriod = form.getValues('vacationPeriod');
                  if (
                    vacationPeriod &&
                    vacationPeriod[0] &&
                    vacationPeriod[1]
                  ) {
                    const vacationStart = dayjs(vacationPeriod[0]);
                    const vacationEnd = dayjs(vacationPeriod[1]);

                    // 检查时间范围是否重叠
                    if (
                      (startDate.isBefore(vacationEnd) &&
                        endDate.isAfter(vacationStart)) ||
                      (vacationStart.isBefore(endDate) &&
                        vacationEnd.isAfter(startDate))
                    ) {
                      return '营销活动时间不能与假期时间重叠';
                    }
                  }

                  return true;
                },
              }}
            />
          </Card>

          {/* 禁用状态示例 */}
          <Card title="6. 禁用状态示例" style={styles.cardStyle} noSpace>
            <Form.DateRange
              name="disabledRange"
              label="禁用日期范围"
              message="演示禁用状态下的日期范围选择器"
              disabled
              defaultValue={[
                dayjs().subtract(7, 'day').toDate(),
                dayjs().add(7, 'day').toDate(),
              ]}
              placeholder={['开始时间', '结束时间']}
              mode="Y-D"
            />
          </Card>

          {/* 自定义配置示例 */}
          <Card title="7. 自定义配置示例" style={styles.cardStyle} noSpace>
            <Form.DateRange
              name="customRange"
              label="自定义日期范围"
              message="支持最小/最大日期限制和自定义确认回调"
              placeholder={['自定义开始', '自定义结束']}
              mode="Y-D"
              min={dayjs().subtract(30, 'day').toDate()}
              max={dayjs().add(90, 'day').toDate()}
              onConfirm={(dates) => {
                console.log('日期范围已选择:', dates);
                const diffDays = dayjs(dates[1]).diff(dayjs(dates[0]), 'day');
                Toast(`已选择 ${diffDays + 1} 天的时间范围`);
              }}
              rules={{
                required: '请选择日期范围',
                validate: (value: [Date, Date]) => {
                  if (!value || !value[0] || !value[1]) {
                    return '请选择完整的日期范围';
                  }
                  const diffDays = dayjs(value[1]).diff(dayjs(value[0]), 'day');
                  if (diffDays < 7) {
                    return '自定义范围至少需要7天';
                  }
                  return true;
                },
              }}
            />
          </Card>
        </Form.FormProvider>
        <Card title="8. 传入 value 优先级示例" style={styles.cardStyle} noSpace>
          <View style={{ padding: 12 }}>
            <Text style={{ marginBottom: 8 }}>
              当前值：{dayjs(fixedRange[0]).format('YYYY-MM-DD')} ~{' '}
              {dayjs(fixedRange[1]).format('YYYY-MM-DD')}
            </Text>
            <Form.DateRange
              control={form.control}
              name="fixedRange"
              label="固定范围（外部指定）"
              mode="Y-D"
              value={fixedRange}
              onConfirm={(v) => setFixedRange(v as [Date, Date])}
            />
          </View>
        </Card>
      </ScrollView>

      <View style={styles.fixedButtonContainer}>
        <Button onPress={form.handleSubmit(onSubmit, onError)}>提交</Button>
        <View style={styles.buttonSpacer} />
        <Button fill={Fill.dashed} onPress={() => form.reset()}>
          重置
        </Button>
        <BottomSafeArea />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  scrollContainer: {
    flex: 1,
    padding: 20,
    paddingBottom: 0,
  },
  cardStyle: {
    marginBottom: 16,
  },
  fixedButtonContainer: {
    backgroundColor: '#fff',
    paddingHorizontal: 20,
    paddingTop: 16,
    paddingBottom: 30,
    borderTopWidth: 1,
    borderTopColor: '#e5e5e5',
    flexDirection: 'row',
    justifyContent: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: -2,
    },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 8,
  },
  buttonSpacer: {
    width: 20,
  },
});

export default DateRangeExamplesDemo;