// components.jsx — DebtLift design tokens, icons, primitives

// ─────────────────────────────────────────────────────────────
// Theme tokens — built from a palette + accent choice
// ─────────────────────────────────────────────────────────────
const DL_PALETTES = {
  brand: {
    name: 'Brand Blue',
    surface: '#1E64D6',     // primary deep — the brand
    surface2: '#3A78DD',    // raised / gradient mid
    surface3: '#4A85E0',    // hover
    onSurface: '#FFFFFF',
    onSurfaceDim: 'rgba(255,255,255,0.78)',
    onSurfaceMute: 'rgba(255,255,255,0.48)',
    canvas: '#F1F5FC',      // cool ivory-blue
    canvas2: '#E4ECFA',
    raised: '#FFFFFF',
    rule: '#D5DFF1',
    ink: '#0C2557',         // deep brand ink
    inkDim: '#42547A',
    inkMute: '#7A88A6',
    chip: '#E4ECFA',
    gradEnd: '#0C2C70',     // hero gradient bottom
    // brand-specific highlights
    brandLight: '#7AAAE9',
    brandMid: '#4A85E0',
    brandDeep: '#1E64D6',
    brandDark: '#143F8A',
  },
  navy: {
    name: 'Vault Navy',
    surface: '#0A1F44',     // primary deep
    surface2: '#102A55',    // raised
    surface3: '#193A6E',    // hover
    onSurface: '#F5F0E6',
    onSurfaceDim: 'rgba(245,240,230,0.72)',
    onSurfaceMute: 'rgba(245,240,230,0.42)',
    canvas: '#F5F0E6',      // ivory/bone
    canvas2: '#EFE7D4',
    raised: '#FFFFFF',
    rule: '#E2D8C0',
    ink: '#1A1D24',
    inkDim: '#56524A',
    inkMute: '#8C8676',
    chip: '#EFE7D4',
    gradEnd: '#060F26',
  },
  midnight: {
    name: 'Midnight',
    surface: '#161616',
    surface2: '#22221F',
    surface3: '#2E2D29',
    onSurface: '#F4EFE3',
    onSurfaceDim: 'rgba(244,239,227,0.72)',
    onSurfaceMute: 'rgba(244,239,227,0.42)',
    canvas: '#F4EFE3',
    canvas2: '#EDE6D2',
    raised: '#FFFFFF',
    rule: '#DFD5BD',
    ink: '#161616',
    inkDim: '#4E4A41',
    inkMute: '#8A8474',
    chip: '#EDE6D2',
    gradEnd: '#0A0A0A',
  },
  forest: {
    name: 'Heritage Green',
    surface: '#143028',
    surface2: '#1D413A',
    surface3: '#28564B',
    onSurface: '#F2EDDF',
    onSurfaceDim: 'rgba(242,237,223,0.72)',
    onSurfaceMute: 'rgba(242,237,223,0.42)',
    canvas: '#F2EDDF',
    canvas2: '#E9E0CB',
    raised: '#FFFFFF',
    rule: '#DBD0B7',
    ink: '#171915',
    inkDim: '#4C4A40',
    inkMute: '#867E6E',
    chip: '#E9E0CB',
    gradEnd: '#081A14',
  },
};

const DL_ACCENTS = {
  sage:   { name: 'Sage',   solid: '#2F6A4F', soft: '#DBE7DC', ink: '#173C2C' },
  copper: { name: 'Copper', solid: '#9B6B2F', soft: '#EFDFC5', ink: '#4E3414' },
  claret: { name: 'Claret', solid: '#7A2638', soft: '#EBD0D2', ink: '#3F0F1A' },
};

// status colors (constant regardless of palette)
const DL_STATUS = {
  Contacted:    { dot: '#9C9385', bg: '#EFE7D4', fg: '#6B6452' },
  Negotiating:  { dot: '#B5481D', bg: '#F5DFC9', fg: '#7A2E11' },
  'Offer Received': { dot: '#4A8BE0', bg: '#D9E5F4', fg: '#1F4A8B' },
  Settled:      { dot: '#2F6A4F', bg: '#DBE7DC', fg: '#173C2C' },
};

function useTheme(palette, accent) {
  return React.useMemo(() => ({
    ...DL_PALETTES[palette],
    accent: DL_ACCENTS[accent],
    paletteName: palette,
    accentName: accent,
  }), [palette, accent]);
}

// ─────────────────────────────────────────────────────────────
// Iconography — bespoke 1.5px line, 24x24
// ─────────────────────────────────────────────────────────────
function Icon({ name, size = 22, color = 'currentColor', strokeWidth = 1.5 }) {
  const p = { fill: 'none', stroke: color, strokeWidth, strokeLinecap: 'round', strokeLinejoin: 'round' };
  const paths = {
    home:        <><path d="M3 11l9-8 9 8v9a1 1 0 01-1 1h-5v-7h-6v7H4a1 1 0 01-1-1z" {...p}/></>,
    pulse:       <><path d="M3 12h4l2-7 4 14 2-7h6" {...p}/></>,
    pay:         <><rect x="3" y="6" width="18" height="13" rx="2" {...p}/><path d="M3 10h18M7 15h3" {...p}/></>,
    doc:         <><path d="M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8z" {...p}/><path d="M14 3v5h5M9 13h6M9 17h4" {...p}/></>,
    user:        <><circle cx="12" cy="8" r="3.5" {...p}/><path d="M5 20c1-3.5 4-5 7-5s6 1.5 7 5" {...p}/></>,
    bell:        <><path d="M6 16V11a6 6 0 1112 0v5l1.5 2h-15z" {...p}/><path d="M10 21a2 2 0 004 0" {...p}/></>,
    chevR:       <><path d="M9 5l7 7-7 7" {...p}/></>,
    chevL:       <><path d="M15 5l-7 7 7 7" {...p}/></>,
    chevD:       <><path d="M5 9l7 7 7-7" {...p}/></>,
    plus:        <><path d="M12 5v14M5 12h14" {...p}/></>,
    minus:       <><path d="M5 12h14" {...p}/></>,
    check:       <><path d="M5 12l4 4 10-10" {...p}/></>,
    x:           <><path d="M6 6l12 12M18 6L6 18" {...p}/></>,
    lock:        <><rect x="4" y="11" width="16" height="10" rx="2" {...p}/><path d="M8 11V7a4 4 0 018 0v4" {...p}/></>,
    shield:      <><path d="M12 3l8 3v5c0 5-3.5 9-8 10-4.5-1-8-5-8-10V6z" {...p}/><path d="M9 12l2 2 4-4" {...p}/></>,
    spark:       <><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M5.6 18.4l2.8-2.8M15.6 8.4l2.8-2.8" {...p}/></>,
    msg:         <><path d="M21 12c0 4.5-4 8-9 8a10 10 0 01-4-.8L3 20l1-4.5A8 8 0 0112 4c5 0 9 3.5 9 8z" {...p}/></>,
    phone:       <><path d="M5 4h4l2 5-2.5 1.5a11 11 0 005 5L15 13l5 2v4a2 2 0 01-2 2A16 16 0 013 6a2 2 0 012-2z" {...p}/></>,
    calendar:    <><rect x="3" y="5" width="18" height="16" rx="2" {...p}/><path d="M3 10h18M8 3v4M16 3v4" {...p}/></>,
    download:    <><path d="M12 4v12m0 0l-4-4m4 4l4-4M5 20h14" {...p}/></>,
    upload:      <><path d="M12 20V8m0 0l-4 4m4-4l4 4M5 4h14" {...p}/></>,
    file:        <><path d="M14 3H7a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 002-2V8z" {...p}/><path d="M14 3v5h5" {...p}/></>,
    folder:      <><path d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" {...p}/></>,
    search:      <><circle cx="11" cy="11" r="6" {...p}/><path d="M20 20l-4.5-4.5" {...p}/></>,
    gear:        <><circle cx="12" cy="12" r="3" {...p}/><path d="M19.4 15a1.7 1.7 0 00.3 1.8l.1.1a2 2 0 11-2.8 2.8l-.1-.1a1.7 1.7 0 00-1.8-.3 1.7 1.7 0 00-1 1.5V21a2 2 0 11-4 0v-.1a1.7 1.7 0 00-1.1-1.5 1.7 1.7 0 00-1.8.3l-.1.1a2 2 0 11-2.8-2.8l.1-.1a1.7 1.7 0 00.3-1.8 1.7 1.7 0 00-1.5-1H3a2 2 0 110-4h.1A1.7 1.7 0 004.6 9a1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3H9a1.7 1.7 0 001-1.5V3a2 2 0 114 0v.1a1.7 1.7 0 001 1.5 1.7 1.7 0 001.8-.3l.1-.1a2 2 0 112.8 2.8l-.1.1a1.7 1.7 0 00-.3 1.8V9a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z" {...p}/></>,
    face:        <><path d="M9 4H5a1 1 0 00-1 1v4M15 4h4a1 1 0 011 1v4M9 20H5a1 1 0 01-1-1v-4M15 20h4a1 1 0 001-1v-4" {...p}/><path d="M9 10v1M15 10v1M9 15c1 1 2 1.5 3 1.5s2-.5 3-1.5M12 9v3.5h-1" {...p}/></>,
    bank:        <><path d="M3 9l9-5 9 5M5 9v9M19 9v9M9 9v9M15 9v9M3 21h18" {...p}/></>,
    info:        <><circle cx="12" cy="12" r="9" {...p}/><path d="M12 11v5M12 8h.01" {...p}/></>,
    arrowUp:     <><path d="M12 19V5M5 12l7-7 7 7" {...p}/></>,
    arrowDR:     <><path d="M7 7l10 10M17 7v10H7" {...p}/></>,
    star:        <><path d="M12 3l2.7 6 6.3.5-4.8 4.2 1.5 6.3L12 17l-5.7 3 1.5-6.3L3 9.5l6.3-.5z" {...p}/></>,
    eye:         <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" {...p}/><circle cx="12" cy="12" r="3" {...p}/></>,
    eyeOff:      <><path d="M3 3l18 18M10.6 10.6a3 3 0 004 4M9 5.5c1-.3 2-.5 3-.5 6.5 0 10 7 10 7a16 16 0 01-3.4 4.3M6.3 6.3A16 16 0 002 12s3.5 7 10 7c1.5 0 2.8-.3 4-.8" {...p}/></>,
    moreH:       <><circle cx="5" cy="12" r="1.6" fill={color} stroke="none"/><circle cx="12" cy="12" r="1.6" fill={color} stroke="none"/><circle cx="19" cy="12" r="1.6" fill={color} stroke="none"/></>,
    contract:    <><path d="M6 3h9l4 4v14a1 1 0 01-1 1H6a1 1 0 01-1-1V4a1 1 0 011-1z" {...p}/><path d="M15 3v4h4M9 12h6M9 16h4" {...p}/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" style={{ display: 'block', flexShrink: 0 }}>
      {paths[name] || null}
    </svg>
  );
}

// ─────────────────────────────────────────────────────────────
// Primitives
// ─────────────────────────────────────────────────────────────

// status pill
function StatusPill({ status, theme }) {
  const s = DL_STATUS[status] || DL_STATUS.Contacted;
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      background: s.bg, color: s.fg,
      fontSize: 11, fontWeight: 600, letterSpacing: 0.2,
      padding: '4px 9px', borderRadius: 999, lineHeight: 1,
      whiteSpace: 'nowrap', flexShrink: 0,
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 99, background: s.dot }}/>
      {status}
    </span>
  );
}

// Card surface (on ivory canvas)
function Card({ children, theme, pad = 18, style }) {
  return (
    <div style={{
      background: theme.raised,
      border: `1px solid ${theme.rule}`,
      borderRadius: 18,
      padding: pad,
      boxShadow: '0 1px 0 rgba(170,150,110,0.06), 0 1px 2px rgba(20,18,12,0.02)',
      ...style,
    }}>{children}</div>
  );
}

// Section header — small caps eyebrow
function SectionHeader({ children, action, theme }) {
  return (
    <div style={{
      display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
      padding: '0 4px 10px',
    }}>
      <div style={{
        fontSize: 11, fontWeight: 600, letterSpacing: 1.6, textTransform: 'uppercase',
        color: theme.inkMute,
      }}>{children}</div>
      {action && <div style={{ fontSize: 13, color: theme.accent.solid, fontWeight: 500 }}>{action}</div>}
    </div>
  );
}

// quick-action button (row of square tiles)
function QuickAction({ icon, label, onClick, theme }) {
  return (
    <button onClick={onClick} style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
      padding: '0', flex: 1, minWidth: 0,
    }}>
      <div style={{
        width: 50, height: 50, borderRadius: 16,
        background: theme.canvas2,
        border: `1px solid ${theme.rule}`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: theme.ink,
      }}>
        <Icon name={icon} size={22} color={theme.ink}/>
      </div>
      <span style={{ fontSize: 11.5, fontWeight: 500, color: theme.ink, letterSpacing: 0.1 }}>{label}</span>
    </button>
  );
}

// nav row (settings list row)
function NavRow({ left, title, sub, right, onClick, theme, last }) {
  return (
    <button onClick={onClick} style={{
      width: '100%', display: 'flex', alignItems: 'center', gap: 14,
      padding: '14px 16px', textAlign: 'left',
      borderBottom: last ? 'none' : `1px solid ${theme.rule}`,
    }}>
      {left && <div style={{ flexShrink: 0 }}>{left}</div>}
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ fontSize: 14.5, fontWeight: 500, color: theme.ink }}>{title}</div>
        {sub && <div style={{ fontSize: 12, color: theme.inkMute, marginTop: 2 }}>{sub}</div>}
      </div>
      {right || <Icon name="chevR" size={16} color={theme.inkMute}/>}
    </button>
  );
}

// big currency display (serif optional)
function Currency({ value, size = 44, serif = true, theme, color, leadingSign = true }) {
  const formatted = value.toLocaleString('en-US', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
  return (
    <span className={`tnum ${serif ? 'serif' : ''}`} style={{
      fontSize: size, lineHeight: 1, fontWeight: serif ? 400 : 600,
      letterSpacing: serif ? -0.5 : -1.2,
      color: color || theme.ink,
    }}>
      {leadingSign && <span style={{ opacity: 0.55, fontWeight: serif ? 300 : 500, marginRight: 2 }}>$</span>}
      {formatted}
    </span>
  );
}

// progress bar (svg, hairline)
function ProgressBar({ value, theme, color, height = 4 }) {
  return (
    <div style={{
      width: '100%', height, borderRadius: 99,
      background: 'rgba(245,240,230,0.16)',
      overflow: 'hidden',
    }}>
      <div style={{
        width: `${Math.max(0, Math.min(100, value))}%`, height: '100%',
        background: color || theme.accent.solid, borderRadius: 99,
        transition: 'width 600ms cubic-bezier(.2,.7,.2,1)',
      }}/>
    </div>
  );
}

// expose to global window for cross-file Babel
Object.assign(window, {
  DL_PALETTES, DL_ACCENTS, DL_STATUS, useTheme,
  Icon, StatusPill, Card, SectionHeader, QuickAction, NavRow, Currency, ProgressBar,
});