import { useEffect, useState, useRef } from 'react';
import type { ExamClient, ExamModalTab } from '../../data/mockData';
import { EXAM_TAGS } from '../../data/mockData';
import { getTodayExamProgress } from '../../api';
import { Badge, Button, Card, CardContent, CardHeader, InfoCard, Input } from '../ui';
import { cls } from '../../utils/cls';

interface ExamSectionProps {
  filteredClients: ExamClient[];
  selectedExamClient: ExamClient | undefined;
  examFilterTags: Set<(typeof EXAM_TAGS)[number]>;
  onFilterChange: (tag: (typeof EXAM_TAGS)[number]) => void;
  onOpenModal: (id: string, tab: ExamModalTab) => void;
  searchValue: string;
  onSearchChange: (value: string) => void;
  loading?: boolean;
}

const INITIAL_LOAD_COUNT = 9; // 初始加载数量（3列 x 3行）
const LOAD_MORE_COUNT = 9; // 每次加载更多时的数量

export const ExamSection = ({
  filteredClients,
  selectedExamClient,
  examFilterTags,
  onFilterChange,
  onOpenModal,
  searchValue,
  onSearchChange,
  loading = false,
}: ExamSectionProps) => {
  const [progressStats, setProgressStats] = useState([
    { label: '预约人数', value: 0 },
    { label: '已签到', value: 0 },
    { label: '体检中', value: 0 },
    { label: '用餐', value: 0 },
  ]);
  const [displayCount, setDisplayCount] = useState(INITIAL_LOAD_COUNT);
  const observerTarget = useRef<HTMLDivElement>(null);
  const [isLoadingMore, setIsLoadingMore] = useState(false);
  // 防抖：内部输入值
  const [debouncedInputValue, setDebouncedInputValue] = useState(searchValue);
  const debounceTimerRef = useRef<number | null>(null);

  useEffect(() => {
    getTodayExamProgress({})
      .then((res) => {
        const d = res.Data;
        setProgressStats([
          { label: '预约人数', value: Number(d?.today_appointment_count ?? 0) },
          { label: '已签到', value: Number(d?.today_signin_count ?? 0) },
          { label: '体检中', value: Number(d?.today_in_exam_count ?? 0) },
          { label: '用餐', value: Number(d?.today_meal_count ?? 0) },
        ]);
      })
      .catch((err) => {
        console.error('获取今日体检进度失败', err);
      });
  }, []);

  // 防抖：当输入值变化时，延迟 0.5 秒后调用 onSearchChange
  useEffect(() => {
    if (debounceTimerRef.current) {
      window.clearTimeout(debounceTimerRef.current);
    }

    debounceTimerRef.current = window.setTimeout(() => {
      onSearchChange(debouncedInputValue);
    }, 500);

    return () => {
      if (debounceTimerRef.current) {
        window.clearTimeout(debounceTimerRef.current);
      }
    };
  }, [debouncedInputValue, onSearchChange]);

  // 当外部 searchValue 变化时（比如清空搜索），同步内部值（仅在值确实不同时更新）
  useEffect(() => {
    if (searchValue !== debouncedInputValue && searchValue === '') {
      // 只在外部清空搜索时同步，避免用户输入时被覆盖
      setDebouncedInputValue('');
    }
  }, [searchValue]);

  // 当 filteredClients 变化时，重置显示数量
  useEffect(() => {
    setDisplayCount(INITIAL_LOAD_COUNT);
  }, [filteredClients.length, searchValue, examFilterTags]);

  // 懒加载：使用 Intersection Observer 监听底部元素
  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        if (entries[0].isIntersecting && !loading && !isLoadingMore) {
          const hasMore = displayCount < filteredClients.length;
          if (hasMore) {
            setIsLoadingMore(true);
            // 模拟加载延迟，让用户看到 loading 效果
            setTimeout(() => {
              setDisplayCount((prev) => Math.min(prev + LOAD_MORE_COUNT, filteredClients.length));
              setIsLoadingMore(false);
            }, 0);
          }
        }
      },
      {
        root: null,
        rootMargin: '100px',
        threshold: 0.1,
      }
    );

    const currentTarget = observerTarget.current;
    if (currentTarget) {
      observer.observe(currentTarget);
    }

    return () => {
      if (currentTarget) {
        observer.unobserve(currentTarget);
      }
    };
  }, [displayCount, filteredClients.length, loading, isLoadingMore]);

  const displayedClients = filteredClients.slice(0, displayCount);
  const hasMore = displayCount < filteredClients.length;

  return (
    <div className='space-y-4'>
      <Card>
        <CardHeader>今日体检进度</CardHeader>
        <CardContent>
          <div className='grid grid-cols-4 gap-3'>
            {progressStats.map(({ label, value }) => (
              <InfoCard key={label} label={label} value={value} />
            ))}
          </div>
        </CardContent>
      </Card>
      <div className='w-[320px] flex items-center gap-2'>
        <Input
          placeholder='搜索 姓名 / 手机号 / 身份证号 / 卡号'
          value={debouncedInputValue}
          onChange={(e) => setDebouncedInputValue(e.target.value)}
          className='text-sm flex-1'
        />
        {debouncedInputValue && (
          <Button
            className='px-3 py-1.5 text-xs whitespace-nowrap'
            onClick={() => setDebouncedInputValue('')}
          >
            重置
          </Button>
        )}
      </div>
      <Card>
        <CardHeader>
          <div className='flex items-center justify-between w-full'>
            <span>体检客户列表</span>
            <div className='flex items-center gap-3'>
              <div className='flex items-center gap-2 text-xs'>
                {EXAM_TAGS.map((tag) => (
                  <button
                    key={tag}
                    onClick={() => onFilterChange(tag)}
                    className={cls(
                      'px-3 py-1 rounded-2xl border transition-colors',
                      examFilterTags.has(tag)
                        ? 'bg-gray-900 text-white border-gray-900'
                        : 'bg-white text-gray-700 border-gray-200 hover:border-gray-300',
                    )}
                  >
                    {tag}
                  </button>
                ))}
              </div>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          {loading && filteredClients.length === 0 ? (
            <div className='text-center text-gray-500 py-8'>
              <div className='flex items-center justify-center gap-2'>
                <svg
                  className='animate-spin h-5 w-5 text-gray-600'
                  xmlns='http://www.w3.org/2000/svg'
                  fill='none'
                  viewBox='0 0 24 24'
                >
                  <circle
                    className='opacity-25'
                    cx='12'
                    cy='12'
                    r='10'
                    stroke='currentColor'
                    strokeWidth='4'
                  ></circle>
                  <path
                    className='opacity-75'
                    fill='currentColor'
                    d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
                  ></path>
                </svg>
                <span className='text-sm'>加载中...</span>
              </div>
            </div>
          ) : filteredClients.length === 0 ? (
            <div className='text-center text-gray-500 py-8'>
              <div className='text-sm'>暂无体检客户数据</div>
              <div className='text-xs mt-1'>请尝试调整筛选条件或搜索关键词</div>
            </div>
          ) : (
            <>
              <div className='grid grid-cols-3 gap-3 text-sm'>
                {displayedClients.map((client) => {
                  const addonCount = client.addonCount || 0;
                  const openModal = (tab: ExamModalTab) => onOpenModal(client.id, tab);


                  return (
                    <div
                      key={client.id}
                      role='button'
                      tabIndex={0}
                      onClick={() => openModal('detail')}
                      className={cls(
                        'text-left p-3 rounded-2xl border bg-white hover:bg-gray-50 flex flex-col gap-1 cursor-pointer',
                        selectedExamClient?.id === client.id && 'border-gray-900 bg-gray-50',
                      )}
                    >
                      <div className='flex items-center justify-between mb-1'>
                        <span className='font-medium'>{client.name}</span>
                        {client.familyDoctorName && <span className='text-xs text-gray-500'>家医：{client.familyDoctorName}</span>}
                        <Badge>{client.level}</Badge>
                      </div>
                      <div className='text-xs text-gray-500 truncate'>套餐：{client.packageName}</div>
                      <div className='text-xs text-gray-500 truncate'>渠道：{client.channel ?? ''}</div>
                      <div className='flex items-center justify-between text-xs text-gray-500 mt-1'>
                        <span>状态：{(client as any).physical_exam_status_name ?? '未知状态'}</span>
                        <span>已耗时：{client.elapsed}</span>
                      </div>
                      <div className='mt-2 flex flex-wrap gap-1 text-[11px]'>
                        <button
                          type='button'
                          className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
                          onClick={(e) => {
                            e.stopPropagation();
                            openModal('detail');
                          }}
                        >
                          <span>详情</span>
                        </button>
                        <button
                          type='button'
                          className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
                          onClick={(e) => {
                            e.stopPropagation();
                            openModal('sign');
                          }}
                        >
                          <span>签到</span>
                          {client.signStatus === '已签到' && <span>✅</span>}
                        </button>
                        <button
                          type='button'
                          className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
                          onClick={(e) => {
                            e.stopPropagation();
                            openModal('addon');
                          }}
                        >
                          <span>加项</span>
                          {addonCount > 0 && <span className='opacity-80'>({addonCount})</span>}
                        </button>
                        {/* <button
                          type='button'
                          className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
                          onClick={(e) => {
                            e.stopPropagation();
                            openModal('print');
                          }}
                        >
                          <span>打印导检单</span>
                          {printDone && <span>✅</span>}
                        </button> */}
                        <button
                          type='button'
                          className='px-2 py-0.5 rounded-2xl border bg-white hover:bg-gray-100 flex items-center gap-1'
                          onClick={(e) => {
                            e.stopPropagation();
                            openModal('delivery');
                          }}
                        >
                          <span>报告寄送</span>
                        </button>

                      </div>
                    </div>
                  );
                })}
              </div>
              {/* 懒加载触发区域和 loading */}
              {(hasMore || isLoadingMore) && (
                <div ref={observerTarget} className='flex items-center justify-center py-4'>
                  {isLoadingMore && (
                    <div className='flex items-center gap-2 text-gray-500'>
                      <svg
                        className='animate-spin h-4 w-4 text-gray-600'
                        xmlns='http://www.w3.org/2000/svg'
                        fill='none'
                        viewBox='0 0 24 24'
                      >
                        <circle
                          className='opacity-25'
                          cx='12'
                          cy='12'
                          r='10'
                          stroke='currentColor'
                          strokeWidth='4'
                        ></circle>
                        <path
                          className='opacity-75'
                          fill='currentColor'
                          d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z'
                        ></path>
                      </svg>
                      <span className='text-xs'>加载更多...</span>
                    </div>
                  )}
                </div>
              )}
            </>
          )}
        </CardContent>
      </Card>
    </div>
  );
};