import React, { useState, useCallback } from 'react';
import { View, Text } from '@tarojs/components';
import Taro, { useDidShow } from '@tarojs/taro';
import { listPatients, Patient } from '../../../services/patient';
import { useAuthStore } from '../../../stores/auth';
import EmptyState from '../../../components/EmptyState';
import './index.scss';

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

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

  useDidShow(() => {
    fetchPatients();
  });

  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 = () => {
    Taro.navigateTo({ url: '/pages/profile/family-add/index' });
  };

  const goToEdit = (patient: Patient) => {
    Taro.setStorageSync('edit_patient', patient);
    Taro.navigateTo({ url: `/pages/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 (
    <View className='family-page'>
      <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>
    </View>
  );
}