import { useState, useEffect } from 'react';
import { Plus, Wind, Sparkles, Pencil, Trash2 } from 'lucide-react';
import { GlassCard, GlassButton, GlassInput, GlassTextarea } from '../components/ui';
import Modal from '../components/Modal';
import useStore from '../store/useStore';
import { analyzeLifeEvent } from '../services/ai';
import useTypewriterStream from '../hooks/useTypewriterStream';

/**
 * 格式化 AI 反馈内容的组件
 */
const FeedbackContent = ({ content }) => {
  if (!content) return null;

  // 检查是否为结构化格式 (包含分隔符 --- 和标题标识 ####)
  const isStructured = content.includes('---') && content.includes('####');

  if (!isStructured) {
    return (
      <p className="text-xs italic text-white/50 leading-loose whitespace-pre-wrap">
        {content}
      </p>
    );
  }

  // 解析结构化内容
  const sections = content.split('---')
    .map(s => s.trim())
    .filter(s => s && s.length > 0);

  return (
    <div className="space-y-5 mt-2">
      {sections.map((section, index) => {
        // 移除 #### 前缀
        const cleanSection = section.replace(/^####\s*/, '');
        
        // 提取标题 (通常在 【】 中)
        const titleMatch = cleanSection.match(/【(.*?)】/);
        const title = titleMatch ? titleMatch[1] : '';
        
        // 提取正文
        let body = cleanSection;
        if (titleMatch) {
          body = cleanSection.replace(titleMatch[0], '').trim();
        }

        if (!title && !body) return null;

        return (
          <div key={index} className="text-xs leading-relaxed">
            {title && (
               <h5 className="text-orange-100 font-bold mb-2 flex items-center gap-2 text-[11px] tracking-wide">
                 {title}
               </h5>
            )}
            <div className="text-white/60 pl-3 border-l-2 border-orange-200/10 space-y-1">
              {body.split('\n').map((line, i) => {
                const trimmedLine = line.trim();
                if (!trimmedLine) return null;
                // 简单的列表项处理
                if (trimmedLine.startsWith('*') || trimmedLine.startsWith('-')) {
                   return (
                     <div key={i} className="flex gap-2 pl-1">
                       <span className="text-orange-200/40">•</span>
                       <span>{trimmedLine.substring(1).trim()}</span>
                     </div>
                   );
                }
                return <p key={i}>{trimmedLine}</p>;
              })}
            </div>
          </div>
        );
      })}
    </div>
  );
};

/**
 * TimelineView 组件
 * 人生轨迹视图，显示和管理生命事件
 */
const TimelineView = () => {
  const { lifeEvents, addLifeEvent, updateLifeEvent, deleteLifeEvent, loadLifeEvents } = useStore();

  // 加载生命事件
  useEffect(() => {
    loadLifeEvents().catch(() => {
      // 后端不可用时忽略错误
    });
  }, [loadLifeEvents]);

  // 模态框状态
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const [streamFeedback, setStreamFeedback] = useState('');
  const feedbackWriter = useTypewriterStream({ interval: 30, step: 1 });

  // 编辑模式状态：null 表示新增模式，有值表示编辑模式（存储事件 ID）
  const [editingEventId, setEditingEventId] = useState(null);

  // 删除确认状态
  const [deleteConfirmId, setDeleteConfirmId] = useState(null);

  // 表单状态
  const [eventForm, setEventForm] = useState({
    title: '',
    time: '',
    content: ''
  });

  /**
   * 打开新增模态框
   */
  const openAddModal = () => {
    setEditingEventId(null);
    setEventForm({ title: '', time: '', content: '' });
    setStreamFeedback('');
    feedbackWriter.reset();
    setIsModalOpen(true);
  };

  /**
   * 打开编辑模态框
   * @param {Object} event - 要编辑的事件
   */
  const openEditModal = (event) => {
    setEditingEventId(event.id);
    setEventForm({
      title: event.title || '',
      time: event.time || '',
      content: event.content || ''
    });
    setStreamFeedback(event.aiFeedback || '');
    feedbackWriter.reset();
    setIsModalOpen(true);
  };

  /**
   * 关闭模态框
   */
  const closeModal = () => {
    setIsModalOpen(false);
    setEditingEventId(null);
    setEventForm({ title: '', time: '', content: '' });
    setStreamFeedback('');
    feedbackWriter.reset();
  };

  /**
   * 处理表单提交（新增或编辑）
   */
  const handleSubmit = async () => {
    if (!eventForm.title || !eventForm.time || !eventForm.content) {
      alert('请完整填写记录。');
      return;
    }

    setIsLoading(true);
    feedbackWriter.reset();

    try {
      setStreamFeedback('');
      const aiFeedback = await analyzeLifeEvent(eventForm, {
        onDelta: (_delta, output) => {
          setStreamFeedback(output);
          feedbackWriter.push(output);
        }
      });
      feedbackWriter.finish(aiFeedback);
      await feedbackWriter.waitForDone();

      if (editingEventId) {
        // 编辑模式：调用更新接口
        await updateLifeEvent({
          id: editingEventId,
          ...eventForm,
          aiFeedback
        });
      } else {
        // 新增模式：调用添加接口
        await addLifeEvent({
          ...eventForm,
          aiFeedback
        });
      }

      // 重置表单并关闭模态框
      closeModal();
    } catch (error) {
      feedbackWriter.fail('AI 疗愈反馈生成失败，请稍后重试');
      console.error('Failed to save event:', error);
    } finally {
      setIsLoading(false);
    }
  };

  /**
   * 处理删除确认
   * @param {string} id - 事件ID
   */
  const handleDeleteConfirm = async (id) => {
    try {
      await deleteLifeEvent(id);
      setDeleteConfirmId(null);
    } catch (error) {
      console.error('Failed to delete event:', error);
      alert('删除失败，请稍后重试');
      setDeleteConfirmId(null);
    }
  };

  /**
   * 按事件时间倒序排列（最新的在最上面）
   * 空日期的事件排在最后
   */
  const sortedEvents = [...lifeEvents].sort((a, b) => {
    // 如果两个都没有时间，保持原顺序
    if (!a.time && !b.time) return 0;
    // 没有时间的排在后面
    if (!a.time) return 1;
    if (!b.time) return -1;
    // 按时间倒序（最新的在前）
    return new Date(b.time) - new Date(a.time);
  });

  return (
    <div>
      {/* 标题区域 */}
      <div className="flex justify-between items-end mb-12">
        <div>
          <h3 className="text-4xl font-serif text-white/90">人生轨迹</h3>
          <p className="text-sm text-white/30 mt-2">塑造你的每一刻，都被星辰见证。</p>
        </div>
        <GlassButton
          onClick={openAddModal}
          className="px-6 py-3 rounded-full text-sm font-bold flex items-center gap-2 bg-orange-200/5 text-orange-200 border-orange-200/20 shadow-lg"
        >
          <Plus className="w-4 h-4" /> 记录足迹
        </GlassButton>
      </div>

      {/* 时间线容器 */}
      <div className="relative pl-8">
        {sortedEvents.length > 0 && <div className="timeline-line" />}

        <div className="space-y-10">
          {sortedEvents.length > 0 ? (
            sortedEvents.map((event) => (
              <div key={event.id} className="relative group">
                {/* 时间线点 */}
                <div className="timeline-dot absolute left-[-39px] top-6 z-10" />

                {/* 事件卡片 */}
                <GlassCard className="border-white/5 hover:border-orange-200/20 transition-all duration-700 relative">
                  {/* 操作按钮 */}
                  <div className="absolute top-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                    <button
                      onClick={() => openEditModal(event)}
                      className="p-2 rounded-full bg-white/5 hover:bg-orange-200/10 text-white/30 hover:text-orange-200 transition-all"
                      title="修改足迹"
                    >
                      <Pencil className="w-4 h-4" />
                    </button>
                    <button
                      onClick={() => setDeleteConfirmId(event.id)}
                      className="p-2 rounded-full bg-white/5 hover:bg-red-400/10 text-white/30 hover:text-red-400 transition-all"
                      title="删除足迹"
                    >
                      <Trash2 className="w-4 h-4" />
                    </button>
                  </div>

                  <div className="flex justify-between items-start mb-4 pr-20">
                    <div className="flex items-center gap-3">
                      <h4 className="text-xl font-medium text-white/80">{event.title}</h4>
                      {event.tags && event.tags.length > 0 && (
                        <span className="text-[9px] px-2 py-1 rounded-full bg-orange-200/10 text-orange-200/60 uppercase tracking-wider">
                          {event.tags[0] === 'childhood' ? '童年' : event.tags[0] === 'joy' ? '高光' : event.tags[0] === 'low' ? '低谷' : event.tags[0]}
                        </span>
                      )}
                    </div>
                    <span className="text-[10px] font-mono tracking-widest text-white/30 uppercase">
                      {event.time}
                    </span>
                  </div>
                  <p className="text-sm text-white/60 leading-relaxed mb-6">
                    {event.content}
                  </p>

                  {/* AI 反馈区域 - 仅在有反馈时显示 */}
                  {event.aiFeedback && (
                    <div className="ai-glow-card p-5 rounded-2xl bg-orange-200/[0.02] border border-orange-200/5">
                      <div className="flex items-center gap-2 mb-4">
                        <Sparkles className="w-3 h-3 text-orange-200" />
                        <span className="text-[9px] uppercase tracking-[0.2em] text-orange-200/60 font-bold">
                          引路人洞察
                        </span>
                      </div>
                      <FeedbackContent content={event.aiFeedback} />
                    </div>
                  )}
                </GlassCard>
              </div>
            ))
          ) : (
            /* 空状态 */
            <div className="flex flex-col items-center justify-center py-32 text-center opacity-30">
              <Wind className="w-12 h-12 mb-4" />
              <p className="font-serif italic text-lg">执笔写下，哪些经历让你成为了现在的自己</p>
            </div>
          )}
        </div>
      </div>

      {/* 添加/编辑事件模态框 */}
      <Modal isOpen={isModalOpen} onClose={closeModal} title={editingEventId ? '修改足迹' : '记录足迹'}>
        <div className="space-y-6">
          <GlassInput
            label="事件标题"
            placeholder="给这段经历起个名字"
            value={eventForm.title}
            onChange={(v) => setEventForm(prev => ({ ...prev, title: v }))}
          />
          <GlassInput
            label="发生时间"
            type="date"
            value={eventForm.time}
            onChange={(v) => setEventForm(prev => ({ ...prev, time: v }))}
          />
          <GlassTextarea
            label="经历详情"
            placeholder="当时发生了什么？你的感受如何？"
            value={eventForm.content}
            onChange={(v) => setEventForm(prev => ({ ...prev, content: v }))}
            rows={5}
          />
          {(streamFeedback || isLoading) && (
            <div className="ai-glow-card p-4 rounded-2xl bg-orange-200/[0.02] border border-orange-200/5">
              <div className="flex items-center gap-2 mb-3">
                <Sparkles className="w-3 h-3 text-orange-200" />
                <span className="text-[9px] tracking-[0.2em] text-orange-200/60 font-bold">
                  {feedbackWriter.isWaiting ? '正在理解这段经历' : feedbackWriter.isDraining ? '正在收束反馈' : '实时疗愈反馈'}
                </span>
              </div>
              {feedbackWriter.visibleText
                ? <FeedbackContent content={feedbackWriter.visibleText} />
                : <p className="text-xs italic text-white/40 leading-loose">AI 正在梳理你的生命轨迹，请稍候...</p>}
            </div>
          )}
          <GlassButton
            variant="primary"
            onClick={handleSubmit}
            loading={isLoading}
            className="w-full"
          >
            {isLoading ? '正在共鸣生命轨迹...' : '开启 AI 疗愈'}
          </GlassButton>
        </div>
      </Modal>

      {/* 删除确认模态框 */}
      <Modal isOpen={!!deleteConfirmId} onClose={() => setDeleteConfirmId(null)} title="确认删除" maxWidth="sm">
        <div className="space-y-6">
          <p className="text-white/70 text-sm">
            确定要删除这段人生足迹吗？此操作不可恢复，相关的 AI 洞察也将被删除。
          </p>
          <div className="flex gap-4">
            <GlassButton
              onClick={() => setDeleteConfirmId(null)}
              className="flex-1"
            >
              取消
            </GlassButton>
            <GlassButton
              variant="primary"
              onClick={() => handleDeleteConfirm(deleteConfirmId)}
              className="flex-1 bg-red-500/10 text-red-400 border-red-400/20 hover:bg-red-500/20"
            >
              确认删除
            </GlassButton>
          </div>
        </div>
      </Modal>
    </div>
  );
};

export default TimelineView;