// Theme 1 — Iron & Parchment
// Aged ledger paper · sealing wax red · ink black · woodcut woodblock vibe.

const ipPalette = {
  paper: '#e9dcc0',
  paperDeep: '#d8c79e',
  paperShade: '#bfa97d',
  ink: '#1a1410',
  inkSoft: '#3d2f23',
  wax: '#7d1d1d',
  waxDeep: '#5a1010',
  gold: '#9c7a2c',
  rule: 'rgba(26,20,16,0.45)',
};

const ipFont = `'IM Fell English', 'Cormorant Garamond', Georgia, serif`;
const ipFontSC = `'IM Fell English SC', 'Cormorant SC', Georgia, serif`;

const ipPaperBg = {
  background:
    `radial-gradient(circle at 18% 15%, rgba(120,90,40,0.18), transparent 45%),` +
    `radial-gradient(circle at 82% 85%, rgba(80,40,20,0.20), transparent 50%),` +
    `radial-gradient(circle at 50% 50%, rgba(180,150,90,0.10), transparent 60%),` +
    `${ipPalette.paper}`,
  position: 'relative',
};

// Tiny torn-edge / fiber overlay using SVG noise data-URI
const ipFiberOverlay = {
  content: '""',
  position: 'absolute', inset: 0,
  backgroundImage:
    `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")`,
  opacity: 0.5, mixBlendMode: 'multiply', pointerEvents: 'none',
};

const IPFrame = ({ children, padTop = 14 }) => (
  <div style={{ ...ipPaperBg, width: '100%', height: '100%', fontFamily: ipFont, color: ipPalette.ink, overflow: 'hidden' }}>
    <div style={ipFiberOverlay} />
    <div style={{ position: 'relative', height: '100%', padding: `${padTop}px 14px 14px` }}>{children}</div>
  </div>
);

const IPSeal = ({ size = 28 }) => (
  <div style={{
    width: size, height: size, borderRadius: '50%',
    background: `radial-gradient(circle at 35% 30%, #a83333, ${ipPalette.wax} 60%, ${ipPalette.waxDeep})`,
    boxShadow: `inset -2px -3px 4px rgba(0,0,0,0.4), inset 2px 2px 3px rgba(255,200,170,0.3), 0 1px 2px rgba(0,0,0,0.3)`,
    color: '#f0d8c0', fontFamily: ipFontSC, fontSize: size * 0.35, fontWeight: 700,
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    transform: 'rotate(-4deg)',
  }}>FC</div>
);

const IPRule = ({ thick }) => (
  <div style={{ height: thick ? 2 : 1, background: ipPalette.rule, margin: '6px 0', opacity: thick ? 0.9 : 0.6 }} />
);

const IPHeader = ({ title, day }) => (
  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 6 }}>
    <IPSeal />
    <div style={{ flex: 1 }}>
      <div style={{ fontFamily: ipFontSC, fontSize: 11, letterSpacing: 2, color: ipPalette.inkSoft }}>THE FREE COMPANIES</div>
      <div style={{ fontFamily: ipFont, fontSize: 18, fontWeight: 600, lineHeight: 1, fontStyle: 'italic' }}>{title}</div>
    </div>
    <div style={{ textAlign: 'right', fontSize: 10, fontFamily: ipFontSC, color: ipPalette.inkSoft, lineHeight: 1.2 }}>
      Day<br/><span style={{ fontSize: 16, color: ipPalette.ink }}>{day}</span>
    </div>
  </div>
);

// ---- DASHBOARD ----
function IPDashboard() {
  return (
    <IPFrame>
      <IPHeader title="The Ledger of Halric's Hand" day="14" />
      <IPRule thick />

      {/* Coffer */}
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 4 }}>
        <div style={{ fontFamily: ipFontSC, fontSize: 11, letterSpacing: 1.5, color: ipPalette.inkSoft }}>COFFER</div>
        <div style={{ fontSize: 10, fontFamily: ipFontSC, color: ipPalette.wax }}>vault floor 10,000</div>
      </div>
      <div style={{ fontFamily: ipFont, fontSize: 38, lineHeight: 1, fontWeight: 700 }}>
        2,341<span style={{ fontSize: 14, color: ipPalette.gold, marginLeft: 6 }}>g</span>
      </div>
      <div style={{ fontSize: 11, color: ipPalette.inkSoft, fontStyle: 'italic' }}>
        ⚠ overflow above floor: <b style={{ color: ipPalette.wax }}>—</b> · all coin sealed in the vault pocket
      </div>

      <IPRule />

      {/* Wages */}
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: ipFontSC, fontSize: 11, letterSpacing: 1.5 }}>WAGES OWED</span>
        <span style={{ fontSize: 11, color: ipPalette.inkSoft }}>3 days, 4 hr</span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto', fontSize: 12, marginTop: 4, rowGap: 2 }}>
        <span>4 Camp Followers <span style={{ color: ipPalette.inkSoft }}>· 1g/d</span></span><span>12 g</span>
        <span>2 Footmen <span style={{ color: ipPalette.inkSoft }}>· 3g/d</span></span><span>18 g</span>
        <span>1 Longbowman <span style={{ color: ipPalette.inkSoft }}>· 9g/d</span></span><span>27 g</span>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', borderTop: `1px solid ${ipPalette.rule}`, marginTop: 6, paddingTop: 4 }}>
        <span style={{ fontFamily: ipFontSC, letterSpacing: 1 }}>SUM</span>
        <span style={{ fontWeight: 700 }}>57 g</span>
      </div>
      <button style={{
        marginTop: 8, width: '100%', padding: '8px 0', background: `linear-gradient(180deg, ${ipPalette.wax}, ${ipPalette.waxDeep})`,
        border: `1px solid ${ipPalette.waxDeep}`, color: '#f0d8c0', fontFamily: ipFontSC, letterSpacing: 2, fontSize: 12,
        boxShadow: 'inset 0 1px 0 rgba(255,200,170,0.2)', cursor: 'pointer',
      }}>SETTLE THE BOOKS · 57 g</button>

      <IPRule />

      {/* Roster */}
      <div style={{ fontFamily: ipFontSC, fontSize: 11, letterSpacing: 1.5, marginBottom: 4 }}>THE COMPANY</div>
      {[
        { c: '⚔', n: 'Camp Followers', t: 'I · infantry', x: 4, h: '100%' },
        { c: '🏹', n: 'Poachers',       t: 'I · ranger',   x: 2, h: '78%'  },
        { c: '⚔', n: 'Footmen',        t: 'II · infantry',x: 2, h: '100%' },
        { c: '🏹', n: 'Longbowmen',    t: 'III · ranger', x: 1, h: '45%'  },
      ].map((u, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '3px 0', borderBottom: `1px dotted ${ipPalette.rule}` }}>
          <div style={{ width: 22, fontFamily: ipFontSC, fontSize: 14, textAlign: 'center', color: ipPalette.wax }}>{u.c}</div>
          <div style={{ flex: 1, fontSize: 13 }}>
            <div style={{ fontWeight: 600 }}>{u.n} <span style={{ fontFamily: ipFontSC, color: ipPalette.inkSoft, fontSize: 10 }}>×{u.x}</span></div>
            <div style={{ fontSize: 9, color: ipPalette.inkSoft, fontStyle: 'italic' }}>{u.t}</div>
          </div>
          <div style={{ width: 70 }}>
            <div style={{ height: 6, background: ipPalette.paperDeep, border: `1px solid ${ipPalette.rule}` }}>
              <div style={{ height: '100%', width: u.h, background: u.h === '100%' ? ipPalette.inkSoft : ipPalette.wax }} />
            </div>
          </div>
        </div>
      ))}

      <IPRule />

      {/* Standing footer */}
      <div style={{ fontFamily: ipFontSC, fontSize: 11, letterSpacing: 1.5 }}>STANDINGS · ASHFIELD</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 4 }}>
        <span style={{ fontSize: 11 }}>Council</span>
        <div style={{ flex: 1, height: 8, background: ipPalette.paperDeep, border: `1px solid ${ipPalette.rule}`, position: 'relative' }}>
          <div style={{ position: 'absolute', left: '50%', top: 0, bottom: 0, width: 1, background: ipPalette.ink }} />
          <div style={{ position: 'absolute', left: '50%', height: '100%', width: '18%', background: ipPalette.gold }} />
        </div>
        <span style={{ fontFamily: ipFontSC, fontSize: 11, fontWeight: 700 }}>+36</span>
      </div>
      <div style={{ fontSize: 10, fontStyle: 'italic', color: ipPalette.inkSoft, marginTop: 2 }}>
        — Friendly. The watch nods as you pass.
      </div>
    </IPFrame>
  );
}

// ---- MAP ----
function IPMap() {
  return (
    <IPFrame padTop={10}>
      {/* Header strip */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
        <span style={{ fontFamily: ipFontSC, fontSize: 11, letterSpacing: 2, color: ipPalette.inkSoft }}>MAP — ISLE OF GREYWATER</span>
        <span style={{ marginLeft: 'auto', fontSize: 10, color: ipPalette.inkSoft, fontFamily: ipFontSC }}>23, 41</span>
      </div>

      {/* Parchment-style map */}
      <div style={{
        position: 'relative', height: 300, border: `1.5px solid ${ipPalette.inkSoft}`,
        background:
          `radial-gradient(ellipse at 30% 35%, rgba(140,170,110,0.35), transparent 40%),` +
          `radial-gradient(ellipse at 70% 60%, rgba(200,170,90,0.4), transparent 50%),` +
          `radial-gradient(ellipse at 25% 75%, rgba(120,140,110,0.3), transparent 35%),` +
          ipPalette.paperDeep,
        boxShadow: 'inset 0 0 30px rgba(60,40,20,0.3)',
        overflow: 'hidden',
      }}>
        {/* Tile grid */}
        <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0, opacity: 0.25 }}>
          {Array.from({ length: 11 }).map((_, i) => <line key={'v'+i} x1={i*10} y1="0" x2={i*10} y2="100" stroke={ipPalette.inkSoft} strokeWidth="0.2" />)}
          {Array.from({ length: 11 }).map((_, i) => <line key={'h'+i} x1="0" y1={i*10} x2="100" y2={i*10} stroke={ipPalette.inkSoft} strokeWidth="0.2" />)}
        </svg>
        {/* Compass rose */}
        <div style={{ position: 'absolute', top: 8, right: 8, width: 36, height: 36, opacity: 0.5 }}>
          <svg viewBox="0 0 36 36">
            <circle cx="18" cy="18" r="16" fill="none" stroke={ipPalette.inkSoft} strokeWidth="0.5" />
            <path d="M18 4 L20 18 L18 20 L16 18 Z" fill={ipPalette.ink} />
            <path d="M18 32 L20 18 L18 16 L16 18 Z" fill={ipPalette.inkSoft} opacity="0.6" />
            <text x="18" y="3" textAnchor="middle" fontSize="3" fontFamily={ipFontSC} fill={ipPalette.ink}>N</text>
          </svg>
        </div>

        {/* Settlements */}
        <div style={{ position: 'absolute', left: '32%', top: '28%', textAlign: 'center', transform: 'translate(-50%, -50%)' }}>
          <div style={{ width: 14, height: 14, background: ipPalette.wax, border: `1.5px solid ${ipPalette.ink}`, transform: 'rotate(45deg)', margin: 'auto' }} />
          <div style={{ fontFamily: ipFont, fontStyle: 'italic', fontSize: 11, marginTop: 2 }}>Ashfield</div>
        </div>
        <div style={{ position: 'absolute', left: '70%', top: '52%', textAlign: 'center', transform: 'translate(-50%, -50%)' }}>
          <div style={{ width: 10, height: 10, background: ipPalette.inkSoft, border: `1.5px solid ${ipPalette.ink}`, transform: 'rotate(45deg)', margin: 'auto' }} />
          <div style={{ fontFamily: ipFont, fontStyle: 'italic', fontSize: 10, marginTop: 2 }}>Duneheart</div>
        </div>
        <div style={{ position: 'absolute', left: '20%', top: '78%', textAlign: 'center', transform: 'translate(-50%, -50%)' }}>
          <div style={{ width: 8, height: 8, background: ipPalette.inkSoft, transform: 'rotate(45deg)', margin: 'auto' }} />
          <div style={{ fontFamily: ipFont, fontStyle: 'italic', fontSize: 9, marginTop: 2 }}>Redstone</div>
        </div>

        {/* Player banner */}
        <div style={{ position: 'absolute', left: '48%', top: '45%', transform: 'translate(-50%, -100%)' }}>
          <svg width="22" height="32" viewBox="0 0 22 32">
            <line x1="3" y1="0" x2="3" y2="32" stroke={ipPalette.ink} strokeWidth="1.5" />
            <path d="M3 2 L20 2 L17 9 L20 16 L3 16 Z" fill={ipPalette.wax} stroke={ipPalette.ink} strokeWidth="0.8" />
            <text x="11" y="11" textAnchor="middle" fontSize="6" fontFamily={ipFontSC} fill="#f0d8c0" fontWeight="700">FC</text>
          </svg>
        </div>

        {/* Dashed travel path */}
        <svg style={{ position: 'absolute', inset: 0 }} viewBox="0 0 100 100" preserveAspectRatio="none">
          <path d="M48 45 Q 58 40, 70 52" stroke={ipPalette.ink} strokeWidth="0.4" strokeDasharray="1.2 0.8" fill="none" />
        </svg>

        {/* Marginalia */}
        <div style={{ position: 'absolute', left: 6, bottom: 4, fontFamily: ipFont, fontStyle: 'italic', fontSize: 9, color: ipPalette.inkSoft }}>
          "here be wolves" ~
        </div>
      </div>

      {/* Tile action panel */}
      <div style={{ marginTop: 8, border: `1px solid ${ipPalette.rule}`, background: 'rgba(255,250,235,0.5)', padding: 8 }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
          <div style={{ fontFamily: ipFont, fontSize: 15, fontWeight: 600 }}>Forest of Greywash <span style={{ fontFamily: ipFontSC, fontSize: 10, color: ipPalette.inkSoft }}>(24, 41)</span></div>
          <div style={{ fontFamily: ipFontSC, fontSize: 10, color: ipPalette.wax }}>cost ×1.5</div>
        </div>
        <div style={{ fontSize: 11, color: ipPalette.inkSoft, fontStyle: 'italic', marginTop: 2 }}>
          A close wood. The track winds through old growth — no banner flies here.
        </div>
        <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
          <button style={ipBtn(true)}>March 15s</button>
          <button style={ipBtn(false)}>Scout</button>
        </div>
      </div>
    </IPFrame>
  );
}

const ipBtn = (primary) => ({
  flex: 1, padding: '7px 0',
  background: primary ? `linear-gradient(180deg, ${ipPalette.wax}, ${ipPalette.waxDeep})` : 'transparent',
  border: `1px solid ${primary ? ipPalette.waxDeep : ipPalette.inkSoft}`,
  color: primary ? '#f0d8c0' : ipPalette.ink,
  fontFamily: ipFontSC, letterSpacing: 1.5, fontSize: 11, cursor: 'pointer',
});

// ---- BATTLE ----
function IPBattle() {
  return (
    <IPFrame padTop={10}>
      <div style={{ textAlign: 'center', marginBottom: 6 }}>
        <div style={{ fontFamily: ipFontSC, fontSize: 11, letterSpacing: 3, color: ipPalette.inkSoft }}>BATTLE LEDGER</div>
        <div style={{ fontFamily: ipFont, fontStyle: 'italic', fontSize: 18, fontWeight: 600, lineHeight: 1.1 }}>
          The Skirmish at Redstone Crossing
        </div>
        <div style={{ fontFamily: ipFontSC, fontSize: 10, letterSpacing: 1, color: ipPalette.wax, marginTop: 2 }}>ROUND IX of XX</div>
      </div>

      <IPRule thick />

      {/* Two columns of armies */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr auto 1fr', gap: 6, alignItems: 'start' }}>
        <div>
          <div style={{ fontFamily: ipFontSC, fontSize: 10, letterSpacing: 1.5, color: ipPalette.inkSoft }}>THINE HAND</div>
          <div style={{ fontFamily: ipFont, fontStyle: 'italic', fontSize: 14, fontWeight: 600 }}>Halric's Hand</div>
          <div style={{ fontSize: 10, color: ipPalette.wax, fontFamily: ipFontSC }}>cohesion ×1.15</div>
          {[
            { n: '⚔ 4× Camp Follower', a: 92, h: 78 },
            { n: '🏹 2× Poacher', a: 100, h: 95 },
            { n: '⚔ 2× Footmen', a: 100, h: 100 },
          ].map((u, i) => <BattleRow key={i} {...u} />)}
        </div>

        <div style={{ width: 22, display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: 18 }}>
          <div style={{ fontFamily: ipFont, fontStyle: 'italic', fontSize: 16, color: ipPalette.wax }}>×</div>
          <div style={{ width: 1, flex: 1, background: ipPalette.rule, margin: '4px 0' }} />
          <div style={{ fontFamily: ipFontSC, fontSize: 9, color: ipPalette.inkSoft }}>vs</div>
          <div style={{ width: 1, flex: 1, background: ipPalette.rule, margin: '4px 0' }} />
        </div>

        <div>
          <div style={{ fontFamily: ipFontSC, fontSize: 10, letterSpacing: 1.5, color: ipPalette.inkSoft, textAlign: 'right' }}>FOE</div>
          <div style={{ fontFamily: ipFont, fontStyle: 'italic', fontSize: 14, fontWeight: 600, textAlign: 'right' }}>The Black Flag</div>
          <div style={{ fontSize: 10, color: ipPalette.wax, fontFamily: ipFontSC, textAlign: 'right' }}>cohesion ×1.20</div>
          {[
            { n: '🐎 5× Outrider', a: 60, h: 45, right: true },
            { n: '🏹 3× Skirmisher', a: 80, h: 70, right: true },
          ].map((u, i) => <BattleRow key={i} {...u} />)}
        </div>
      </div>

      <IPRule />

      {/* Round narrative */}
      <div style={{ fontFamily: ipFontSC, fontSize: 10, letterSpacing: 1.5 }}>WRIT OF THE ROUND</div>
      <div style={{ background: 'rgba(255,250,235,0.5)', border: `1px solid ${ipPalette.rule}`, padding: 7, marginTop: 4, fontSize: 11, lineHeight: 1.45, fontStyle: 'italic' }}>
        Their Outriders broke upon our Footmen — <b style={{ color: ipPalette.wax }}>two horses fell</b>, a third unhorsed. Our Poachers loosed at thirty paces, true to mark, and a Skirmisher will not rise.
      </div>

      {/* Triangle hint */}
      <div style={{ display: 'flex', justifyContent: 'space-around', marginTop: 6, padding: 4, fontSize: 9, fontFamily: ipFontSC, color: ipPalette.inkSoft }}>
        <span>⚔→🐎 ×1.25</span>
        <span>🐎→🏹 ×1.25</span>
        <span>🏹→⚔ ×1.25</span>
      </div>

      {/* Forfeit + status */}
      <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
        <div style={{ flex: 1, padding: '6px 8px', background: 'rgba(255,250,235,0.5)', border: `1px solid ${ipPalette.rule}`, fontSize: 10, fontFamily: ipFontSC, color: ipPalette.inkSoft }}>
          Initiative: <b style={{ color: ipPalette.ink }}>Foe</b> · next round in <b style={{ color: ipPalette.wax }}>0:54</b>
        </div>
        <button style={{ ...ipBtn(false), flex: 'none', width: 110 }}>SOUND RETREAT</button>
      </div>
    </IPFrame>
  );
}

function BattleRow({ n, a, h, right }) {
  return (
    <div style={{ marginTop: 5, textAlign: right ? 'right' : 'left' }}>
      <div style={{ fontSize: 11, fontFamily: ipFont, fontWeight: 600 }}>{n}</div>
      <div style={{ display: 'flex', flexDirection: right ? 'row-reverse' : 'row', gap: 2, marginTop: 2 }}>
        <div style={{ flex: 1, height: 5, background: ipPalette.paperDeep, border: `1px solid ${ipPalette.rule}` }}>
          <div style={{ height: '100%', width: `${h}%`, background: ipPalette.wax, marginLeft: right ? 'auto' : 0 }} />
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: right ? 'row-reverse' : 'row', gap: 2, marginTop: 1 }}>
        <div style={{ flex: 1, height: 3, background: ipPalette.paperDeep, border: `1px solid ${ipPalette.rule}` }}>
          <div style={{ height: '100%', width: `${a}%`, background: ipPalette.gold, marginLeft: right ? 'auto' : 0 }} />
        </div>
      </div>
      <div style={{ fontSize: 8, fontFamily: ipFontSC, color: ipPalette.inkSoft, letterSpacing: 0.5 }}>
        hp {h}% · armor {a}%
      </div>
    </div>
  );
}

window.IronParchment = { Dashboard: IPDashboard, Map: IPMap, Battle: IPBattle };