import { useMemo } from 'react';
import DOMPurify from 'dompurify';

interface ArticlePhonePreviewProps {
  title: string;
  content: string;
  category?: string;
  summary?: string;
  coverImage?: string;
  isDark: boolean;
}

/**
 * 文章内容在小程序端的实时渲染预览
 *
 * 375px 宽度匹配 iPhone CSS 逻辑像素，CSS 与小程序 article/detail 完全一致。
 * 去掉手机外壳装饰，聚焦内容排版效果验证。
 */
export default function ArticlePhonePreview({
  title,
  content,
  category,
  summary,
  coverImage,
  isDark,
}: ArticlePhonePreviewProps) {
  const mpColors = useMemo(
    () => ({
      bg: '#F5F0EB',
      primary: '#C4623A',
      primaryLight: '#F0DDD4',
      text: '#2D2A26',
      textSecondary: '#5A554F',
      card: '#FFFFFF',
    }),
    [],
  );

  const today = useMemo(() => new Date().toLocaleDateString('zh-CN'), []);

  return (
    <div
      style={{
        width: 375,
        flexShrink: 0,
        background: isDark ? '#0f172a' : '#e8e8ed',
        borderLeft: `1px solid ${isDark ? '#1e293b' : '#d2d2d7'}`,
        display: 'flex',
        flexDirection: 'column',
        overflow: 'hidden',
      }}
    >
      {/* 顶部标签 */}
      <div
        style={{
          padding: '8px 16px',
          fontSize: 11,
          color: isDark ? '#64748b' : '#86868b',
          fontWeight: 500,
          letterSpacing: 0.3,
          borderBottom: `1px solid ${isDark ? '#1e293b' : '#e5e7eb'}`,
          display: 'flex',
          alignItems: 'center',
          gap: 6,
          background: isDark ? '#0f172a' : '#f3f4f6',
          flexShrink: 0,
        }}
      >
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <rect x="5" y="2" width="14" height="20" rx="2" />
          <line x1="12" y1="18" x2="12" y2="18.01" />
        </svg>
        小程序端效果预览 · 375px
      </div>

      {/* 内容区域 — 自然流动高度，内部可滚动 */}
      <div
        style={{
          flex: 1,
          overflowY: 'auto',
          overflowX: 'hidden',
          background: mpColors.bg,
        }}
      >
        <style>{`
          .mp-preview {
            background: ${mpColors.bg};
            padding-bottom: 40px;
            min-height: 100%;
          }
          .mp-preview .mp-header {
            background: ${mpColors.card};
            padding: 20px 16px;
            margin-bottom: 8px;
          }
          .mp-preview .mp-title {
            font-size: 20px;
            font-weight: 700;
            color: ${mpColors.text};
            line-height: 1.45;
            margin-bottom: 10px;
            display: block;
          }
          .mp-preview .mp-meta {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
          }
          .mp-preview .mp-category {
            font-size: 12px;
            color: ${mpColors.primary};
            background: ${mpColors.primaryLight};
            padding: 3px 10px;
            border-radius: 10px;
          }
          .mp-preview .mp-author {
            font-size: 13px;
            color: ${mpColors.textSecondary};
          }
          .mp-preview .mp-date {
            font-size: 13px;
            color: #9ca3af;
          }
          .mp-preview .mp-cover {
            width: 100%;
            border-radius: 8px;
            margin: 0 0 10px;
            max-height: 180px;
            object-fit: cover;
          }
          .mp-preview .mp-summary {
            background: ${mpColors.card};
            padding: 14px 16px;
            margin-bottom: 8px;
          }
          .mp-preview .mp-summary-text {
            font-size: 14px;
            color: ${mpColors.textSecondary};
            line-height: 1.75;
            border-left: 3px solid ${mpColors.primary};
            padding-left: 12px;
          }
          .mp-preview .mp-content {
            background: ${mpColors.card};
            padding: 16px;
          }
          .mp-preview .mp-content p {
            font-size: 16px;
            color: ${mpColors.text};
            line-height: 1.85;
            margin-bottom: 12px;
          }
          .mp-preview .mp-content h1,
          .mp-preview .mp-content h2,
          .mp-preview .mp-content h3 {
            font-weight: 700;
            color: ${mpColors.text};
            margin: 16px 0 8px;
          }
          .mp-preview .mp-content h1 { font-size: 20px; }
          .mp-preview .mp-content h2 { font-size: 18px; }
          .mp-preview .mp-content h3 { font-size: 16px; }
          .mp-preview .mp-content img {
            max-width: 100%;
            border-radius: 8px;
            margin: 8px 0;
          }
          .mp-preview .mp-content blockquote {
            border-left: 3px solid ${mpColors.primary};
            padding: 6px 12px;
            color: ${mpColors.textSecondary};
            margin: 12px 0;
          }
          .mp-preview .mp-content ul,
          .mp-preview .mp-content ol {
            padding-left: 20px;
            margin: 8px 0;
            font-size: 16px;
            line-height: 1.9;
            color: ${mpColors.text};
          }
          .mp-preview .mp-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 8px 0;
            font-size: 14px;
          }
          .mp-preview .mp-content td,
          .mp-preview .mp-content th {
            border: 1px solid #e5e7eb;
            padding: 6px 8px;
          }
          .mp-preview .mp-content hr {
            border: none;
            border-top: 1px dashed #d1d5db;
            margin: 14px 0;
          }
          .mp-preview .mp-empty {
            padding: 60px 16px;
            text-align: center;
            color: #9ca3af;
            font-size: 14px;
            line-height: 1.8;
          }
          .mp-preview .mp-content div[data-w-e-type="styled-block"] {
            max-width: 100%;
            box-sizing: border-box;
          }
        `}</style>

        <div className="mp-preview">
          <div className="mp-header">
            {coverImage && (
              <img
                className="mp-cover"
                src={coverImage}
                alt="封面"
                onError={(e) => {
                  (e.target as HTMLImageElement).style.display = 'none';
                }}
              />
            )}
            <span className="mp-title">
              {title || '文章标题'}
            </span>
            <div className="mp-meta">
              {category && (
                <span className="mp-category">{category}</span>
              )}
              <span className="mp-author">健康管理中心</span>
              <span className="mp-date">{today}</span>
            </div>
          </div>

          {summary && (
            <div className="mp-summary">
              <div className="mp-summary-text">{summary}</div>
            </div>
          )}

          <div className="mp-content">
            {content && content !== '<p><br></p>' ? (
              <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(content) }} />
            ) : (
              <div className="mp-empty">
                在左侧编辑器中输入内容
                <br />
                此处将实时显示预览效果
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
