// Shared UI primitives for Brisas do Lago

const { useState, useEffect, useRef, useMemo, createContext, useContext } = React;

// ─── Icons (lineart) ─────────────────────────────────────────────
const Icon = ({name, size=18, stroke=2}) => {
  const paths = {
    map: <><path d="M9 19l-6 2V5l6-2 6 2 6-2v16l-6 2-6-2z"/><line x1="9" y1="3" x2="9" y2="19"/><line x1="15" y1="5" x2="15" y2="21"/></>,
    home: <><path d="M3 11l9-8 9 8v10a1 1 0 01-1 1h-5v-7H10v7H5a1 1 0 01-1-1z"/></>,
    user: <><circle cx="12" cy="7" r="4"/><path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/></>,
    users: <><circle cx="9" cy="7" r="4"/><path d="M3 21c0-3.3 2.7-6 6-6s6 2.7 6 6"/><circle cx="17" cy="6" r="3"/><path d="M21 21c0-2.8-2-5-5-5"/></>,
    plus: <><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></>,
    minus: <><line x1="5" y1="12" x2="19" y2="12"/></>,
    check: <><polyline points="20 6 9 17 4 12"/></>,
    x: <><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></>,
    chevR: <><polyline points="9 18 15 12 9 6"/></>,
    chevL: <><polyline points="15 18 9 12 15 6"/></>,
    chevD: <><polyline points="6 9 12 15 18 9"/></>,
    chevU: <><polyline points="18 15 12 9 6 15"/></>,
    bell: <><path d="M18 8a6 6 0 00-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 01-3.4 0"/></>,
    search: <><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></>,
    filter: <><polygon points="22 3 2 3 10 12.5 10 19 14 21 14 12.5 22 3"/></>,
    file: <><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></>,
    creditCard: <><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></>,
    qr: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><line x1="14" y1="14" x2="14" y2="21"/><line x1="17" y1="14" x2="17" y2="17"/><line x1="20" y1="17" x2="20" y2="21"/><line x1="14" y1="17" x2="17" y2="17"/></>,
    download: <><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></>,
    share: <><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.6" y1="13.5" x2="15.4" y2="17.5"/><line x1="15.4" y1="6.5" x2="8.6" y2="10.5"/></>,
    heart: <><path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/></>,
    pin: <><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></>,
    ruler: <><path d="M2 14l10-10 8 8-10 10z"/><line x1="6" y1="10" x2="8" y2="12"/><line x1="9" y1="7" x2="11" y2="9"/><line x1="12" y1="4" x2="14" y2="6"/><line x1="3" y1="13" x2="5" y2="15"/></>,
    sun: <><circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M5 12H3M21 12h-2M6 6l1.4 1.4M16.6 16.6L18 18M6 18l1.4-1.4M16.6 7.4L18 6"/></>,
    moon: <><path d="M21 12.8A9 9 0 0111.2 3a7 7 0 109.8 9.8z"/></>,
    wave: <><path d="M2 12c2-3 4-3 6 0s4 3 6 0 4-3 6 0"/><path d="M2 17c2-3 4-3 6 0s4 3 6 0 4-3 6 0"/></>,
    tree: <><path d="M12 22v-7"/><path d="M9 9a4 4 0 116-0 4 4 0 11-2 4 4 4 0 11-6-1 4 4 0 112-3z"/></>,
    dashboard: <><rect x="3" y="3" width="7" height="9"/><rect x="14" y="3" width="7" height="5"/><rect x="14" y="12" width="7" height="9"/><rect x="3" y="16" width="7" height="5"/></>,
    layers: <><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></>,
    funnel: <><path d="M3 4h18l-7 9v6l-4 2v-8z"/></>,
    briefcase: <><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 21V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v16"/></>,
    invoice: <><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="14" y2="17"/></>,
    coin: <><circle cx="12" cy="12" r="9"/><path d="M9 9h4a2 2 0 010 4h-4a2 2 0 000 4h6"/></>,
    settings: <><circle cx="12" cy="12" r="3"/><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.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 001.5-1 1.7 1.7 0 00-.3-1.8l-.1-.1a2 2 0 112.8-2.8l.1.1a1.7 1.7 0 001.8.3h0a1.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.8v0a1.7 1.7 0 001.5 1H21a2 2 0 110 4h-.1a1.7 1.7 0 00-1.5 1z"/></>,
    sparkle: <><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M5.6 18.4l2.1-2.1M16.3 7.7l2.1-2.1"/></>,
    pix: <><path d="M19.05 4.95L12 12l-7.05-7.05L12 0z"/></>,
    edit: <><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 113 3L12 15l-4 1 1-4z"/></>,
    trash: <><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></>,
    upload: <><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></>,
    arrowR: <><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></>,
    arrowL: <><line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 19"/></>,
    arrowU: <><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></>,
    arrowD: <><line x1="12" y1="5" x2="12" y2="19"/><polyline points="19 12 12 19 5 12"/></>,
    eye: <><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></>,
    grid: <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></>,
    list: <><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></>,
    calendar: <><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></>,
    clock: <><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></>,
    phone: <><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.37 1.9.72 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0122 16.92z"/></>,
    mail: <><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></>,
    warn: <><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></>,
    info: <><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></>,
    star: <><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></>,
    logout: <><path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></>,
    construction: <><path d="M2 20h20"/><path d="M14 4v6a2 2 0 002 2h2a2 2 0 002-2V4"/><path d="M4 4v6a2 2 0 002 2h2a2 2 0 002-2V4"/><path d="M14 14h6v6h-6z"/></>,
  };
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none"
         stroke="currentColor" strokeWidth={stroke} strokeLinecap="round" strokeLinejoin="round"
         style={{display:'inline-block', flexShrink:0}}>
      {paths[name] || null}
    </svg>
  );
};

// ─── Brand mark ─────────────────────────────────────────────
const BrandMark = ({size=38, dark=false}) => (
  <div style={{
    width:size, height:size, borderRadius:'50%',
    background: dark ? '#F3EDE0' : '#2D4F3C',
    display:'flex', alignItems:'center', justifyContent:'center',
    overflow:'hidden', position:'relative'
  }}>
    <svg width={size * 0.6} height={size * 0.6} viewBox="0 0 24 24" fill="none">
      <path d="M2 14c3-3 5-3 7 0s5 3 7 0 4-3 6 0" stroke={dark ? '#2D4F3C' : '#F3EDE0'} strokeWidth="2" strokeLinecap="round"/>
      <path d="M2 18c3-3 5-3 7 0s5 3 7 0 4-3 6 0" stroke={dark ? '#2D4F3C' : '#F3EDE0'} strokeWidth="2" strokeLinecap="round" opacity="0.6"/>
      <circle cx="12" cy="7" r="2" fill={dark ? '#C97B4A' : '#C97B4A'}/>
    </svg>
  </div>
);

// ─── Status pill ────────────────────────────────────────────
const StatusPill = ({status, size='md'}) => {
  const colors = {
    disponivel: { bg: '#FBF6EC', fg: '#1A2E2A', bd: '#2D4F3C', label: 'Disponível' },
    reservado:  { bg: '#F5DCC6', fg: '#5C2F12', bd: '#A8632F', label: 'Reservado' },
    negociacao: { bg: '#D7E5EC', fg: '#1F3D49', bd: '#3B6B7E', label: 'Em negociação' },
    vendido:    { bg: '#DDE3DD', fg: '#3A4640', bd: '#6E7B72', label: 'Vendido' },
    adimplente:    { bg: '#E0EDDF', fg: '#2D4F3C', bd: '#4F7A52', label: 'Adimplente' },
    atraso:        { bg: '#F5DCC6', fg: '#8B4513', bd: '#C97B4A', label: 'Em atraso' },
    inadimplente:  { bg: '#F4CFC9', fg: '#8B2A1F', bd: '#B84A3A', label: 'Inadimplente' },
  };
  const c = colors[status] || colors.disponivel;
  return (
    <span style={{
      display:'inline-flex', alignItems:'center', gap:6,
      padding: size === 'sm' ? '3px 9px' : '5px 12px',
      borderRadius: 100,
      fontSize: size === 'sm' ? 10.5 : 11.5,
      fontWeight: 600,
      background: c.bg, color: c.fg,
      border: `1px solid ${c.bd}33`,
      letterSpacing: 0.2,
      whiteSpace: 'nowrap',
    }}>
      <span style={{width:6, height:6, borderRadius:'50%', background:c.bd}}/>
      {c.label}
    </span>
  );
};

// ─── KPI Card ───────────────────────────────────────────────
const KpiCard = ({label, value, sub, trend, icon, color='var(--green)'}) => (
  <div style={{
    background: 'var(--bg-card)',
    border: '1px solid var(--line-soft)',
    borderRadius: 14,
    padding: '18px 20px',
    display: 'flex', flexDirection: 'column', gap: 10,
    position: 'relative', overflow: 'hidden'
  }}>
    {icon && <div style={{
      position:'absolute', top:14, right:14, color: color, opacity: 0.18
    }}><Icon name={icon} size={32} stroke={1.8}/></div>}
    <div className="eyebrow" style={{fontSize:10.5}}>{label}</div>
    <div className="display" style={{fontSize: 32, color: 'var(--ink)', lineHeight:1, fontWeight: 500}}>{value}</div>
    {sub && <div style={{fontSize:12, color:'var(--ink-soft)'}}>{sub}</div>}
    {trend && (
      <div style={{
        display:'inline-flex', gap:4, fontSize:11, fontWeight:600,
        color: trend.dir === 'up' ? 'var(--success)' : 'var(--danger)'
      }}>
        <Icon name={trend.dir === 'up' ? 'arrowU' : 'arrowD'} size={12}/>
        {trend.value}
      </div>
    )}
  </div>
);

// ─── Modal ──────────────────────────────────────────────────
const Modal = ({open, onClose, children, width=480}) => {
  useEffect(() => {
    if (!open) return;
    const h = (e) => { if (e.key === 'Escape') onClose?.(); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [open, onClose]);
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position:'fixed', inset:0, background:'rgba(26, 38, 32, 0.5)',
      backdropFilter:'blur(4px)', zIndex:100,
      display:'flex', alignItems:'center', justifyContent:'center', padding:20,
      animation:'fadeIn .15s ease-out'
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background:'var(--bg-card)', borderRadius: 18, width:'100%', maxWidth: width,
        maxHeight:'90vh', overflow:'auto', boxShadow:'var(--shadow-3)',
        animation: 'fadeIn .2s ease-out'
      }}>
        {children}
      </div>
    </div>
  );
};

// ─── Number formatters ─────────────────────────────────────
const fmtBRL = (v) => v.toLocaleString('pt-BR', {style:'currency', currency:'BRL', maximumFractionDigits: 0});
const fmtBRLcents = (v) => v.toLocaleString('pt-BR', {style:'currency', currency:'BRL'});

// ─── Photo placeholders (organic generated SVGs) ──────────
const PhotoPlaceholder = ({type='lago', height=200, label}) => {
  const presets = {
    lago: {
      bg: ['#5B8FA8', '#7AA1AF', '#A6C2CF'],
      shapes: 'water'
    },
    aerea: {
      bg: ['#9CB58E', '#7A9070', '#5E7558'],
      shapes: 'forest'
    },
    portaria: {
      bg: ['#8B7355', '#A8896B', '#D9C7A8'],
      shapes: 'building'
    },
    pier: {
      bg: ['#5B8FA8', '#A6C2CF', '#D9C7A8'],
      shapes: 'pier'
    },
  };
  const p = presets[type] || presets.lago;
  return (
    <div style={{
      position:'relative', width:'100%', height, borderRadius: 14,
      overflow:'hidden',
      background: `linear-gradient(140deg, ${p.bg[0]}, ${p.bg[1]}, ${p.bg[2]})`
    }}>
      <svg width="100%" height="100%" viewBox="0 0 400 200" preserveAspectRatio="none" style={{position:'absolute', inset:0}}>
        {p.shapes === 'water' && (
          <>
            <path d="M0 140 Q100 130, 200 140 T400 140 L400 200 L0 200 Z" fill="rgba(255,255,255,0.15)"/>
            <path d="M0 160 Q100 150, 200 160 T400 160 L400 200 L0 200 Z" fill="rgba(255,255,255,0.2)"/>
            <circle cx="320" cy="40" r="22" fill="rgba(255,243,200,0.5)"/>
            <path d="M0 100 Q120 80, 240 100 T400 100" stroke="rgba(255,255,255,0.3)" strokeWidth="1" fill="none"/>
          </>
        )}
        {p.shapes === 'forest' && (
          <>
            <circle cx="60" cy="120" r="35" fill="rgba(46,79,60,0.5)"/>
            <circle cx="120" cy="100" r="40" fill="rgba(46,79,60,0.6)"/>
            <circle cx="200" cy="130" r="45" fill="rgba(46,79,60,0.5)"/>
            <circle cx="280" cy="110" r="38" fill="rgba(46,79,60,0.55)"/>
            <circle cx="350" cy="130" r="42" fill="rgba(46,79,60,0.5)"/>
            <rect x="0" y="170" width="400" height="30" fill="rgba(94,117,88,0.4)"/>
          </>
        )}
        {p.shapes === 'building' && (
          <>
            <rect x="120" y="80" width="160" height="100" fill="rgba(243,237,224,0.7)"/>
            <polygon points="100 80 200 30 300 80" fill="rgba(45,79,60,0.8)"/>
            <rect x="180" y="130" width="40" height="50" fill="rgba(45,79,60,0.6)"/>
          </>
        )}
        {p.shapes === 'pier' && (
          <>
            <rect x="180" y="80" width="20" height="100" fill="rgba(139,111,71,0.8)"/>
            <rect x="160" y="160" width="60" height="14" fill="rgba(139,111,71,0.9)"/>
            <path d="M0 140 Q100 130, 200 140 T400 140 L400 200 L0 200 Z" fill="rgba(255,255,255,0.2)"/>
          </>
        )}
      </svg>
      {label && (
        <div style={{
          position:'absolute', bottom:14, left:14,
          color:'#F3EDE0', fontWeight:600, fontSize:12,
          textShadow:'0 2px 4px rgba(0,0,0,0.3)',
          letterSpacing:0.5
        }}>{label}</div>
      )}
    </div>
  );
};

// Section header (eyebrow + display title + sub)
const SectionHeader = ({eyebrow, title, sub, action}) => (
  <div style={{
    display:'flex', alignItems:'flex-end', justifyContent:'space-between', gap: 20,
    marginBottom: 20, paddingBottom: 16,
    borderBottom: '1px solid var(--line-soft)',
  }}>
    <div>
      {eyebrow && <div className="eyebrow" style={{marginBottom: 6}}>{eyebrow}</div>}
      <div className="display" style={{fontSize: 32, color:'var(--green-deep)', fontWeight: 500}}>{title}</div>
      {sub && <div style={{color:'var(--ink-soft)', marginTop:6, maxWidth: 560}}>{sub}</div>}
    </div>
    {action}
  </div>
);

Object.assign(window, {
  Icon, BrandMark, StatusPill, KpiCard, Modal,
  PhotoPlaceholder, SectionHeader, fmtBRL, fmtBRLcents,
});
