/* global React, CRYPTOLIVE_DATA, Coin, Sparkline, PremiumGauge, Icon, fmtPrice, fmtPct, fmtUSD, fmtKRW, upDownClass */

function PriceChart({ data, color, height = 220 }) {
  const w = 800, h = height;
  const min = Math.min(...data), max = Math.max(...data);
  const range = max - min || 1;
  const stepX = w / (data.length - 1);
  const points = data.map((v, i) => [i * stepX, h - ((v - min) / range) * (h - 32) - 16]);
  const d = points.map((p, i) => (i === 0 ? `M${p[0]},${p[1]}` : `L${p[0]},${p[1]}`)).join(' ');
  const dFill = d + ` L${w},${h} L0,${h} Z`;
  return (
    <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" style={{ width: '100%', height, display: 'block' }}>
      <defs>
        <linearGradient id="cg" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={color} stopOpacity="0.18" />
          <stop offset="100%" stopColor={color} stopOpacity="0" />
        </linearGradient>
      </defs>
      <path d={dFill} fill="url(#cg)" />
      <path d={d} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function StatBlock({ label, value, sub, color }) {
  return (
    <div style={{ padding: '12px 0' }}>
      <div className="t-meta" style={{ marginBottom: 4 }}>{label}</div>
      <div className="t-h3 t-num" style={{ color: color || 'var(--fg-1)' }}>{value}</div>
      {sub && <div className="t-meta" style={{ marginTop: 2 }}>{sub}</div>}
    </div>
  );
}

function DetailTab({ id, label, active, onClick }) {
  return (
    <button className={`tab ${active ? 'tab--active' : ''}`} onClick={() => onClick(id)}>
      {label}
    </button>
  );
}

function VenueBar({ venue, max, basePrice, idx }) {
  const pct = (venue.share / max) * 100;
  // Deterministic per-venue spread: ±0.4% based on venue name + index
  const seed = (venue.name.charCodeAt(0) + venue.name.charCodeAt(venue.name.length - 1) + idx * 7) % 100;
  const spread = ((seed - 50) / 50) * 0.004; // ±0.4%
  const venuePrice = basePrice * (1 + spread);
  const diffPct = spread * 100;
  const diffColor = diffPct > 0.05 ? 'var(--up)' : diffPct < -0.05 ? 'var(--down)' : 'var(--fg-3)';
  const sign = diffPct >= 0 ? '+' : '';
  return (
    <div style={{ padding: '12px 0', borderBottom: '1px solid var(--line-soft)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6, gap: 12, flexWrap: 'wrap' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
          <div style={{ fontWeight: 600 }}>{venue.name}</div>
          <span className="pill" style={{ minWidth: 36, justifyContent: 'center', height: 20, fontSize: 11 }}>{venue.share}%</span>
        </div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span className="t-num" style={{ fontWeight: 700, fontSize: 14 }}>${fmtPrice(venuePrice)}</span>
          <span className="t-num" style={{ fontWeight: 600, fontSize: 12, color: diffColor }}>
            {sign}{diffPct.toFixed(2)}%
          </span>
          <span className="t-meta t-num" style={{ fontSize: 11 }}>{fmtUSD(venue.vol)}</span>
        </div>
      </div>
      <div style={{ height: 6, background: 'var(--bg-muted)', borderRadius: 999, overflow: 'hidden' }}>
        <div style={{ width: `${pct}%`, height: '100%', background: 'var(--blue)', borderRadius: 999 }} />
      </div>
    </div>
  );
}

function RiskBar({ label, score, hint }) {
  // score 0-100; lower is safer
  const color = score < 30 ? 'var(--up)' : score < 60 ? 'var(--warn)' : 'var(--danger)';
  return (
    <div style={{ padding: '10px 0' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
        <span style={{ fontWeight: 600 }}>{label}</span>
        <span className="t-meta">{hint}</span>
      </div>
      <div style={{ height: 6, background: 'var(--bg-muted)', borderRadius: 999 }}>
        <div style={{ width: `${score}%`, height: '100%', background: color, borderRadius: 999 }} />
      </div>
    </div>
  );
}

function AssetDetailScreen({ assetId, goto }) {
  const asset = CRYPTOLIVE_DATA.assets().find(a => a.id === assetId);
  const [tab, setTab] = React.useState('chart');
  const [watched, setWatched] = React.useState(false);
  const [chatInput, setChatInput] = React.useState('');
  const [msgs, setMsgs] = React.useState(CRYPTOLIVE_DATA.chats().slice(0, 4));

  if (!asset) return <div className="container page">해당 자산을 찾을 수 없습니다.</div>;

  const up = asset.change24h >= 0;
  const premUp = asset.premium > 0;
  const color = up ? 'var(--up)' : 'var(--down)';
  const maxShare = Math.max(...asset.venues.map(v => v.share));

  const send = () => {
    if (!chatInput.trim()) return;
    setMsgs([{ u: '나', t: '방금', m: chatInput.trim() }, ...msgs]);
    setChatInput('');
  };

  return (
    <div className="container page" data-screen-label={`Detail-${asset.symbol}`}>
      {/* Header */}
      <button className="btn btn--ghost btn--sm" onClick={() => goto({ tab: 'market' })} style={{ marginBottom: 12 }}>
        <Icon.arrowLeft width="16" height="16" /> 마켓
      </button>

      <div className="card card-pad-lg" style={{ marginBottom: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 20, flexWrap: 'wrap' }}>
          <Coin id={asset.id} symbol={asset.symbol} size="lg" />
          <div style={{ flex: 1, minWidth: 200 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <div className="t-h2">{asset.symbol}</div>
              <span className="pill">{asset.class}</span>
            </div>
            <div className="t-body-sm">{asset.shortDesc}</div>
          </div>
          <button className="btn btn--sm" onClick={() => setWatched(!watched)}>
            {watched ? <Icon.starFill width="16" height="16" style={{ color: 'var(--warn)' }} /> : <Icon.star width="16" height="16" />}
            {watched ? '관심종목 등록됨' : '관심종목 추가'}
          </button>
        </div>

        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
          <div className="t-display t-num">${fmtPrice(asset.tokenPrice)}</div>
          <div className={`pill ${up ? 'pill--up' : 'pill--down'} pill--lg`}>
            {fmtPct(asset.change24h)} (24h)
          </div>
          <div className="t-meta">≈ {fmtKRW(asset.tokenPrice)}</div>
        </div>

        {/* Premium callout */}
        <div style={{
          marginTop: 20, padding: 18, borderRadius: 16,
          background: premUp ? 'var(--up-soft)' : asset.premium < 0 ? 'var(--down-soft)' : 'var(--bg-muted)',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12, flexWrap: 'wrap', gap: 8 }}>
            <div>
              <div style={{ fontWeight: 800, fontSize: 16, color: premUp ? 'var(--up)' : asset.premium < 0 ? 'var(--down)' : 'var(--fg-1)', letterSpacing: '-0.01em' }}>
                기초자산 {asset.name} 대비 {fmtPct(asset.premium)} {premUp ? '프리미엄' : asset.premium < 0 ? '디스카운트' : '패리티'}
              </div>
              <div style={{ marginTop: 4, fontSize: 13, fontWeight: 600, color: 'var(--fg-2)' }}>기초가 ${fmtPrice(asset.refPrice)} · 토큰가 ${fmtPrice(asset.tokenPrice)}</div>
            </div>
          </div>
          <PremiumGauge value={asset.premium} max={3} />
          <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 8 }}>
            <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-2)' }}>−3% 디스카운트</span>
            <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-2)' }}>패리티</span>
            <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-2)' }}>+3% 프리미엄</span>
          </div>
        </div>
      </div>

      {/* Stats grid */}
      <div className="grid grid-4" style={{ marginBottom: 16 }}>
        <StatBlockCard label="24시간 거래대금" value={fmtUSD(asset.vol24h)} sub={`30일 평균 대비 ${asset.volChange > 0 ? '+' : ''}${asset.volChange}%`} />
        <StatBlockCard label="유동성" value={asset.liquidity} sub={`스코어 ${asset.liquidityScore}/100`} />
        <StatBlockCard label="리스크" value={asset.risk} sub={`스코어 ${asset.riskScore}/100`} />
        <StatBlockCard label="발행사" value={asset.issuer.split(' ')[0]} sub={`${asset.chain} 체인`} />
      </div>

      {/* Tabs */}
      <div className="tabs" style={{ marginBottom: 16 }}>
        <DetailTab id="chart" label="차트" active={tab === 'chart'} onClick={setTab} />
        <DetailTab id="compare" label="기초자산 비교" active={tab === 'compare'} onClick={setTab} />
        <DetailTab id="venues" label="거래소" active={tab === 'venues'} onClick={setTab} />
        <DetailTab id="liquidity" label="유동성" active={tab === 'liquidity'} onClick={setTab} />
        <DetailTab id="issuer" label="발행사·담보" active={tab === 'issuer'} onClick={setTab} />
        <DetailTab id="risk" label="리스크" active={tab === 'risk'} onClick={setTab} />
        <DetailTab id="chat" label="토론" active={tab === 'chat'} onClick={setTab} />
      </div>

      {tab === 'chart' && (
        <div className="card">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
            <div>
              <div style={{ fontWeight: 700 }}>가격 차트</div>
              <div className="t-meta">최근 60 캔들 · 1시간 봉</div>
            </div>
            <div style={{ display: 'flex', gap: 4 }}>
              {['1H', '1D', '1W', '1M', '1Y'].map((p, i) => (
                <button key={p} className={`chip ${i === 1 ? 'chip--active' : ''}`} style={{ height: 28, padding: '0 10px' }}>{p}</button>
              ))}
            </div>
          </div>
          <PriceChart data={asset.chart} color={color} height={260} />
        </div>
      )}

      {tab === 'compare' && (
        <div className="card">
          <div style={{ fontWeight: 700, marginBottom: 4 }}>토큰 vs 기초자산 가격</div>
          <div className="t-meta" style={{ marginBottom: 16 }}>두 가격이 가까울수록 차익거래가 효율적으로 작동하고 있어요</div>
          <div className="grid grid-2">
            <div style={{ padding: 16, borderRadius: 16, background: 'var(--bg-muted)' }}>
              <div className="t-meta">토큰 {asset.symbol}</div>
              <div className="t-h2 t-num" style={{ marginTop: 4 }}>${fmtPrice(asset.tokenPrice)}</div>
              <div className="t-meta" style={{ marginTop: 8 }}>24시간 거래소 가중평균</div>
            </div>
            <div style={{ padding: 16, borderRadius: 16, background: 'var(--bg-muted)' }}>
              <div className="t-meta">기초자산 {asset.name}</div>
              <div className="t-h2 t-num" style={{ marginTop: 4 }}>${fmtPrice(asset.refPrice)}</div>
              <div className="t-meta" style={{ marginTop: 8 }}>레퍼런스 마켓 종가</div>
            </div>
          </div>
          <div style={{ marginTop: 16, padding: 16, borderRadius: 12, background: premUp ? 'var(--up-soft)' : asset.premium < 0 ? 'var(--down-soft)' : 'var(--bg-muted)' }}>
            <div style={{ fontWeight: 700, color: premUp ? 'var(--up)' : asset.premium < 0 ? 'var(--down)' : 'var(--fg-1)' }}>
              차이 {fmtPct(asset.premium)} · ${(asset.tokenPrice - asset.refPrice).toFixed(2)}
            </div>
            <div className="t-body-sm" style={{ marginTop: 4 }}>
              {Math.abs(asset.premium) > 1
                ? '평소 대비 가격차가 크게 벌어진 상태예요. 차익거래 기회일 수 있지만, 진입 전 유동성과 환매 조건을 점검하세요.'
                : '기초자산과 근접한 가격대에서 안정적으로 거래되고 있어요.'}
            </div>
          </div>
        </div>
      )}

      {tab === 'venues' && (
        <div className="card">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4, flexWrap: 'wrap', gap: 8 }}>
            <div style={{ fontWeight: 700 }}>주요 거래소</div>
            <div className="t-meta" style={{ fontSize: 12 }}>기준가 ${fmtPrice(asset.tokenPrice)} · 거래소별 체결가</div>
          </div>
          <div className="t-meta" style={{ marginBottom: 8 }}>24시간 거래대금 점유율 기준</div>
          {asset.venues.map((v, i) => <VenueBar key={v.name} venue={v} max={maxShare} basePrice={asset.tokenPrice} idx={i} />)}
        </div>
      )}

      {tab === 'liquidity' && (
        <div className="card">
          <div style={{ fontWeight: 700, marginBottom: 16 }}>유동성 지표</div>
          <div className="grid grid-2">
            <div>
              <div className="t-meta">유동성 스코어</div>
              <div className="t-display t-num" style={{ color: 'var(--blue)' }}>{asset.liquidityScore}</div>
              <div className="t-meta">100점 만점 · {asset.liquidity}</div>
            </div>
            <div>
              <StatBlock label="$10K 체결 슬리피지" value={`${(100 / asset.liquidityScore * 4).toFixed(0)} bps`} sub="추정치" />
              <StatBlock label="$100K 체결 슬리피지" value={`${(100 / asset.liquidityScore * 25).toFixed(0)} bps`} sub="추정치" />
              <StatBlock label="평균 스프레드" value={`${(100 / asset.liquidityScore * 1.5).toFixed(1)} bps`} sub="최근 24시간" />
            </div>
          </div>
        </div>
      )}

      {tab === 'issuer' && (
        <div className="card">
          <div style={{ fontWeight: 700, marginBottom: 16 }}>발행사 · 담보 구조</div>
          <div style={{ display: 'grid', gridTemplateColumns: '160px 1fr', rowGap: 12, columnGap: 16 }}>
            <div className="t-meta">발행사</div><div style={{ fontWeight: 600 }}>{asset.issuer}</div>
            <div className="t-meta">수탁기관</div><div>{asset.custodian}</div>
            <div className="t-meta">발행 체인</div><div>{asset.chain}</div>
            <div className="t-meta">환매 가능 여부</div><div>{asset.redeemable ? '가능' : '불가'}</div>
            <div className="t-meta">KYC 요구</div><div>{asset.kyc ? '필수' : '불필요'}</div>
          </div>
          <div style={{ marginTop: 16, padding: 12, background: 'var(--bg-muted)', borderRadius: 12 }}>
            <div className="t-meta">최신 준비금 증명(PoR)</div>
            <div style={{ fontWeight: 600, marginTop: 2 }}>담보 비율 100.2% · 2026-05-10 검증</div>
          </div>
        </div>
      )}

      {tab === 'risk' && (
        <div className="card">
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
            <div style={{ fontWeight: 700 }}>리스크 분해</div>
            <div className={`pill pill--lg ${asset.riskScore < 30 ? 'pill--up' : asset.riskScore < 60 ? 'pill--warn' : 'pill--danger'}`}>
              종합 리스크: {asset.risk}
            </div>
          </div>
          <RiskBar label="발행사 리스크" score={Math.max(10, asset.riskScore - 8)} hint="신뢰도 · 운영 이력" />
          <RiskBar label="담보 리스크" score={Math.max(8, asset.riskScore - 14)} hint="준비금 · 증명 체계" />
          <RiskBar label="유동성 리스크" score={Math.max(20, 100 - asset.liquidityScore)} hint="시장 깊이 · 스프레드" />
          <RiskBar label="규제 리스크" score={Math.min(95, asset.riskScore + 12)} hint="관할권 · KYC 요건" />
          <RiskBar label="가격 신뢰도" score={Math.max(15, Math.abs(asset.premium) * 18)} hint="기초자산 대비 가격차" />
        </div>
      )}

      {tab === 'chat' && (
        <div className="card">
          <div style={{ fontWeight: 700, marginBottom: 4 }}>{asset.symbol} 토론방</div>
          <div className="t-meta" style={{ marginBottom: 12 }}>{Math.floor(20 + Math.random() * 120)}명이 실시간 접속 중</div>
          <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
            <input
              className="input"
              placeholder="투자 아이디어나 의견을 공유해보세요"
              value={chatInput}
              onChange={(e) => setChatInput(e.target.value)}
              onKeyDown={(e) => e.key === 'Enter' && send()}
            />
            <button className="btn btn--primary" onClick={send}>전송</button>
          </div>
          {msgs.map((c, i) => (
            <div key={i} style={{ padding: '12px 0', borderBottom: i < msgs.length - 1 ? '1px solid var(--line-soft)' : 'none' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 2 }}>
                <span style={{ fontWeight: 700, fontSize: 14 }}>{c.u}</span>
                <span className="t-meta">{c.t}</span>
              </div>
              <div className="t-body-sm" style={{ color: 'var(--fg-1)' }}>{c.m}</div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

function StatBlockCard({ label, value, sub, color }) {
  return (
    <div className="card">
      <div className="t-meta" style={{ marginBottom: 6 }}>{label}</div>
      <div className="t-h3 t-num" style={{ color: color || 'var(--fg-1)' }}>{value}</div>
      {sub && <div className="t-meta" style={{ marginTop: 4 }}>{sub}</div>}
    </div>
  );
}

window.AssetDetailScreen = AssetDetailScreen;