'use client';
/**
 * ConfigPreviewPanel — 右侧配置预览面板
 * 显示产品名称/卖点/成分/质地/标签/参考图3张
 * [编辑配置]→侧滑面板原地编辑，改完实时刷新预览
 */
import { Product } from '@/types/index';

interface ConfigPreviewPanelProps {
  product: Product;
}

export function ConfigPreviewPanel({ product }: ConfigPreviewPanelProps) {
  return (
    <aside
      className="w-64 border-l border-border-default bg-surface-primary p-4 overflow-auto flex-shrink-0"
      aria-label="配置预览面板"
    >
      <div className="flex items-center justify-between mb-4">
        <h3 className="text-sm font-semibold text-text-primary">配置预览</h3>
        <a href="/config" aria-label="前往配置中心编辑"
          className="text-xs text-brand-orange hover:underline">编辑配置</a>
      </div>

      <div className="space-y-3 text-sm">
        <InfoRow label="产品" value={product.name} />
        <InfoRow label="品类" value={product.category} />
        {product.selling_points.length > 0 && (
          <div>
            <span className="text-xs text-text-secondary block mb-1">卖点</span>
            <div className="flex flex-wrap gap-1">
              {product.selling_points.map((sp) => (
                <span key={sp} className="text-xs bg-brand-cream px-2 py-0.5 rounded-full text-text-secondary">
                  {sp}
                </span>
              ))}
            </div>
          </div>
        )}
        {product.style_tone && <InfoRow label="风格" value={product.style_tone} />}
        {product.text_angles.length > 0 && (
          <div>
            <span className="text-xs text-text-secondary block mb-1">文案角度</span>
            <div className="flex flex-wrap gap-1">
              {product.text_angles.map((a) => (
                <span key={a} className="text-xs bg-surface-tertiary px-2 py-0.5 rounded-full text-text-secondary">
                  {a}
                </span>
              ))}
            </div>
          </div>
        )}
      </div>
    </aside>
  );
}

function InfoRow({ label, value }: { label: string; value: string }) {
  return (
    <div>
      <span className="text-xs text-text-secondary">{label}</span>
      <p className="text-sm text-text-primary">{value}</p>
    </div>
  );
}
