import React, { useEffect, useState, useMemo } from 'react';
import {
  Table,
  Button,
  Modal,
  Form,
  Select,
  DatePicker,
  InputNumber,
  Input,
  Space,
  message,
  Tag,
  Tabs,
  Popconfirm,
  Upload,
} from 'antd';
import {
  PlusOutlined,
  DeleteOutlined,
  EditOutlined,
  UploadOutlined,
  DownloadOutlined,
  ExportOutlined,
} from '@ant-design/icons';
import dayjs from 'dayjs';
import api from '../../api';
import PermissionButton from '../../components/PermissionButton';

const { RangePicker } = DatePicker;

const expenseTypeOptions = [
  { value: 'water', label: '水费' },
  { value: 'electricity', label: '电费' },
  { value: 'cleaning', label: '保洁费' },
  { value: 'damage', label: '损坏赔偿' },
  { value: 'other', label: '其他' },
];

const personalExpenseTypeOptions = [
  { value: 'damage', label: '物品损坏' },
  { value: 'cleaning', label: '保洁费' },
  { value: 'penalty', label: '罚款' },
  { value: 'key', label: '钥匙费' },
  { value: 'remote', label: '空调遥控器' },
  { value: 'deposit_deduction', label: '押金扣除' },
  { value: 'other', label: '其他' },
];

const typeMap: Record<string, string> = {
  water: '水费',
  electricity: '电费',
  cleaning: '保洁费',
  damage: '损坏赔偿',
  penalty: '罚款',
  key: '钥匙费',
  remote: '空调遥控器',
  deposit_deduction: '押金扣除',
  other: '其他',
};

const ExpensesPage: React.FC = () => {
  const [roomExpenses, setRoomExpenses] = useState<any[]>([]);
  const [personalExpenses, setPersonalExpenses] = useState<any[]>([]);
  const [rooms, setRooms] = useState<any[]>([]);
  const [students, setStudents] = useState<any[]>([]);
  const [loading, setLoading] = useState(false);
  const [roomModal, setRoomModal] = useState(false);
  const [personalModal, setPersonalModal] = useState(false);
  const [editingRoom, setEditingRoom] = useState<any>(null);
  const [editingPersonal, setEditingPersonal] = useState<any>(null);
  const [roomForm] = Form.useForm();
  const [personalForm] = Form.useForm();
  const [roomSearch, setRoomSearch] = useState('');
  const [roomTypeFilter, setRoomTypeFilter] = useState<string | undefined>(undefined);
  const [personalSearch, setPersonalSearch] = useState('');
  const [personalTypeFilter, setPersonalTypeFilter] = useState<string | undefined>(undefined);
  const [selectedRoomKeys, setSelectedRoomKeys] = useState<number[]>([]);
  const [selectedPersonalKeys, setSelectedPersonalKeys] = useState<number[]>([]);

  const handleBatchDeleteRoom = async () => {
    try {
      const res: any = await api.post('/expenses/room/batch-delete', { ids: selectedRoomKeys });
      message.success(res?.message || `已删除 ${selectedRoomKeys.length} 条`);
      setSelectedRoomKeys([]);
      fetchData();
    } catch (e: any) {
      message.error(e?.message || '批量删除失败');
    }
  };

  const handleBatchDeletePersonal = async () => {
    try {
      const res: any = await api.post('/expenses/personal/batch-delete', {
        ids: selectedPersonalKeys,
      });
      message.success(res?.message || `已删除 ${selectedPersonalKeys.length} 条`);
      setSelectedPersonalKeys([]);
      fetchData();
    } catch (e: any) {
      message.error(e?.message || '批量删除失败');
    }
  };

  const fetchData = async () => {
    setLoading(true);
    try {
      const [re, pe, rm, st]: any[] = await Promise.all([
        api.get('/expenses/room'),
        api.get('/expenses/personal'),
        api.get('/rooms'),
        api.get('/students'),
      ]);
      setRoomExpenses(re);
      setPersonalExpenses(pe);
      setRooms(rm);
      setStudents(st);
    } catch (e) {
      console.error(e);
    }
    setLoading(false);
  };

  useEffect(() => {
    fetchData();
  }, []);

  const filteredRoomExpenses = useMemo(() => {
    return roomExpenses.filter((r: any) => {
      if (roomSearch) {
        const s = roomSearch.toLowerCase();
        if (!r.room?.roomNumber?.toLowerCase().includes(s)) return false;
      }
      if (roomTypeFilter && r.expenseType !== roomTypeFilter) return false;
      return true;
    });
  }, [roomExpenses, roomSearch, roomTypeFilter]);

  const filteredPersonalExpenses = useMemo(() => {
    return personalExpenses.filter((p: any) => {
      if (personalSearch) {
        const s = personalSearch.toLowerCase();
        if (!p.student?.name?.toLowerCase().includes(s)) return false;
      }
      if (personalTypeFilter && p.expenseType !== personalTypeFilter) return false;
      return true;
    });
  }, [personalExpenses, personalSearch, personalTypeFilter]);

  const handleRoomExpense = async () => {
    const values = await roomForm.validateFields();
    const payload = {
      roomId: values.roomId,
      expenseType: values.expenseType,
      amount: values.amount,
      periodStart: values.period[0].format('YYYY-MM-DD'),
      periodEnd: values.period[1].format('YYYY-MM-DD'),
      description: values.description,
    };
    try {
      if (editingRoom) {
        await api.put(`/expenses/room/${editingRoom.id}`, payload);
        message.success('更新成功');
      } else {
        await api.post('/expenses/room', payload);
        message.success('录入成功');
      }
      setRoomModal(false);
      setEditingRoom(null);
      roomForm.resetFields();
      fetchData();
    } catch (e: any) {
      message.error(e?.message || '操作失败');
    }
  };

  const handlePersonalExpense = async () => {
    const values = await personalForm.validateFields();
    const payload = {
      studentId: values.studentId,
      roomId: values.roomId,
      expenseType: values.expenseType,
      amount: values.amount,
      expenseDate: values.expenseDate.format('YYYY-MM-DD'),
      description: values.description,
    };
    try {
      if (editingPersonal) {
        await api.put(`/expenses/personal/${editingPersonal.id}`, payload);
        message.success('更新成功');
      } else {
        await api.post('/expenses/personal', payload);
        message.success('录入成功');
      }
      setPersonalModal(false);
      setEditingPersonal(null);
      personalForm.resetFields();
      fetchData();
    } catch (e: any) {
      message.error(e?.message || '操作失败');
    }
  };

  const roomColumns = [
    { title: '宿舍', render: (_: any, r: any) => r.room?.roomNumber || '-' },
    {
      title: '费用类型',
      dataIndex: 'expenseType',
      render: (v: string) => <Tag>{typeMap[v] || v}</Tag>,
    },
    { title: '金额', dataIndex: 'amount', render: (v: number) => `¥${Number(v).toFixed(2)}` },
    { title: '账单周期', render: (_: any, r: any) => `${r.periodStart} ~ ${r.periodEnd}` },
    { title: '说明', dataIndex: 'description' },
    {
      title: '录入时间',
      dataIndex: 'createdAt',
      render: (v: string) => dayjs(v).format('YYYY-MM-DD HH:mm'),
    },
    {
      title: '操作',
      width: 120,
      render: (_: any, record: any) => (
        <Space>
          <PermissionButton
            permission="expense:edit"
            size="small"
            icon={<EditOutlined />}
            onClick={() => {
              setEditingRoom(record);
              roomForm.setFieldsValue({
                roomId: record.roomId,
                expenseType: record.expenseType,
                amount: Number(record.amount),
                period: [dayjs(record.periodStart), dayjs(record.periodEnd)],
                description: record.description,
              });
              setRoomModal(true);
            }}
          >
            {''}
          </PermissionButton>
          <PermissionButton permission="expense:delete">
            <Popconfirm
              title="确定删除？"
              onConfirm={async () => {
                await api.delete(`/expenses/room/${record.id}`);
                message.success('删除成功');
                fetchData();
              }}
            >
              <Button size="small" danger icon={<DeleteOutlined />} />
            </Popconfirm>
          </PermissionButton>
        </Space>
      ),
    },
  ];

  const personalColumns = [
    { title: '学生', render: (_: any, r: any) => r.student?.name || '-' },
    {
      title: '费用类型',
      dataIndex: 'expenseType',
      render: (v: string) => <Tag color="orange">{typeMap[v] || v}</Tag>,
    },
    { title: '金额', dataIndex: 'amount', render: (v: number) => `¥${Number(v).toFixed(2)}` },
    { title: '日期', dataIndex: 'expenseDate' },
    { title: '说明', dataIndex: 'description' },
    {
      title: '操作',
      width: 120,
      render: (_: any, record: any) => (
        <Space>
          <PermissionButton
            permission="expense:edit"
            size="small"
            icon={<EditOutlined />}
            onClick={() => {
              setEditingPersonal(record);
              personalForm.setFieldsValue({
                studentId: record.studentId,
                roomId: record.roomId,
                expenseType: record.expenseType,
                amount: Number(record.amount),
                expenseDate: dayjs(record.expenseDate),
                description: record.description,
              });
              setPersonalModal(true);
            }}
          >
            {''}
          </PermissionButton>
          <PermissionButton permission="expense:delete">
            <Popconfirm
              title="确定删除？"
              onConfirm={async () => {
                await api.delete(`/expenses/personal/${record.id}`);
                message.success('删除成功');
                fetchData();
              }}
            >
              <Button size="small" danger icon={<DeleteOutlined />} />
            </Popconfirm>
          </PermissionButton>
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Tabs
        items={[
          {
            key: 'room',
            label: '宿舍费用',
            children: (
              <>
                <div
                  style={{
                    marginBottom: 16,
                    display: 'flex',
                    justifyContent: 'space-between',
                    flexWrap: 'wrap',
                    gap: 8,
                  }}
                >
                  <Space wrap>
                    <Input.Search
                      placeholder="搜索宿舍号"
                      allowClear
                      style={{ width: 160 }}
                      onSearch={(v) => setRoomSearch(v)}
                      onChange={(e) => {
                        if (!e.target.value) setRoomSearch('');
                      }}
                    />
                    <Select
                      placeholder="费用类型"
                      allowClear
                      style={{ width: 120 }}
                      value={roomTypeFilter}
                      onChange={(v) => setRoomTypeFilter(v)}
                      options={expenseTypeOptions}
                    />
                    <PermissionButton permission="expense:create" type="text">
                      <Upload
                        accept=".xlsx,.xls"
                        showUploadList={false}
                        customRequest={async ({ file, onSuccess, onError }: any) => {
                          const formData = new FormData();
                          formData.append('file', file);
                          try {
                            const res: any = await api.post('/expenses/utility/import', formData, {
                              headers: { 'Content-Type': 'multipart/form-data' },
                            });
                            if (res.errors?.length > 0) {
                              Modal.warning({
                                title: res.message,
                                content: res.errors.join('\n'),
                                width: 500,
                              });
                            } else {
                              message.success(res.message);
                            }
                            onSuccess?.(res);
                            fetchData();
                          } catch (e: any) {
                            message.error(e?.message || '导入失败');
                            onError?.(e);
                          }
                        }}
                      >
                        <Button icon={<UploadOutlined />}>导入水电费Excel</Button>
                      </Upload>
                    </PermissionButton>
                    <PermissionButton
                      permission="expense:view"
                      icon={<DownloadOutlined />}
                      onClick={() => {
                        const baseURL = import.meta.env.PROD
                          ? '/api'
                          : `http://localhost:${import.meta.env.VITE_API_PORT || 3002}/api`;
                        const token = localStorage.getItem('token');
                        fetch(`${baseURL}/expenses/utility/template`, {
                          headers: { Authorization: `Bearer ${token}` },
                        })
                          .then((res) => res.blob())
                          .then((blob) => {
                            const url = URL.createObjectURL(blob);
                            const a = document.createElement('a');
                            a.href = url;
                            a.download = '水电费导入模板.xlsx';
                            a.click();
                            URL.revokeObjectURL(url);
                          })
                          .catch(() => message.error('下载失败'));
                      }}
                    >
                      下载水电费模板
                    </PermissionButton>
                  </Space>
                  <Space>
                    <PermissionButton permission="expense:delete">
                      <Popconfirm
                        title={`确定删除选中的 ${selectedRoomKeys.length} 条费用？`}
                        onConfirm={handleBatchDeleteRoom}
                        okText="删除"
                        cancelText="取消"
                        disabled={selectedRoomKeys.length === 0}
                      >
                        <Button
                          danger
                          icon={<DeleteOutlined />}
                          disabled={selectedRoomKeys.length === 0}
                        >
                          批量删除
                        </Button>
                      </Popconfirm>
                    </PermissionButton>
                    <PermissionButton
                      permission="expense:create"
                      type="primary"
                      icon={<PlusOutlined />}
                      onClick={() => {
                        setEditingRoom(null);
                        roomForm.resetFields();
                        setRoomModal(true);
                      }}
                    >
                      录入宿舍费用
                    </PermissionButton>
                  </Space>
                </div>
                <Table
                  columns={roomColumns}
                  dataSource={filteredRoomExpenses}
                  rowKey="id"
                  loading={loading}
                  scroll={{ x: 800 }}
                  pagination={{ pageSize: 15, showTotal: (total) => `共 ${total} 条` }}
                  rowSelection={{
                    selectedRowKeys: selectedRoomKeys,
                    onChange: (keys) => setSelectedRoomKeys(keys as number[]),
                  }}
                />
              </>
            ),
          },
          {
            key: 'personal',
            label: '个人附加费',
            children: (
              <>
                <div
                  style={{
                    marginBottom: 16,
                    display: 'flex',
                    justifyContent: 'space-between',
                    flexWrap: 'wrap',
                    gap: 8,
                  }}
                >
                  <Space wrap>
                    <Input.Search
                      placeholder="搜索学生姓名"
                      allowClear
                      style={{ width: 160 }}
                      onSearch={(v) => setPersonalSearch(v)}
                      onChange={(e) => {
                        if (!e.target.value) setPersonalSearch('');
                      }}
                    />
                    <Select
                      placeholder="费用类型"
                      allowClear
                      style={{ width: 120 }}
                      value={personalTypeFilter}
                      onChange={(v) => setPersonalTypeFilter(v)}
                      options={personalExpenseTypeOptions}
                    />
                    <PermissionButton permission="expense:create" type="text">
                      <Upload
                        accept=".xlsx,.xls"
                        showUploadList={false}
                        customRequest={async ({ file, onSuccess, onError }: any) => {
                          try {
                            const formData = new FormData();
                            formData.append('file', file);
                            const res: any = await api.post('/expenses/personal/import', formData);
                            message.success(res.message || '导入完成');
                            if (res.errors?.length)
                              res.errors.forEach((e: string) => message.warning(e));
                            fetchData();
                            onSuccess?.(res);
                          } catch (e: any) {
                            message.error(e?.message || '导入失败');
                            onError?.(e);
                          }
                        }}
                      >
                        <Button icon={<UploadOutlined />}>导入个人附加费</Button>
                      </Upload>
                    </PermissionButton>
                    <PermissionButton
                      permission="expense:view"
                      icon={<DownloadOutlined />}
                      onClick={() => {
                        const baseURL = import.meta.env.PROD
                          ? '/api'
                          : `http://localhost:${import.meta.env.VITE_API_PORT || 3002}/api`;
                        const token = localStorage.getItem('token');
                        fetch(`${baseURL}/expenses/personal/template`, {
                          headers: { Authorization: `Bearer ${token}` },
                        })
                          .then((res) => res.blob())
                          .then((blob) => {
                            const url = URL.createObjectURL(blob);
                            const a = document.createElement('a');
                            a.href = url;
                            a.download = '个人附加费导入模板.xlsx';
                            a.click();
                            URL.revokeObjectURL(url);
                          })
                          .catch(() => message.error('下载失败'));
                      }}
                    >
                      下载模板
                    </PermissionButton>
                    <PermissionButton
                      permission="expense:view"
                      icon={<ExportOutlined />}
                      onClick={() => {
                        const baseURL = import.meta.env.PROD
                          ? '/api'
                          : `http://localhost:${import.meta.env.VITE_API_PORT || 3002}/api`;
                        const token = localStorage.getItem('token');
                        fetch(`${baseURL}/expenses/personal/export`, {
                          headers: { Authorization: `Bearer ${token}` },
                        })
                          .then((res) => res.blob())
                          .then((blob) => {
                            const url = URL.createObjectURL(blob);
                            const a = document.createElement('a');
                            a.href = url;
                            a.download = '个人附加费导出.xlsx';
                            a.click();
                            URL.revokeObjectURL(url);
                          })
                          .catch(() => message.error('导出失败'));
                      }}
                    >
                      导出
                    </PermissionButton>
                  </Space>
                  <Space>
                    <PermissionButton permission="expense:delete">
                      <Popconfirm
                        title={`确定删除选中的 ${selectedPersonalKeys.length} 条个人费用？`}
                        onConfirm={handleBatchDeletePersonal}
                        okText="删除"
                        cancelText="取消"
                        disabled={selectedPersonalKeys.length === 0}
                      >
                        <Button
                          danger
                          icon={<DeleteOutlined />}
                          disabled={selectedPersonalKeys.length === 0}
                        >
                          批量删除
                        </Button>
                      </Popconfirm>
                    </PermissionButton>
                    <PermissionButton
                      permission="expense:create"
                      type="primary"
                      icon={<PlusOutlined />}
                      onClick={() => {
                        setEditingPersonal(null);
                        personalForm.resetFields();
                        setPersonalModal(true);
                      }}
                    >
                      录入个人费用
                    </PermissionButton>
                  </Space>
                </div>
                <Table
                  columns={personalColumns}
                  dataSource={filteredPersonalExpenses}
                  rowKey="id"
                  loading={loading}
                  scroll={{ x: 800 }}
                  pagination={{ pageSize: 15, showTotal: (total) => `共 ${total} 条` }}
                  rowSelection={{
                    selectedRowKeys: selectedPersonalKeys,
                    onChange: (keys) => setSelectedPersonalKeys(keys as number[]),
                  }}
                />
              </>
            ),
          },
        ]}
      />

      <Modal
        title={editingRoom ? '编辑宿舍费用' : '录入宿舍费用'}
        open={roomModal}
        onOk={handleRoomExpense}
        onCancel={() => {
          setRoomModal(false);
          setEditingRoom(null);
        }}
        okText={editingRoom ? '保存' : '确认录入'}
      >
        <Form form={roomForm} layout="vertical">
          <Form.Item name="roomId" label="宿舍" rules={[{ required: true }]}>
            <Select
              showSearch
              optionFilterProp="label"
              options={rooms.map((r: any) => ({
                value: r.id,
                label: `${r.roomNumber} (${r.building || ''})`,
              }))}
            />
          </Form.Item>
          <Form.Item name="expenseType" label="费用类型" rules={[{ required: true }]}>
            <Select options={expenseTypeOptions} />
          </Form.Item>
          <Form.Item name="amount" label="金额（元）" rules={[{ required: true }]}>
            <InputNumber min={0} precision={2} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="period" label="账单周期" rules={[{ required: true }]}>
            <RangePicker
              style={{ width: '100%' }}
              placeholder={['开始日期', '结束日期']}
              format="YYYY-MM-DD"
            />
          </Form.Item>
          <Form.Item name="description" label="说明">
            <Input.TextArea rows={2} />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title={editingPersonal ? '编辑个人费用' : '录入个人附加费'}
        open={personalModal}
        onOk={handlePersonalExpense}
        onCancel={() => {
          setPersonalModal(false);
          setEditingPersonal(null);
        }}
        okText={editingPersonal ? '保存' : '确认录入'}
      >
        <Form form={personalForm} layout="vertical">
          <Form.Item name="studentId" label="学生" rules={[{ required: true }]}>
            <Select
              showSearch
              optionFilterProp="label"
              options={students.map((s: any) => ({ value: s.id, label: s.name }))}
            />
          </Form.Item>
          <Form.Item name="roomId" label="关联宿舍">
            <Select
              allowClear
              showSearch
              optionFilterProp="label"
              options={rooms.map((r: any) => ({ value: r.id, label: r.roomNumber }))}
            />
          </Form.Item>
          <Form.Item name="expenseType" label="费用类型" rules={[{ required: true }]}>
            <Select options={personalExpenseTypeOptions} />
          </Form.Item>
          <Form.Item name="amount" label="金额（元）" rules={[{ required: true }]}>
            <InputNumber min={0} precision={2} style={{ width: '100%' }} />
          </Form.Item>
          <Form.Item name="expenseDate" label="费用日期" rules={[{ required: true }]}>
            <DatePicker style={{ width: '100%' }} placeholder="选择日期" format="YYYY-MM-DD" />
          </Form.Item>
          <Form.Item name="description" label="说明">
            <Input.TextArea rows={2} />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default ExpensesPage;