/* global React, Icon */
const { useState: usePD } = React;

function ProductDetail({ product, related, onBack, onOpen, onWishlist, wishlist }) {
  const [toast, setToast] = usePD(false);
  const handleBuy = () => { setToast(true); setTimeout(() => setToast(false), 2400); };

  return (
    <div style={{ background: '#fff' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '24px 20px 0' }}>
        <button onClick={onBack} style={{ background: 'transparent', border: 0, cursor: 'pointer', fontWeight: 500, color: '#666', padding: 0, fontSize: 13 }}>
          ← 목록으로 돌아가기
        </button>
      </div>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '20px 20px 0', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48 }}>
        <div style={{ background: '#fafafa', aspectRatio: '1/1', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
          <img src={product.img} alt={product.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div style={{ display: 'flex', gap: 6, fontSize: 11, fontWeight: 700, letterSpacing: '0.05em' }}>
            {product.discount && <span style={{ background: 'var(--coral)', color: '#fff', padding: '3px 8px', borderRadius: 3 }}>–{product.discount}%</span>}
            {product.badge && <span style={{ background: '#111', color: '#fff', padding: '3px 8px', borderRadius: 3 }}>{product.badge}</span>}
            <span style={{ background: '#f3f3f3', color: '#333', padding: '3px 8px', borderRadius: 3 }}>{product.category}</span>
          </div>
          <h1 style={{ margin: 0, fontSize: 30, lineHeight: 1.15, color: '#111', fontFamily: 'var(--font-display)', fontWeight: 800 }}>{product.title}</h1>
          <p style={{ margin: 0, fontSize: 15, color: '#555', lineHeight: 1.6 }}>{product.desc}</p>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginTop: 4 }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontWeight: 700, fontSize: 32, color: '#111' }}>₩{product.price.toLocaleString()}</span>
            {product.origPrice && <span style={{ fontFamily: 'var(--font-mono)', fontSize: 16, color: '#999', textDecoration: 'line-through' }}>₩{product.origPrice.toLocaleString()}</span>}
          </div>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center', color: '#666', fontSize: 13 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}>
              <Icon name="star" size={14} fill="var(--sunset)" style={{ color: 'var(--sunset)' }}/>
              <strong style={{ color: '#111' }}>{product.rating}</strong>
              <span>· 리뷰 {product.reviews.toLocaleString()}개</span>
            </span>
            <span>· 배송 {product.shipDays}일</span>
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 10 }}>
            <button onClick={handleBuy}
              style={{ flex: 1, background: 'var(--coral)', color: '#fff', border: 0, fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 15, letterSpacing: '0.06em', textTransform: 'uppercase', padding: '16px 20px', borderRadius: 3, cursor: 'pointer' }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--coral-deep)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'var(--coral)'}>
              알리에서 바로낚기 →
            </button>
            <button onClick={() => onWishlist(product)}
              style={{ width: 52, background: '#fff', border: '1px solid #ddd', borderRadius: 3, cursor: 'pointer', color: wishlist.has(product.id) ? 'var(--coral)' : '#444' }}>
              <Icon name={wishlist.has(product.id) ? 'heartF' : 'heart'} size={20} fill={wishlist.has(product.id) ? 'var(--coral)' : 'none'}/>
            </button>
          </div>
          <p style={{ margin: '2px 0 0', fontSize: 11, color: '#999' }}>위 버튼 클릭 시 알리익스프레스로 이동합니다. 어필리에이트 링크 포함.</p>
          <div style={{ marginTop: 16, padding: '14px 16px', background: '#fafafa', borderLeft: '3px solid var(--coral)' }}>
            <div style={{ fontWeight: 700, fontSize: 12, color: 'var(--coral-deep)', marginBottom: 4, letterSpacing: '0.06em', textTransform: 'uppercase' }}>낚시템 에디터 의견</div>
            <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, color: '#333' }}>{product.note}</p>
          </div>
        </div>
      </div>

      {related && related.length > 0 && (
        <div style={{ maxWidth: 1280, margin: '0 auto', padding: '24px 20px 0' }}>
          <h2 style={{ fontSize: 20, marginTop: 56, fontFamily: 'var(--font-display)', borderBottom: '1px solid #eee', paddingBottom: 14 }}>같이 낚기 좋은 템</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(220px, 1fr))', gap: 32, marginTop: 20 }}>
            {related.map((p) => <ProductCard key={p.id} product={p} onOpen={onOpen} onWishlist={onWishlist} saved={wishlist.has(p.id)}/>)}
          </div>
        </div>
      )}

      {toast && (
        <div style={{ position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)', background: '#111', color: '#fff', padding: '12px 18px', borderRadius: 4, fontSize: 14, display: 'flex', alignItems: 'center', gap: 8, zIndex: 30 }}>
          <Icon name="external" size={16}/>알리익스프레스로 이동... (데모)
        </div>
      )}
    </div>
  );
}
Object.assign(window, { ProductDetail });