import { useState, useEffect } from 'react';
import { View, Text, Input, ScrollView } from '@tarojs/components';
import Taro, { useRouter } from '@tarojs/taro';
import * as doctorApi from '@/services/doctor';
import Loading from '@/components/Loading';
import EmptyState from '@/components/EmptyState';
import './index.scss';

const TABS = [
  { key: '', label: '全部' },
  { key: 'draft', label: '草稿' },
  { key: 'completed', label: '已完成' },
  { key: 'reviewed', label: '已审核' },
];

const TYPE_MAP: Record<string, string> = { HD: 'HD', HDF: 'HDF', HF: 'HF' };

export default function DialysisList() {
  const router = useRouter();
  const patientId = router.params.patientId || '';
  const [searchPatient, setSearchPatient] = useState('');
  const [currentPatientId, setCurrentPatientId] = useState(patientId);
  const [activeTab, setActiveTab] = useState('');
  const [records, setRecords] = useState<doctorApi.DialysisRecord[]>([]);
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);

  useEffect(() => {
    if (currentPatientId) loadRecords(1);
  }, [currentPatientId, activeTab]);

  const loadRecords = async (p: number) => {
    setLoading(true);
    try {
      const res = await doctorApi.listDialysisRecords(currentPatientId, { page: p, page_size: 20 });
      setRecords(res.data || []);
      setTotal(res.total || 0);
      setPage(p);
    } catch {
      Taro.showToast({ title: '加载失败', icon: 'none' });
    } finally {
      setLoading(false);
    }
  };

  const handleSearch = async () => {
    if (!searchPatient.trim()) return;
    setLoading(true);
    try {
      const res = await doctorApi.listPatients({ search: searchPatient.trim(), page: 1, page_size: 1 });
      if (res.data && res.data.length > 0) {
        setCurrentPatientId(res.data[0].id);
        Taro.setNavigationBarTitle({ title: res.data[0].name + '的透析记录' });
      } else {
        Taro.showToast({ title: '未找到患者', icon: 'none' });
      }
    } catch {
      Taro.showToast({ title: '搜索失败', icon: 'none' });
    } finally {
      setLoading(false);
    }
  };

  const handleTab = (key: string) => {
    setActiveTab(key);
    setPage(1);
  };

  const filtered = activeTab ? records.filter((r) => r.status === activeTab) : records;

  if (loading && records.length === 0) return <Loading />;

  return (
    <ScrollView scrollY className='dialysis-page'>
      {!patientId && (
        <View className='search-bar'>
          <Input
            className='search-input'
            placeholder='搜索患者姓名'
            value={searchPatient}
            onInput={(e) => setSearchPatient(e.detail.value)}
            confirmType='search'
            onConfirm={handleSearch}
          />
        </View>
      )}

      <View className='tabs'>
        {TABS.map((t) => (
          <View
            key={t.key}
            className={`tab ${activeTab === t.key ? 'tab--active' : ''}`}
            onClick={() => handleTab(t.key)}
          >
            <Text className='tab-text'>{t.label}</Text>
          </View>
        ))}
      </View>

      {!currentPatientId ? (
        <EmptyState text='请搜索并选择患者' />
      ) : filtered.length === 0 ? (
        <EmptyState text='暂无透析记录' />
      ) : (
        <View className='record-list'>
          <View className='record-count'><Text>共 {total} 条记录</Text></View>
          {filtered.map((r) => (
            <View
              key={r.id}
              className='record-card'
              onClick={() => Taro.navigateTo({
                url: `/pages/doctor/dialysis/detail/index?id=${r.id}`,
              })}
            >
              <View className='record-card__header'>
                <Text className={`type-tag type-tag--${(r.dialysis_type || 'hd').toLowerCase()}`}>
                  {TYPE_MAP[r.dialysis_type] || r.dialysis_type}
                </Text>
                <Text className={`status-tag status-tag--${r.status}`}>
                  {r.status === 'draft' ? '草稿' : r.status === 'completed' ? '已完成' : '已审核'}
                </Text>
              </View>
              <View className='record-card__body'>
                <Text className='record-card__date'>{r.dialysis_date}</Text>
                {r.dialysis_duration != null && (
                  <Text className='record-card__meta'>时长 {r.dialysis_duration}分钟</Text>
                )}
                {r.ultrafiltration_volume != null && (
                  <Text className='record-card__meta'>超滤 {r.ultrafiltration_volume}ml</Text>
                )}
              </View>
            </View>
          ))}
          {total > 20 && (
            <View className='pagination'>
              <View
                className={`page-btn ${page <= 1 ? 'page-btn--disabled' : ''}`}
                onClick={() => page > 1 && loadRecords(page - 1)}
              >
                <Text>上一页</Text>
              </View>
              <Text className='page-info'>{page} / {Math.ceil(total / 20)}</Text>
              <View
                className={`page-btn ${page * 20 >= total ? 'page-btn--disabled' : ''}`}
                onClick={() => page * 20 < total && loadRecords(page + 1)}
              >
                <Text>下一页</Text>
              </View>
            </View>
          )}
        </View>
      )}

      <View
        className='fab'
        onClick={() => {
          if (!currentPatientId) {
            Taro.showToast({ title: '请先选择患者', icon: 'none' });
            return;
          }
          Taro.navigateTo({ url: `/pages/doctor/dialysis/create/index?patientId=${currentPatientId}` });
        }}
      >
        <Text className='fab-text'>+</Text>
      </View>
    </ScrollView>
  );
}