import { useState, useEffect } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';

const STATUS_LABELS = { open: '待处理', in_progress: '处理中', closed: '已关闭' };
const STATUS_COLORS = {
  open: { color: '#f59e0b', bg: '#fffbeb' },
  in_progress: { color: '#3b82f6', bg: '#eff6ff' },
  closed: { color: '#10b981', bg: '#ecfdf5' }
};
const TYPE_LABELS = { bug: '🐛 Bug 报告', feature: '💡 功能建议', other: '📌 其他' };

export default function IssueDetail() {
  const { id } = useParams();
  const { user } = useAuth();
  const navigate = useNavigate();

  const [issue, setIssue] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  // 回复表单
  const [replyContent, setReplyContent] = useState('');
  const [replying, setReplying] = useState(false);
  const [replyMsg, setReplyMsg] = useState('');

  useEffect(() => {
    if (!user) {
      navigate('/login');
      return;
    }
    fetchIssue();
  }, [user, id, navigate]);

  const fetchIssue = async () => {
    try {
      const token = localStorage.getItem('token');
      const res = await fetch(`/api/issues/${id}`, {
        headers: { Authorization: `Bearer ${token}` }
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.detail || '获取失败');
      setIssue(data.issue);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const handleReply = async (e) => {
    e.preventDefault();
    if (!replyContent.trim()) return;

    setReplying(true);
    setReplyMsg('');
    try {
      const token = localStorage.getItem('token');
      const res = await fetch(`/api/issues/${id}/reply`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: `Bearer ${token}`
        },
        body: JSON.stringify({ content: replyContent.trim() })
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.detail || '回复失败');

      setReplyContent('');
      setReplyMsg('回复成功');
      fetchIssue();
    } catch (err) {
      setReplyMsg(err.message);
    } finally {
      setReplying(false);
    }
  };

  if (!user) return null;

  if (loading) {
    return <div style={styles.center}>加载中...</div>;
  }

  if (error) {
    return (
      <div style={styles.container}>
        <div style={styles.errorBox}>{error}</div>
        <Link to="/issues" style={styles.backLink}>← 返回反馈列表</Link>
      </div>
    );
  }

  if (!issue) return null;

  return (
    <div style={styles.container}>
      <Link to="/issues" style={styles.backLink}>← 返回反馈列表</Link>

      {/* Issue 主体 */}
      <div style={styles.card}>
        <div style={styles.headerRow}>
          <h2 style={styles.title}>{issue.title}</h2>
          <span style={{
            ...styles.statusBadge,
            color: STATUS_COLORS[issue.status]?.color,
            backgroundColor: STATUS_COLORS[issue.status]?.bg
          }}>
            {STATUS_LABELS[issue.status] || issue.status}
          </span>
        </div>

        <div style={styles.metaRow}>
          <span style={styles.typeBadge}>{TYPE_LABELS[issue.type] || issue.type}</span>
          <span style={styles.metaText}>提交者: {issue.username}</span>
          <span style={styles.metaText}>
            {new Date(issue.created_at).toLocaleString('zh-CN')}
          </span>
        </div>

        <div style={styles.divider} />

        <div style={styles.descBlock}>
          <h3 style={styles.sectionTitle}>问题描述</h3>
          <p style={styles.descText}>{issue.description}</p>
        </div>

        {/* 附带的 Markdown 用例 */}
        {issue.markdown_sample && (
          <div style={styles.sampleBlock}>
            <h3 style={styles.sectionTitle}>📎 附带的 Markdown 用例</h3>
            <pre style={styles.codeBlock}>{issue.markdown_sample}</pre>
          </div>
        )}
      </div>

      {/* 回复列表 */}
      <div style={styles.card}>
        <h3 style={styles.sectionTitle}>
          💬 回复 ({issue.replies?.length || 0})
        </h3>

        {(!issue.replies || issue.replies.length === 0) ? (
          <p style={styles.emptyText}>暂无回复</p>
        ) : (
          <div style={styles.replyList}>
            {issue.replies.map(reply => (
              <div
                key={reply.id}
                style={{
                  ...styles.replyItem,
                  ...(reply.author === 'admin' ? styles.adminReply : {})
                }}
              >
                <div style={styles.replyHeader}>
                  <span style={{
                    ...styles.replyAuthor,
                    ...(reply.author === 'admin' ? { color: '#ef4444' } : {})
                  }}>
                    {reply.author === 'admin' ? '🔧 管理员' : reply.author}
                  </span>
                  <span style={styles.replyDate}>
                    {new Date(reply.created_at).toLocaleString('zh-CN')}
                  </span>
                </div>
                <p style={styles.replyContent}>{reply.content}</p>
              </div>
            ))}
          </div>
        )}

        {/* 回复表单 */}
        {issue.status !== 'closed' && (
          <>
            <div style={styles.divider} />
            <form onSubmit={handleReply}>
              <textarea
                value={replyContent}
                onChange={(e) => setReplyContent(e.target.value)}
                style={styles.replyTextarea}
                placeholder="输入你的回复..."
                rows={3}
              />
              {replyMsg && (
                <p style={{ fontSize: '13px', color: replyMsg === '回复成功' ? '#10b981' : '#ef4444', marginBottom: '8px' }}>
                  {replyMsg}
                </p>
              )}
              <button type="submit" style={styles.replyBtn} disabled={replying || !replyContent.trim()}>
                {replying ? '发送中...' : '发送回复'}
              </button>
            </form>
          </>
        )}

        {issue.status === 'closed' && (
          <div style={styles.closedHint}>
            🔒 该 Issue 已关闭，无法继续回复。
          </div>
        )}
      </div>
    </div>
  );
}

const styles = {
  container: {
    maxWidth: '700px',
    margin: '0 auto',
    padding: '30px 20px'
  },
  center: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '60vh',
    fontSize: '16px',
    color: '#9ca3af'
  },
  backLink: {
    display: 'inline-block',
    marginBottom: '16px',
    fontSize: '14px',
    color: '#3b82f6',
    textDecoration: 'none',
    fontWeight: '500'
  },
  card: {
    backgroundColor: 'white',
    borderRadius: '8px',
    padding: '24px',
    boxShadow: '0 2px 8px rgba(0,0,0,0.06)',
    marginBottom: '16px'
  },
  headerRow: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    gap: '12px',
    marginBottom: '12px'
  },
  title: {
    fontSize: '20px',
    fontWeight: 'bold',
    color: '#111827',
    margin: 0,
    flex: 1
  },
  statusBadge: {
    fontSize: '12px',
    fontWeight: '600',
    padding: '4px 12px',
    borderRadius: '20px',
    whiteSpace: 'nowrap'
  },
  metaRow: {
    display: 'flex',
    gap: '12px',
    alignItems: 'center',
    flexWrap: 'wrap'
  },
  typeBadge: {
    fontSize: '12px',
    color: '#6b7280',
    backgroundColor: '#f3f4f6',
    padding: '3px 10px',
    borderRadius: '4px'
  },
  metaText: {
    fontSize: '13px',
    color: '#9ca3af'
  },
  divider: {
    border: 'none',
    borderTop: '1px solid #e5e7eb',
    margin: '20px 0'
  },
  sectionTitle: {
    fontSize: '15px',
    fontWeight: '600',
    color: '#374151',
    marginBottom: '12px'
  },
  descBlock: {
    marginTop: '20px'
  },
  descText: {
    fontSize: '14px',
    color: '#4b5563',
    lineHeight: '1.7',
    whiteSpace: 'pre-wrap'
  },
  sampleBlock: {
    marginTop: '20px'
  },
  codeBlock: {
    backgroundColor: '#1f2937',
    color: '#e5e7eb',
    padding: '16px',
    borderRadius: '6px',
    fontSize: '13px',
    lineHeight: '1.5',
    overflow: 'auto',
    maxHeight: '400px',
    whiteSpace: 'pre-wrap',
    wordBreak: 'break-word'
  },
  emptyText: {
    color: '#9ca3af',
    fontSize: '14px',
    textAlign: 'center',
    padding: '20px 0'
  },
  replyList: {
    display: 'flex',
    flexDirection: 'column',
    gap: '12px'
  },
  replyItem: {
    padding: '14px',
    backgroundColor: '#f9fafb',
    borderRadius: '8px',
    border: '1px solid #e5e7eb'
  },
  adminReply: {
    backgroundColor: '#fef2f2',
    borderColor: '#fecaca'
  },
  replyHeader: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '8px'
  },
  replyAuthor: {
    fontSize: '13px',
    fontWeight: '600',
    color: '#374151'
  },
  replyDate: {
    fontSize: '12px',
    color: '#9ca3af'
  },
  replyContent: {
    fontSize: '14px',
    color: '#4b5563',
    lineHeight: '1.6',
    margin: 0,
    whiteSpace: 'pre-wrap'
  },
  replyTextarea: {
    width: '100%',
    padding: '10px 12px',
    border: '1px solid #d1d5db',
    borderRadius: '6px',
    fontSize: '14px',
    boxSizing: 'border-box',
    resize: 'vertical',
    fontFamily: 'inherit',
    lineHeight: '1.5',
    marginBottom: '10px'
  },
  replyBtn: {
    padding: '10px 24px',
    backgroundColor: '#3b82f6',
    color: 'white',
    border: 'none',
    borderRadius: '6px',
    fontSize: '14px',
    cursor: 'pointer',
    fontWeight: '500'
  },
  closedHint: {
    marginTop: '16px',
    padding: '12px',
    backgroundColor: '#f3f4f6',
    borderRadius: '6px',
    fontSize: '13px',
    color: '#6b7280',
    textAlign: 'center'
  },
  errorBox: {
    color: '#ef4444',
    backgroundColor: '#fef2f2',
    padding: '12px 16px',
    borderRadius: '6px',
    marginBottom: '16px',
    fontSize: '14px',
    border: '1px solid #fecaca'
  }
};