import { useEffect, useState, useRef } from 'react';
import { PageHeader } from '@/components/layout/PageHeader';
import * as consultationService from '@/services/consultation.service';
import type { Consultation, ConsultationMessage, Doctor } from '@/types';
import { formatRelative } from '@/utils/format';
import styles from './ChatPage.module.css';

export function ChatPage() {
  const [doctor, setDoctor] = useState<Doctor | null>(null);
  const [consultation, setConsultation] = useState<Consultation | null>(null);
  const [messages, setMessages] = useState<ConsultationMessage[]>([]);
  const [text, setText] = useState('');
  const [sending, setSending] = useState(false);
  const bottomRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Get the first available doctor
    consultationService.getDoctors().then((docs) => {
      if (docs.length > 0) {
        const doc = docs[0];
        setDoctor(doc);
        // Find or create consultation
        consultationService.getConsultation(doc.id).then(async (c) => {
          if (c) {
            setConsultation(c);
            loadMessages(c.id);
          } else {
            const newC = await consultationService.startConsultation(doc.id, '在线咨询');
            setConsultation(newC);
          }
        });
      }
    });
  }, []);

  const loadMessages = (cid: string) => {
    import('@/services/api-client').then(({ api }) => {
      api.get<ConsultationMessage[]>(`/api/consultations/${cid}/messages`)
        .then((res) => setMessages(res.data));
    });
  };

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  useEffect(() => {
    // Poll for new messages every 3 seconds
    if (!consultation?.id) return;
    const timer = setInterval(() => loadMessages(consultation.id), 3000);
    return () => clearInterval(timer);
  }, [consultation?.id]);

  const handleSend = async () => {
    if (!text.trim() || !consultation || sending) return;
    setSending(true);
    const msgText = text;
    setText('');
    const sent = await consultationService.sendMessage(consultation.id, msgText);
    setMessages((prev) => [...prev, sent]);
    setSending(false);
  };

  return (
    <div className={styles.page}>
      <PageHeader title={doctor?.name || '在线问诊'} />
      <div className={styles.messages}>
        {messages.length === 0 && (
          <div style={{ textAlign: 'center', color: '#9CA3AF', marginTop: 40, fontSize: 14 }}>
            您好，我是{doctor?.name || '医生'}，请问有什么可以帮您？
          </div>
        )}
        {messages.map((msg) => (
          <div
            key={msg.id}
            className={`${styles.bubble} ${msg.senderRole === 'patient' ? styles.patient : styles.doctor}`}
          >
            <div className={styles.bubbleContent}>{msg.content}</div>
            <div className={styles.bubbleTime}>{formatRelative(msg.createdAt)}</div>
          </div>
        ))}
        <div ref={bottomRef} />
      </div>
      <div className={styles.inputBar}>
        <input
          className={styles.input}
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="输入消息..."
          onKeyDown={(e) => e.key === 'Enter' && handleSend()}
        />
        <button className={styles.sendBtn} onClick={handleSend} disabled={sending}>
          ↑
        </button>
      </div>
    </div>
  );
}