// Pledge ticket detail screen — Komek Lombard v2
// Adds "Частичное досрочное погашение" between "Пролонгировать" and "Закрыть"

const TEAL = '#1B7F70';
const TEAL_DEEP = '#176A5D';
const TEAL_SOFT = '#E4F1EE';
const MAROON = '#591A1A';
const PAGE_BG = '#EBEBEC';
const CARD_BG = '#FFFFFF';
const LABEL = '#3A3A3D';
const SUBTLE = '#8A8A8E';
const DIVIDER = '#EDEDEF';

// ─── icons ──────────────────────────────────────────────────────────
const Icon = {
  hex: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <path d="M12 2.5l8.5 4.9v9.2L12 21.5 3.5 16.6V7.4L12 2.5z" stroke="#3A3A3D" strokeWidth="1.6"/>
    </svg>
  ),
  cal: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <rect x="3.5" y="5" width="17" height="15.5" rx="2" stroke="#3A3A3D" strokeWidth="1.6"/>
      <path d="M3.5 9.5h17" stroke="#3A3A3D" strokeWidth="1.6"/>
      <path d="M8 3v4M16 3v4" stroke="#3A3A3D" strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  ),
  pin: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <path d="M12 21s-7-6.2-7-12a7 7 0 0114 0c0 5.8-7 12-7 12z" stroke="#3A3A3D" strokeWidth="1.6"/>
      <circle cx="12" cy="9" r="2.4" stroke="#3A3A3D" strokeWidth="1.6"/>
    </svg>
  ),
  back: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <path d="M4 12a8 8 0 108-8" stroke="#3A3A3D" strokeWidth="1.6" strokeLinecap="round"/>
      <path d="M4 6v6h6" stroke="#3A3A3D" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  hour: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <path d="M6 2h12M6 22h12" stroke="#3A3A3D" strokeWidth="1.6" strokeLinecap="round"/>
      <path d="M7 2v3.5c0 3 5 4.5 5 6.5s-5 3.5-5 6.5V22M17 2v3.5c0 3-5 4.5-5 6.5s5 3.5 5 6.5V22" stroke="#3A3A3D" strokeWidth="1.6"/>
    </svg>
  ),
  shield: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z" stroke="#3A3A3D" strokeWidth="1.6" strokeLinejoin="round"/>
    </svg>
  ),
  money: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <rect x="2.5" y="6.5" width="19" height="12" rx="2" stroke="#3A3A3D" strokeWidth="1.6"/>
      <circle cx="12" cy="12.5" r="2.4" stroke="#3A3A3D" strokeWidth="1.6"/>
      <path d="M5.5 9.5h.01M18.5 15.5h.01" stroke="#3A3A3D" strokeWidth="1.8" strokeLinecap="round"/>
    </svg>
  ),
  percent: (
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="9.2" stroke="#3A3A3D" strokeWidth="1.6"/>
      <circle cx="9" cy="9" r="1.4" fill="#3A3A3D"/>
      <circle cx="15" cy="15" r="1.4" fill="#3A3A3D"/>
      <path d="M16 8L8 16" stroke="#3A3A3D" strokeWidth="1.6" strokeLinecap="round"/>
    </svg>
  ),
  dots: (
    <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
      <circle cx="7" cy="3" r="1.3" fill="#fff"/>
      <circle cx="7" cy="7" r="1.3" fill="#fff"/>
      <circle cx="7" cy="11" r="1.3" fill="#fff"/>
    </svg>
  ),
};

// ─── tile (small teal "id" square at the start of each card title) ──
function IdTile({ size = 26 }) {
  return (
    <div style={{
      width: size, height: size, borderRadius: 5, background: TEAL,
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexShrink: 0,
    }}>
      {Icon.dots}
    </div>
  );
}

function StatusDot({ color = TEAL }) {
  return (
    <span style={{
      display: 'inline-block', width: 8, height: 8, borderRadius: '50%',
      background: color, marginRight: 6, verticalAlign: 1,
    }}/>
  );
}

// ─── data row ───────────────────────────────────────────────────────
function Row({ icon, label, value, valueColor = LABEL, valueWeight = 700, dot }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '11px 0', gap: 12,
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
        <span style={{ width: 18, height: 18, display: 'inline-flex' }}>{icon}</span>
        <span style={{ fontSize: 15, color: LABEL, fontWeight: 400 }}>{label}</span>
      </div>
      <span style={{
        fontSize: 15, color: valueColor, fontWeight: valueWeight,
        textAlign: 'right', whiteSpace: 'nowrap',
      }}>
        {dot && <StatusDot color={valueColor}/>}
        {value}
      </span>
    </div>
  );
}

// ─── buttons ────────────────────────────────────────────────────────
function PrimaryButton({ children, onClick }) {
  return (
    <button onClick={onClick} style={{
      width: '100%', height: 54, borderRadius: 10, border: 'none',
      background: TEAL, color: '#fff',
      fontSize: 17, fontWeight: 600, letterSpacing: 0.1,
      fontFamily: 'inherit', cursor: 'pointer',
      boxShadow: '0 1px 0 rgba(0,0,0,0.04)',
    }}>{children}</button>
  );
}

function SecondaryButton({ children, variant = 'outlined', onClick }) {
  const styles = {
    'gray-soft': {
      background: '#DCDCE0', color: '#9A9AA0',
      border: '1.5px solid transparent',
    },
    outlined: {
      background: '#fff', color: TEAL,
      border: `1.5px solid ${TEAL}`,
    },
    soft: {
      background: TEAL_SOFT, color: TEAL_DEEP,
      border: '1.5px solid transparent',
    },
    'filled-dark': {
      background: TEAL_DEEP, color: '#fff',
      border: '1.5px solid transparent',
    },
    text: {
      background: 'transparent', color: TEAL,
      border: '1.5px solid transparent',
    },
  };
  return (
    <button onClick={onClick} style={{
      width: '100%', height: 54, borderRadius: 10,
      fontSize: 16, fontWeight: 600, letterSpacing: 0.05,
      fontFamily: 'inherit', cursor: 'pointer',
      ...styles[variant],
    }}>{children}</button>
  );
}

function TextButton({ children, onClick }) {
  return (
    <button onClick={onClick} style={{
      width: '100%', height: 44, border: 'none', background: 'transparent',
      color: '#0E0E0F', fontSize: 17, fontWeight: 600,
      fontFamily: 'inherit', cursor: 'pointer',
    }}>{children}</button>
  );
}

// ─── screen ────────────────────────────────────────────────────────
function PledgeTicketScreen({ secondaryVariant = 'outlined', showNewButton = true, onPartialRepayment }) {
  return (
    <div style={{
      minHeight: '100%', background: PAGE_BG,
      fontFamily: '-apple-system, "SF Pro Text", system-ui, sans-serif',
      WebkitFontSmoothing: 'antialiased',
      paddingTop: 56, // below status bar
      display: 'flex', flexDirection: 'column',
    }}>
      {/* Page title */}
      <h1 style={{
        margin: '8px 20px 16px', fontSize: 28, fontWeight: 800,
        color: '#0B0B0C', letterSpacing: -0.4,
      }}>Залоговые билеты</h1>

      {/* Summary tile (sits on gray background) */}
      <div style={{ padding: '0 16px 16px' }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start', marginBottom: 10 }}>
          <IdTile size={28}/>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{
              color: TEAL, fontWeight: 700, fontSize: 16, lineHeight: 1.2,
            }}>№ VV000000082 — Часы</div>
            <div style={{ marginTop: 4, color: TEAL, fontSize: 14, fontWeight: 500 }}>
              <StatusDot/>Принято
            </div>
          </div>
        </div>
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          padding: '0 4px',
        }}>
          <span style={{ fontSize: 22, fontWeight: 800, color: '#0B0B0C', letterSpacing: -0.2 }}>
            40 000 ₸
          </span>
          <span style={{ fontSize: 13, color: SUBTLE }}>
            До даты возврата: <span style={{ color: '#0B0B0C', fontWeight: 700 }}>29 дней</span>
          </span>
        </div>
      </div>

      {/* Main white card — rounded top, fills the rest */}
      <div style={{
        flex: 1, background: CARD_BG,
        borderTopLeftRadius: 26, borderTopRightRadius: 26,
        padding: '22px 20px 100px',
        boxShadow: '0 -1px 0 rgba(0,0,0,0.03)',
      }}>
        {/* card title */}
        <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginBottom: 14 }}>
          <IdTile size={30}/>
          <div style={{
            color: MAROON, fontWeight: 800, fontSize: 22, letterSpacing: -0.2,
          }}>№ VV000000082</div>
        </div>

        <div style={{ borderTop: `1px solid ${DIVIDER}`, marginBottom: 4 }}/>

        <Row icon={Icon.hex}    label="Статус:"           value="Принято"          valueColor={TEAL} dot/>
        <Row icon={Icon.cal}    label="Дата открытия:"   value="24.11.2025 11:05:00"/>
        <Row icon={Icon.pin}    label="Адрес:"            value="г. Алматы, Макатаева, 46, V"/>
        <Row icon={Icon.back}   label="Дата возврата:"   value="24.12.2025"/>
        <Row icon={Icon.hour}   label="До возврата:"      value="29 дней"/>
        <Row icon={Icon.shield} label="Дата гар.срока:"   value="23.01.2026"/>
        <Row icon={Icon.money}  label="Сумма займа:"      value="40 000 ₸"/>
        <Row icon={Icon.percent} label="Проценты по займу:" value="5 000 ₸"/>

        {/* actions */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginTop: 22 }}>
          <PrimaryButton>Пролонгировать</PrimaryButton>
          {showNewButton && (
            <SecondaryButton variant={secondaryVariant} onClick={onPartialRepayment}>
              Частичное погашение
            </SecondaryButton>
          )}
          <TextButton>Закрыть</TextButton>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PledgeTicketScreen });