import { useState, useEffect, useCallback, useRef } from "react";
import { Button, Input, Spin, Popconfirm, message, Typography, Modal, Form, Select, DatePicker } from "antd";
import {
  SendOutlined,
  CloseCircleOutlined,
  ArrowUpOutlined,
  ScheduleOutlined,
  RobotOutlined,
} from "@ant-design/icons";
import { useParams, useNavigate } from "react-router-dom";
import dayjs from "dayjs";
import {
  consultationApi,
  type Session,
  type Message,
} from "../../api/health/consultations";
import { StatusTag } from "./components/StatusTag";
import { ImagePreview } from "./components/ImagePreview";
import { useThemeMode } from "../../hooks/useThemeMode";
import { AuthButton } from "../../components/AuthButton";
import { EntityName } from "../../components/EntityName";

const PAGE_SIZE = 30;

function formatTime(value: string): string {
  return new Date(value).toLocaleString("zh-CN", {
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  });
}

/** Parse image URLs from message content (JSON array or single URL string). */
function parseImageUrls(content: string): string[] {
  try {
    const parsed = JSON.parse(content);
    if (Array.isArray(parsed)) return parsed.map(String);
    return [String(parsed)];
  } catch {
    return [content];
  }
}

const ROLE_ALIGN: Record<string, "flex-start" | "flex-end" | "center"> = {
  patient: "flex-start",
  doctor: "flex-end",
  system: "center",
};

export default function ConsultationDetail() {
  const { id } = useParams<{ id: string }>();
  const sessionId = id ?? "";

  // Session info
  const [session, setSession] = useState<Session | null>(null);
  const [sessionLoading, setSessionLoading] = useState(true);

  // Messages
  const [messages, setMessages] = useState<Message[]>([]);
  const [msgPage, setMsgPage] = useState(1);
  const [msgLoading, setMsgLoading] = useState(false);
  const [sending, setSending] = useState(false);
  const [inputText, setInputText] = useState("");
  const [hasMore, setHasMore] = useState(false);

  // Follow-up modal state
  const [followUpModalOpen, setFollowUpModalOpen] = useState(false);
  const [followUpLoading, setFollowUpLoading] = useState(false);
  const [followUpForm] = Form.useForm();

  // AI analysis state
  const [aiAnalysisLoading, setAiAnalysisLoading] = useState(false);

  const chatEndRef = useRef<HTMLDivElement>(null);
  const shouldScrollRef = useRef(true);


  const isDark = useThemeMode();
  const navigate = useNavigate();

  // --- Fetch session info ---
  const fetchSession = useCallback(async () => {
    if (!sessionId) return;
    setSessionLoading(true);
    try {
      const result = await consultationApi.getSession(sessionId);
      setSession(result);
    } catch {
      message.error("加载会话信息失败");
    }
    setSessionLoading(false);
  }, [sessionId]);

  // --- Fetch messages ---
  const fetchMessages = useCallback(
    async (page: number, append: boolean) => {
      if (!sessionId) return;
      setMsgLoading(true);
      try {
        const result = await consultationApi.listMessages(sessionId, {
          page,
          page_size: PAGE_SIZE,
        });
        const newMsgs = result.data;
        const totalPages = Math.ceil(result.total / PAGE_SIZE);

        if (append) {
          setMessages((prev) => [...newMsgs, ...prev]);
        } else {
          setMessages(newMsgs);
        }
        setHasMore(page < totalPages);
      } catch {
        message.error("加载消息失败");
      }
      setMsgLoading(false);
    },
    [sessionId],
  );

  // Initial load
  useEffect(() => {
    fetchSession();
    fetchMessages(1, false);
  }, [fetchSession, fetchMessages]);

  // Long-poll new messages while session is active
  useEffect(() => {
    if (!session || session.status === "closed") return;

    let cancelled = false;

    const longPoll = async () => {
      while (!cancelled) {
        try {
          const realMsgs = messages.filter((m) => !m.id.startsWith("temp_"));
          const lastId =
            realMsgs.length > 0 ? realMsgs[realMsgs.length - 1].id : undefined;
          const newMsgs = await consultationApi.pollMessages(sessionId, lastId);
          if (!cancelled && newMsgs.length > 0) {
            setMessages((prev) => [...prev, ...newMsgs]);
            shouldScrollRef.current = true;
          }
        } catch {
          // timeout or network error, retry
        }
      }
    };

    longPoll();

    return () => { cancelled = true; };
  }, [session?.status, sessionId, messages.length]);

  // Auto-scroll to bottom on new messages
  useEffect(() => {
    if (shouldScrollRef.current && chatEndRef.current) {
      chatEndRef.current.scrollIntoView({ behavior: "smooth" });
    }
  }, [messages.length]);

  // --- Send message ---
  const handleSend = async () => {
    const text = inputText.trim();
    if (!text || !sessionId) return;

    setSending(true);
    try {
      // Optimistically append to UI
      const optimisticMsg: Message = {
        id: `temp_${Date.now()}`,
        session_id: sessionId,
        sender_id: "",
        sender_role: "doctor",
        content_type: "text",
        content: text,
        is_read: false,
        created_at: new Date().toISOString(),
      };
      setMessages((prev) => [...prev, optimisticMsg]);
      setInputText("");
      shouldScrollRef.current = true;

      await consultationApi.createMessage({
        session_id: sessionId,
        content_type: "text",
        content: text,
      });

      // Refresh to replace optimistic message with server version
      await fetchMessages(msgPage, false);
    } catch {
      message.error("发送失败");
    } finally {
      setSending(false);
    }
  };

  // --- Load more (older messages) ---
  const handleLoadMore = () => {
    const nextPage = msgPage + 1;
    setMsgPage(nextPage);
    shouldScrollRef.current = false;
    fetchMessages(nextPage, true);
  };

  // --- Close session ---
  const handleClose = async () => {
    if (!session) return;
    try {
      const updated = await consultationApi.closeSession(session.id, {
        version: session.version,
      });
      setSession(updated);
      message.success("会话已关闭");
    } catch {
      message.error("关闭会话失败");
    }
  };

  // --- Create follow-up from consultation ---
  const handleCreateFollowUp = async () => {
    if (!sessionId) return;
    try {
      const values = await followUpForm.validateFields();
      setFollowUpLoading(true);
      await consultationApi.createFollowUpFromSession(sessionId, {
        follow_up_type: values.follow_up_type,
        planned_date: values.planned_date.format("YYYY-MM-DD"),
        content_template: values.content_template || undefined,
      });
      message.success("随访任务已创建");
      setFollowUpModalOpen(false);
      followUpForm.resetFields();
    } catch (err: unknown) {
      if (err && typeof err === "object" && "errorFields" in err) {
        // Form validation error, ignore
        return;
      }
      message.error("创建随访任务失败");
    } finally {
      setFollowUpLoading(false);
    }
  };

  // --- Trigger AI analysis ---
  const handleTriggerAiAnalysis = async () => {
    if (!sessionId) return;
    setAiAnalysisLoading(true);
    try {
      const result = await consultationApi.triggerAiAnalysisFromSession(sessionId);
      message.success(`AI 分析已触发（类型: ${result.analysis_type}）`);
      navigate("/health/ai-analysis");
    } catch {
      message.error("触发 AI 分析失败");
    } finally {
      setAiAnalysisLoading(false);
    }
  };

  // --- Render a single message bubble ---
  const renderMessage = (msg: Message) => {
    const align = ROLE_ALIGN[msg.sender_role] ?? "flex-start";

    // System messages: centered plain text
    if (msg.sender_role === "system") {
      return (
        <div key={msg.id} style={{ textAlign: "center", padding: "8px 0" }}>
          <Typography.Text type="secondary" style={{ fontSize: 12 }}>
            {msg.content}
          </Typography.Text>
        </div>
      );
    }

    const isImage = msg.content_type === "image";

    return (
      <div
        key={msg.id}
        style={{
          display: "flex",
          justifyContent: align,
          marginBottom: 12,
        }}
      >
        <div style={{ maxWidth: "70%" }}>
          {isImage ? (
            <ImagePreview urls={parseImageUrls(msg.content)} width={200} />
          ) : (
            <div
              style={{
                background:
                  msg.sender_role === "doctor" ? "#1890ff" : "#f0f0f0",
                color: msg.sender_role === "doctor" ? "#fff" : "#000",
                padding: "8px 12px",
                borderRadius: 8,
                wordBreak: "break-word",
              }}
            >
              <Typography.Paragraph style={{ margin: 0, color: "inherit" }}>
                {msg.content}
              </Typography.Paragraph>
            </div>
          )}
          <Typography.Text type="secondary" style={{ fontSize: 11 }}>
            {formatTime(msg.created_at)}
          </Typography.Text>
        </div>
      </div>
    );
  };

  // --- Full render ---
  if (sessionLoading && messages.length === 0) {
    return (
      <div style={{ display: "flex", justifyContent: "center", padding: 100 }}>
        <Spin size="large" />
      </div>
    );
  }

  const isClosed = session?.status === "closed";

  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        height: "calc(100vh - 120px)",
        background: isDark ? "#111827" : "#FFFFFF",
        borderRadius: 12,
        border: `1px solid ${isDark ? "#0f172a" : "#f8fafc"}`,
        overflow: "hidden",
      }}
    >
      {/* Top bar */}
      <div
        style={{
          display: "flex",
          alignItems: "center",
          gap: 12,
          padding: "12px 20px",
          borderBottom: `1px solid ${isDark ? "#1e293b" : "#f1f5f9"}`,
          flexShrink: 0,
        }}
      >
        <Typography.Text strong style={{ fontSize: 15 }}>
          咨询会话
        </Typography.Text>
        {session && (
          <>
            <Typography.Text type="secondary" style={{ fontSize: 13 }}>
              患者:{" "}
              <EntityName name={session.patient_name} id={session.patient_id} />
            </Typography.Text>
            <Typography.Text type="secondary" style={{ fontSize: 13 }}>
              医护:{" "}
              <EntityName
                name={session.doctor_name}
                id={session.doctor_id}
                fallbackLabel="未分配"
              />
            </Typography.Text>
            <StatusTag status={session.status} />
          </>
        )}
        {!session && (
          <Typography.Text type="secondary" style={{ fontSize: 13 }}>
            ID: {sessionId.slice(0, 8)}
          </Typography.Text>
        )}
        {session && !isClosed && (
          <AuthButton code="health.consultation.manage">
            <Button
              size="small"
              icon={<ScheduleOutlined />}
              onClick={() => setFollowUpModalOpen(true)}
            >
              创建随访
            </Button>
          </AuthButton>
        )}
        {session && !isClosed && (
          <AuthButton code="health.consultation.manage">
            <Button
              size="small"
              type="default"
              icon={<RobotOutlined />}
              loading={aiAnalysisLoading}
              onClick={handleTriggerAiAnalysis}
            >
              AI 分析
            </Button>
          </AuthButton>
        )}
        {session && !isClosed && (
          <AuthButton code="health.consultation.manage">
            <Popconfirm
              title="确认关闭该咨询会话？"
              onConfirm={handleClose}
              okText="确认"
              cancelText="取消"
            >
              <Button
                size="small"
                danger
                icon={<CloseCircleOutlined />}
                style={{ marginLeft: "auto" }}
              >
                关闭会话
              </Button>
            </Popconfirm>
          </AuthButton>
        )}
      </div>

      {/* Chat area */}
      <div
        style={{
          flex: 1,
          overflow: "auto",
          padding: "16px 20px",
          background: isDark ? "#0f172a" : "#f8fafc",
        }}
      >
        {hasMore && (
          <div style={{ textAlign: "center", marginBottom: 16 }}>
            <Button
              size="small"
              icon={<ArrowUpOutlined />}
              loading={msgLoading}
              onClick={handleLoadMore}
            >
              加载更多
            </Button>
          </div>
        )}

        {msgLoading && messages.length === 0 && (
          <div style={{ textAlign: "center", padding: 40 }}>
            <Spin />
          </div>
        )}

        {messages.map(renderMessage)}

        <div ref={chatEndRef} />
      </div>

      {/* Input area */}
      <div
        style={{
          display: "flex",
          alignItems: "flex-end",
          gap: 8,
          padding: "12px 20px",
          borderTop: `1px solid ${isDark ? "#1e293b" : "#f1f5f9"}`,
          flexShrink: 0,
          background: isDark ? "#111827" : "#FFFFFF",
        }}
      >
        <AuthButton code="health.consultation.manage">
          <Input.TextArea
            value={inputText}
            onChange={(e) => setInputText(e.target.value)}
            placeholder={isClosed ? "会话已关闭" : "输入消息..."}
            autoSize={{ minRows: 1, maxRows: 4 }}
            style={{ flex: 1, borderRadius: 8 }}
            onPressEnter={(e) => {
              if (!e.shiftKey) {
                e.preventDefault();
                handleSend();
              }
            }}
            disabled={isClosed}
          />
          <Button
            type="primary"
            icon={<SendOutlined />}
            onClick={handleSend}
            loading={sending}
            disabled={!inputText.trim() || isClosed}
          >
            发送
          </Button>
        </AuthButton>
      </div>

      {/* Follow-up creation modal */}
      <Modal
        title="创建随访任务"
        open={followUpModalOpen}
        onOk={handleCreateFollowUp}
        onCancel={() => {
          setFollowUpModalOpen(false);
          followUpForm.resetFields();
        }}
        confirmLoading={followUpLoading}
        okText="创建"
        cancelText="取消"
        destroyOnClose
      >
        <Form
          form={followUpForm}
          layout="vertical"
          initialValues={{ follow_up_type: "phone" }}
        >
          <Form.Item
            name="follow_up_type"
            label="随访类型"
            rules={[{ required: true, message: "请选择随访类型" }]}
          >
            <Select
              options={[
                { label: "电话随访", value: "phone" },
                { label: "在线随访", value: "online" },
                { label: "上门随访", value: "home_visit" },
              ]}
              placeholder="请选择随访类型"
            />
          </Form.Item>
          <Form.Item
            name="planned_date"
            label="计划日期"
            rules={[{ required: true, message: "请选择计划日期" }]}
          >
            <DatePicker
              style={{ width: "100%" }}
              disabledDate={(current) => current && current < dayjs().startOf("day")}
              placeholder="选择随访日期"
            />
          </Form.Item>
          <Form.Item name="content_template" label="随访内容（可选）">
            <Input.TextArea rows={3} placeholder="输入随访内容模板" />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
