import { useState } from 'react';
import { View, Text } from '@tarojs/components';
import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro';
import { listConsultations, ConsultationSession } from '@/services/consultation';
import Loading from '../../components/Loading';
import './index.scss';

function getStatusLabel(status: string): string {
  const map: Record<string, string> = {
    pending: '等待接诊',
    active: '进行中',
    closed: '已结束',
    cancelled: '已取消',
  };
  return map[status] || status;
}

function getStatusClass(status: string): string {
  if (status === 'active') return 'session-status-active';
  if (status === 'pending') return 'session-status-pending';
  return 'session-status-closed';
}

function formatTime(iso: string): string {
  if (!iso) return '';
  const d = new Date(iso);
  const now = new Date();
  const diffMs = now.getTime() - d.getTime();
  const diffMin = Math.floor(diffMs / 60000);

  if (diffMin < 1) return '刚刚';
  if (diffMin < 60) return `${diffMin}分钟前`;
  const diffHour = Math.floor(diffMin / 60);
  if (diffHour < 24) return `${diffHour}小时前`;
  const diffDay = Math.floor(diffHour / 24);
  if (diffDay < 7) return `${diffDay}天前`;

  const m = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  return `${m}-${day}`;
}

export default function Consultation() {
  const [sessions, setSessions] = useState<ConsultationSession[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  const loadSessions = async () => {
    setLoading(true);
    setError('');
    try {
      const resp = await listConsultations({ page: 1, page_size: 20 });
      setSessions(resp.data || []);
    } catch (e: unknown) {
      const msg = e instanceof Error ? e.message : '加载失败';
      setError(msg);
    } finally {
      setLoading(false);
    }
  };

  useDidShow(() => {
    Taro.setNavigationBarTitle({ title: '在线咨询' });
    loadSessions();
  });

  usePullDownRefresh(() => {
    loadSessions().finally(() => {
      Taro.stopPullDownRefresh();
    });
  });

  const handleTapSession = (session: ConsultationSession) => {
    Taro.navigateTo({ url: `/pages/consultation/detail/index?id=${session.id}` });
  };

  return (
    <View className='consultation-page'>
      <View className='consultation-header'>
        <Text className='consultation-header-title'>在线咨询</Text>
        <Text className='consultation-header-desc'>随时随地，连接专业医生</Text>
      </View>

      {loading ? (
        <View className='consultation-loading'>
          <Loading text='加载中...' />
        </View>
      ) : error ? (
        <View className='consultation-error'>
          <Text className='consultation-error-text'>{error}</Text>
        </View>
      ) : sessions.length === 0 ? (
        <View className='consultation-empty'>
          <Text className='consultation-empty-icon'>💬</Text>
          <Text className='consultation-empty-text'>暂无咨询记录</Text>
          <Text className='consultation-empty-hint'>发起咨询后即可在这里与医生交流</Text>
        </View>
      ) : (
        <View className='consultation-list'>
          {sessions.map((session) => (
            <View
              key={session.id}
              className='consultation-session'
              onClick={() => handleTapSession(session)}
            >
              <View className='session-left'>
                <View className='session-top'>
                  <Text className='session-subject'>
                    {session.subject || '在线咨询'}
                  </Text>
                  <Text className={getStatusClass(session.status)}>
                    {getStatusLabel(session.status)}
                  </Text>
                </View>
                <Text className='session-message'>
                  {session.last_message || '暂无消息'}
                </Text>
                <Text className='session-time'>
                  {session.last_message_at
                    ? formatTime(session.last_message_at)
                    : formatTime(session.created_at)}
                </Text>
              </View>
              {session.unread_count > 0 && (
                <View className='session-badge'>
                  <Text className='session-badge-text'>
                    {session.unread_count > 99 ? '99+' : session.unread_count}
                  </Text>
                </View>
              )}
            </View>
          ))}
        </View>
      )}
    </View>
  );
}