// tow-cards.jsx — TowCard (style variants) + map backdrop + radius selector.

// ── TowCard ──────────────────────────────────────────────────────────
// cardStyle: 'detailed' | 'compact' | 'photo'
function TowCard({ tow, cardStyle = 'detailed', accent, onSend, sending, sent }) {
  const t = window.TOW_TYPES[tow.type];

  const SendBtn = ({ full }) => (
    <button
      onClick={onSend}
      disabled={sent}
      style={{
        height: 40, padding: full ? '0 16px' : '0 14px', width: full ? '100%' : 'auto',
        borderRadius: 12, border: 'none', cursor: sent ? 'default' : 'pointer',
        background: sent ? window.tint(C.greenSolid, 0.14) : accent,
        color: sent ? C.greenText : '#fff', fontFamily: 'Inter', fontSize: 13.5, fontWeight: 700,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 7,
        flexShrink: 0, transition: 'background .15s',
      }}>
      {sent
        ? <><window.Icon name="check" size={16} color={C.greenText} strokeWidth={2.6}/>Запрос отправлен</>
        : sending
          ? 'Отправляем…'
          : <>Отправить запрос<window.Icon name="arrow-right" size={15} color="#fff" strokeWidth={2.2}/></>}
    </button>
  );

  // ── compact ──
  if (cardStyle === 'compact') {
    return (
      <div style={{
        display: 'flex', alignItems: 'center', gap: 12, padding: '12px 14px',
        background: '#fff', border: `1px solid ${C.hairline}`, borderRadius: 16,
      }}>
        <window.TowAvatar tone={tow.tone} size={44} radius={12}/>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 14.5, color: C.text, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{tow.name}</span>
            {tow.verified && <window.Verified accent={accent}/>}
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 2, fontFamily: 'Inter', fontSize: 12, color: C.textMuted }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 3 }}><window.Icon name="star" size={11} color={C.yellow}/><b style={{ color: C.text }}>{tow.rating.toFixed(1)}</b></span>
            <span>·</span><span>{t.label}</span>
          </div>
        </div>
        <div style={{ textAlign: 'right', flexShrink: 0 }}>
          <div style={{ fontFamily: 'Inter', fontWeight: 800, fontSize: 15, color: C.text }}>{tow.eta} мин</div>
          <div style={{ fontFamily: 'Inter', fontSize: 12.5, fontWeight: 600, color: accent }}>≈ {window.fmtTg(tow.price)}</div>
        </div>
        <button onClick={onSend} disabled={sent} aria-label="Отправить запрос" style={{
          width: 40, height: 40, borderRadius: 12, border: 'none', flexShrink: 0,
          cursor: sent ? 'default' : 'pointer',
          background: sent ? window.tint(C.greenSolid, 0.14) : accent,
          display: 'grid', placeItems: 'center',
        }}>
          <window.Icon name={sent ? 'check' : 'arrow-right'} size={18} color={sent ? C.greenText : '#fff'} strokeWidth={2.4}/>
        </button>
      </div>
    );
  }

  // ── photo (large media-forward) & detailed share the same shell ──
  const photo = cardStyle === 'photo';
  const [c1, c2] = (window.AVATAR_TONES && window.AVATAR_TONES[tow.tone]) || ['#1f2a5e', '#36459c'];

  return (
    <div style={{
      background: '#fff', border: `1px solid ${C.hairline}`, borderRadius: 18, overflow: 'hidden',
      boxShadow: '0 2px 10px rgba(12,12,13,0.04)',
    }}>
      {photo && (
        <div style={{
          height: 120, position: 'relative',
          background: `linear-gradient(135deg, ${c1}, ${c2})`,
          display: 'flex', alignItems: 'flex-end', padding: 12,
        }}>
          <window.Icon name="truck" size={64} color="rgba(255,255,255,0.16)" strokeWidth={1.4}
            style={{ position: 'absolute', right: 14, top: 18 }}/>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 10px', borderRadius: 999,
            background: 'rgba(255,255,255,0.92)', fontFamily: 'Inter', fontSize: 11.5, fontWeight: 700, color: C.greenText,
          }}>
            <span style={{ width: 7, height: 7, borderRadius: 999, background: C.greenSolid }}/> Онлайн · {tow.dist} км
          </span>
        </div>
      )}
      <div style={{ padding: 14 }}>
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
          {!photo && <window.TowAvatar tone={tow.tone} size={52} radius={14}/>}
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <span style={{ fontFamily: 'Inter', fontWeight: 700, fontSize: 16, color: C.text }}>{tow.name}</span>
              {tow.verified && <window.Verified accent={accent}/>}
            </div>
            <div style={{ marginTop: 3 }}><window.Rating value={tow.rating} orders={tow.orders}/></div>
            <div style={{ marginTop: 8 }}><window.TypeChip type={tow.type} accent={accent}/></div>
          </div>
        </div>

        {/* metrics row */}
        <div style={{
          display: 'flex', marginTop: 12, marginBottom: 14, borderRadius: 12,
          background: C.surface, overflow: 'hidden',
        }}>
          <Metric icon="clock" label="Подача" value={`${tow.eta} мин`}/>
          <div style={{ width: 1, background: C.hairline }}/>
          <Metric icon="route" label="Расстояние" value={`${tow.dist} км`}/>
          <div style={{ width: 1, background: C.hairline }}/>
          <Metric icon="tag" label="Ориент. цена" value={`≈ ${window.fmtTg(tow.price)}`} accent={accent} strong/>
        </div>

        <SendBtn full/>
      </div>
    </div>
  );
}
window.TowCard = TowCard;

function Metric({ icon, label, value, accent, strong }) {
  return (
    <div style={{ flex: 1, padding: '9px 10px', display: 'flex', flexDirection: 'column', gap: 3 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 4, fontFamily: 'Inter', fontSize: 10.5, color: C.textMuted, textTransform: 'uppercase', letterSpacing: 0.3 }}>
        <window.TIcon name={icon} size={11} color={C.textMuted} strokeWidth={2}/>{label}
      </div>
      <div style={{ fontFamily: 'Inter', fontSize: 13.5, fontWeight: 800, color: strong ? (accent || C.text) : C.text, lineHeight: 1.1 }}>{value}</div>
    </div>
  );
}

// ── Radius selector ──────────────────────────────────────────────────
function RadiusSelector({ value, onChange, accent }) {
  const opts = [3, 5, 10, 20];
  return (
    <div style={{ display: 'flex', gap: 6 }}>
      {opts.map(r => {
        const on = r === value;
        return (
          <button key={r} onClick={() => onChange(r)} style={{
            flex: 1, height: 34, borderRadius: 10, cursor: 'pointer', fontFamily: 'Inter',
            fontSize: 13, fontWeight: on ? 700 : 600,
            border: on ? 'none' : `1px solid ${C.hairline}`,
            background: on ? accent : '#fff', color: on ? '#fff' : C.text,
          }}>{r} км</button>
        );
      })}
    </div>
  );
}
window.RadiusSelector = RadiusSelector;

// ── Map backdrop + pins ──────────────────────────────────────────────
function TowMap({ tows, selectedId, onSelect, radiusPx, accent }) {
  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden', background: 'rgb(238,240,235)' }}>
      <svg width="100%" height="100%" viewBox="0 0 375 440" preserveAspectRatio="xMidYMid slice" style={{ position: 'absolute', inset: 0 }}>
        <defs>
          <pattern id="towgrid" width="40" height="40" patternUnits="userSpaceOnUse">
            <rect width="40" height="40" fill="rgb(238,240,235)"/>
            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgb(228,232,225)" strokeWidth="1"/>
          </pattern>
        </defs>
        <rect width="375" height="440" fill="url(#towgrid)"/>
        <ellipse cx="55" cy="70" rx="120" ry="70" fill="rgb(214,233,202)"/>
        <ellipse cx="320" cy="400" rx="100" ry="80" fill="rgb(214,233,202)"/>
        <path d="M -10 250 Q 80 220 150 270 Q 220 320 380 290 L 380 350 Q 280 360 200 340 Q 80 320 -10 350 Z" fill="rgb(196,222,236)" opacity="0.7"/>
        {/* roads */}
        <line x1="0" y1="180" x2="375" y2="180" stroke="#fff" strokeWidth="14"/>
        <line x1="170" y1="0" x2="170" y2="440" stroke="#fff" strokeWidth="14"/>
        <line x1="0" y1="100" x2="375" y2="100" stroke="#fff" strokeWidth="8"/>
        <line x1="0" y1="300" x2="375" y2="300" stroke="#fff" strokeWidth="8"/>
        <line x1="80" y1="0" x2="80" y2="440" stroke="#fff" strokeWidth="8"/>
        <line x1="265" y1="0" x2="265" y2="440" stroke="#fff" strokeWidth="8"/>
        <line x1="0" y1="0" x2="375" y2="320" stroke="#fff" strokeWidth="10" opacity="0.9"/>
        {[[10,110,60,60],[225,110,30,60],[280,110,85,60],[10,190,60,80],[185,190,70,80],[280,190,85,80],[10,310,60,80],[95,310,70,80],[185,310,70,80],[280,310,85,80]].map((b,i)=>(
          <rect key={i} x={b[0]} y={b[1]} width={b[2]} height={b[3]} rx="3" fill="rgb(245,247,242)" stroke="rgb(228,232,225)" strokeWidth="1"/>
        ))}
        {/* radius ring */}
        <circle cx="187" cy="220" r={radiusPx} fill={window.tint(accent, 0.08)} stroke={window.tint(accent, 0.4)} strokeWidth="1.5" strokeDasharray="5 5"/>
        {/* user */}
        <g transform="translate(187 220)">
          <circle r="20" fill={window.tint(accent, 0.18)}/>
          <circle r="9" fill="#fff"/>
          <circle r="6" fill={accent}/>
        </g>
        {tows.map(p => {
          const active = selectedId === p.id;
          const w = active ? 46 : 38;
          return (
            <g key={p.id} transform={`translate(${p.x - w/2} ${p.y - w})`} onClick={() => onSelect(p.id)} style={{ cursor: 'pointer' }}>
              <path d={`M ${w/2} ${w} L ${w/2 - 6} ${w - 9} L ${w/2 + 6} ${w - 9} Z`} fill={active ? accent : '#fff'}/>
              <circle cx={w/2} cy={w/2 - 2} r={w/2 - 2} fill={active ? accent : '#fff'} stroke={active ? '#fff' : 'rgba(0,0,0,0.08)'} strokeWidth={active ? 3 : 1}/>
              <foreignObject x={w/2 - 11} y={w/2 - 13} width="22" height="22" pointerEvents="none">
                <div xmlns="http://www.w3.org/1999/xhtml" style={{ display: 'grid', placeItems: 'center', width: 22, height: 22 }}>
                  <window.Icon name="truck" size={17} color={active ? '#fff' : accent} strokeWidth={2}/>
                </div>
              </foreignObject>
              {/* ETA bubble */}
              <foreignObject x={w/2 - 26} y={-14} width="52" height="18" pointerEvents="none">
                <div xmlns="http://www.w3.org/1999/xhtml" style={{
                  display: 'flex', justifyContent: 'center',
                }}>
                  <span style={{
                    fontFamily: 'Inter', fontSize: 9.5, fontWeight: 800, color: active ? '#fff' : C.text,
                    background: active ? accent : '#fff', padding: '1px 6px', borderRadius: 999,
                    boxShadow: '0 1px 3px rgba(0,0,0,0.15)', whiteSpace: 'nowrap',
                  }}>{p.eta} мин</span>
                </div>
              </foreignObject>
            </g>
          );
        })}
      </svg>
    </div>
  );
}
window.TowMap = TowMap;