import React, { useState, useCallback } from 'react';
import { View, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { safeNavigateTo } from '@/utils/navigate';
import { usePageData } from '@/hooks/usePageData';
import { listPatients, Patient } from '../../../services/patient';
import { useAuthStore } from '../../../stores/auth';
import EmptyState from '../../../components/EmptyState';
import { useElderClass } from '../../../hooks/useElderClass';
import PageShell from '@/components/ui/PageShell';
import './index.scss';

export default function FamilyList() {
  const modeClass = useElderClass();
  const [patients, setPatients] = useState<Patient[]>([]);
  const [loading, setLoading] = useState(false);
  const currentPatient = useAuthStore((s) => s.currentPatient);
  const setCurrentPatient = useAuthStore((s) => s.setCurrentPatient);

  const fetchPatients = useCallback(async () => {
    setLoading(true);
    try {
      const res = await listPatients();
      setPatients(res.data || []);
    } catch {
      Taro.showToast({ title: '加载失败', icon: 'none' });
    } finally {
      setLoading(false);
    }
  }, []);

  usePageData(fetchPatients, { throttleMs: 10000 });

  const handleSelect = (patient: Patient) => {
    setCurrentPatient({
      id: patient.id,
      name: patient.name,
      gender: patient.gender,
      birth_date: patient.birth_date,
      relation: patient.relation || '本人',
    });
    Taro.showToast({ title: `已切换为 ${patient.name}`, icon: 'success' });
  };

  const goToAdd = () => {
    safeNavigateTo('/pages/pkg-profile/family-add/index');
  };

  const goToEdit = (patient: Patient) => {
    Taro.setStorageSync('edit_patient', patient);
    safeNavigateTo(`/pages/pkg-profile/family-add/index?id=${patient.id}`);
  };

  const genderText = (g?: string) => {
    if (g === 'male') return '男';
    if (g === 'female') return '女';
    return '未知';
  };

  const relationInitial = (relation: string) => {
    return relation ? relation.charAt(0) : '本';
  };

  return (
    <PageShell className={modeClass}>
      <Text className='family-page-title'>就诊人管理</Text>

      <View className='family-list'>
        {patients.map((p) => {
          const isActive = currentPatient?.id === p.id;
          return (
            <View
              className={`family-item ${isActive ? 'active' : ''}`}
              key={p.id}
              onClick={() => handleSelect(p)}
            >
              <View className='family-avatar'>
                <Text className='family-avatar-text'>{relationInitial(p.relation || '本人')}</Text>
              </View>
              <View className='family-info'>
                <View className='family-name-row'>
                  <Text className='family-name'>{p.name}</Text>
                  {isActive && <Text className='family-current-tag'>当前</Text>}
                </View>
                <View className='family-meta'>
                  <Text className='family-relation-tag'>{p.relation || '本人'}</Text>
                  <Text className='family-gender'>{genderText(p.gender)}</Text>
                </View>
              </View>
              <View
                className='family-edit'
                onClick={(e) => { e.stopPropagation(); goToEdit(p); }}
              >
                <Text className='family-edit-text'>编辑</Text>
              </View>
            </View>
          );
        })}
      </View>

      {patients.length === 0 && !loading && (
        <EmptyState text='暂无就诊人' />
      )}

      <View className='family-add-btn' onClick={goToAdd}>
        <Text className='family-add-text'>添加就诊人</Text>
      </View>
    </PageShell>
  );
}