import { Row, Col, Card, Statistic, Tabs, Spin, Typography, Flex } from 'antd';
import {
  TeamOutlined,
  CalendarOutlined,
  SafetyCertificateOutlined,
  MedicineBoxOutlined,
  UserOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { useStatsData } from './useStatsData';
import { useCountUp } from '../../../hooks/useCountUp';
import HealthDataCenter from './HealthDataCenter';

export function AdminDashboard() {
  const navigate = useNavigate();
  const { patientStats, followUpStats, healthDataStats, dialysisStats, doctorCount, loading } = useStatsData();
  const patientCount = useCountUp(patientStats?.total_patients ?? 0);
  const appointmentCount = useCountUp(healthDataStats?.appointments?.this_month ?? 0);
  const doctorCountDisplay = useCountUp(doctorCount);

  if (loading && !patientStats) return <Spin size="large" style={{ display: 'block', margin: '80px auto' }} />;

  const newThisMonth = patientStats?.new_this_month ?? 0;
  const newThisWeek = patientStats?.new_this_week ?? 0;

  return (
    <div>
      <Flex justify="space-between" align="center" style={{ marginBottom: 24 }}>
        <div>
          <Typography.Title level={4} style={{ margin: 0 }}>管理中心</Typography.Title>
          <Typography.Text type="secondary">
            患者增长 {newThisMonth > 0 ? `本月+${newThisMonth}` : ''} · 本周+{newThisWeek} · 活跃 {patientStats?.active_this_month ?? 0}
          </Typography.Text>
        </div>
      </Flex>

      <Row gutter={[16, 16]}>
        <Col xs={12} sm={8} lg={4}>
          <Card size="small" style={{ cursor: 'pointer' }} onClick={() => navigate('/health/patients')}>
            <Statistic title="患者总数" value={patientCount} prefix={<TeamOutlined />} />
          </Card>
        </Col>
        <Col xs={12} sm={8} lg={4}>
          <Card size="small" style={{ cursor: 'pointer' }} onClick={() => navigate('/health/appointments')}>
            <Statistic title="本月预约" value={appointmentCount} prefix={<CalendarOutlined />} />
          </Card>
        </Col>
        <Col xs={12} sm={8} lg={4}>
          <Card size="small" style={{ cursor: 'pointer' }} onClick={() => navigate('/health/follow-ups')}>
            <Statistic
              title="随访完成"
              value={followUpStats?.completion_rate ?? 0}
              precision={0}
              suffix="%"
              prefix={<SafetyCertificateOutlined />}
              suffix={
                <span style={{ fontSize: 12 }}>
                  % {followUpStats && followUpStats.overdue > 0 && (
                    <Typography.Text type="danger" style={{ fontSize: 11 }}>({followUpStats.overdue}逾期)</Typography.Text>
                  )}
                </span>
              }
            />
          </Card>
        </Col>
        <Col xs={12} sm={8} lg={4}>
          <Card size="small" style={{ cursor: 'pointer' }} onClick={() => navigate('/health/vital-signs')}>
            <Statistic
              title="体征上报"
              value={healthDataStats?.vital_signs_report_rate?.report_rate ?? 0}
              precision={0}
              suffix="%"
              prefix={<MedicineBoxOutlined />}
            />
          </Card>
        </Col>
        <Col xs={12} sm={8} lg={4}>
          <Card size="small" style={{ cursor: 'pointer' }} onClick={() => navigate('/health/doctors')}>
            <Statistic title="医护人数" value={doctorCountDisplay} prefix={<UserOutlined />} />
          </Card>
        </Col>
        <Col xs={12} sm={8} lg={4}>
          <Card size="small" style={{ cursor: 'pointer' }} onClick={() => navigate('/health/consultations')}>
            <Statistic
              title="咨询待回复"
              value={healthDataStats ? 0 : 0}
              prefix={<TeamOutlined />}
              valueStyle={{ color: '#d97706' }}
            />
          </Card>
        </Col>
      </Row>

      {/* 健康数据中心 Tab */}
      <Card style={{ marginTop: 16 }}>
        <Tabs
          defaultActiveKey="dialysis"
          items={[
            { key: 'dialysis', label: '透析管理', children: <HealthDataCenter data={healthDataStats} dialysisData={dialysisStats} tab="dialysis" /> },
            { key: 'lab', label: '化验报告', children: <HealthDataCenter data={healthDataStats} tab="lab" /> },
            { key: 'appointments', label: '预约分析', children: <HealthDataCenter data={healthDataStats} tab="appointments" /> },
            { key: 'vital-signs', label: '体征数据', children: <HealthDataCenter data={healthDataStats} tab="vital-signs" /> },
          ]}
        />
      </Card>
    </div>
  );
}
