/* ============================================================================
   dash-core.jsx  —  Shared palette, helpers, UI primitives, icons
   Exported to window for the other dashboard babel files to consume.
============================================================================ */
(function(){
const { useState, useEffect, useRef } = React;

function useIsMobile(bp=768){
  const [m,setM]=useState(()=>window.innerWidth<bp);
  useEffect(()=>{
    const fn=()=>setM(window.innerWidth<bp);
    window.addEventListener('resize',fn,{passive:true});
    return ()=>window.removeEventListener('resize',fn);
  },[]);
  return m;
}

const C = {
  dark:'oklch(0.13 0.02 222)', dark2:'oklch(0.17 0.02 222)', dark3:'oklch(0.21 0.025 222)', dark4:'oklch(0.26 0.025 222)',
  teal:'oklch(0.60 0.14 196)', tealL:'oklch(0.78 0.11 196)', tealD:'oklch(0.38 0.12 196)', tealBg:'oklch(0.22 0.06 196)',
  green:'oklch(0.70 0.15 150)', greenBg:'oklch(0.22 0.07 150)', amber:'oklch(0.78 0.14 88)', amberBg:'oklch(0.22 0.06 88)',
  red:'oklch(0.65 0.18 20)', redBg:'oklch(0.22 0.07 20)', muted:'oklch(0.50 0.015 222)', white:'oklch(0.97 0.006 88)',
};

/* ---- formatting helpers ---- */
const fmt$ = v => '$' + Number(v||0).toFixed(2);
const dateStr = d => { try { return new Date(d+'T12:00').toLocaleDateString('es',{month:'short',day:'numeric',year:'numeric'}); } catch(e){ return d; } };
const statusLabel = s => ({in_progress:'En reparación',ready:'Listo',completed:'Entregado',waiting:'En espera',cancelled:'Cancelado'}[s]||s);
const statusColor = s => ({in_progress:C.teal,ready:C.green,completed:C.muted,waiting:C.amber,cancelled:C.red}[s]||C.muted);
const calc = o => CheoDB.calcOrder(o);

/* ---- UI primitives ---- */
const Btn = ({children,onClick,variant='primary',small,style={},...rest}) => {
  const base={border:'none',borderRadius:7,fontWeight:700,cursor:'pointer',letterSpacing:'0.03em',transition:'all .2s',display:'inline-flex',alignItems:'center',justifyContent:'center',gap:7,...style};
  const pad=small?'6px 14px':'10px 20px';
  const fs=small?'0.78rem':'0.875rem';
  const map={
    primary:{background:C.teal,color:'#fff'},
    ghost:{background:'transparent',border:`1px solid ${C.dark4}`,color:C.muted},
    danger:{background:C.redBg,color:C.red,border:`1px solid ${C.red}55`},
    success:{background:C.greenBg,color:C.green,border:`1px solid ${C.green}55`},
  };
  return <button onClick={onClick} {...rest} style={{...base,...map[variant],padding:pad,fontSize:fs}}>{children}</button>;
};
const Tag = ({label,color,style={}}) => <span style={{background:`${color}22`,color,border:`1px solid ${color}55`,borderRadius:20,padding:'3px 11px',fontSize:'0.72rem',fontWeight:700,letterSpacing:'0.04em',whiteSpace:'nowrap',...style}}>{label}</span>;
const Card = ({children,style={},...rest}) => <div {...rest} style={{background:C.dark2,border:`1px solid ${C.dark3}`,borderRadius:14,padding:'1.5rem',marginBottom:'1rem',...style}}>{children}</div>;
const Label = ({children,style={}}) => <div style={{fontSize:'0.68rem',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:C.muted,marginBottom:5,...style}}>{children}</div>;
const Row = ({children,gap=12,style={}}) => <div style={{display:'flex',gap,alignItems:'center',...style}}>{children}</div>;
const Grid = ({cols,mCols,gap=12,children,style={}}) => {
  const mob=useIsMobile();
  return <div style={{display:'grid',gridTemplateColumns:(mob&&mCols)?mCols:cols,gap,...style}}>{children}</div>;
};
const Stat = ({label,value,color}) => (
  <div style={{background:C.dark2,border:`1px solid ${C.dark3}`,borderRadius:12,padding:'1.1rem 1.4rem'}}>
    <div style={{fontSize:'0.7rem',fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:C.muted,marginBottom:6}}>{label}</div>
    <div style={{fontFamily:"'Barlow Condensed',sans-serif",fontWeight:800,fontSize:'1.9rem',color:color||C.white,lineHeight:1}}>{value}</div>
  </div>
);
const H2 = ({children,style={}}) => <h2 style={{fontFamily:"'Barlow Condensed',sans-serif",fontWeight:800,fontSize:'1.7rem',color:C.white,...style}}>{children}</h2>;
const H3 = ({children,style={}}) => <h3 style={{fontFamily:"'Barlow Condensed',sans-serif",fontWeight:700,fontSize:'1.2rem',color:C.white,...style}}>{children}</h3>;

/* ---- line icons ---- */
const Icon = ({name,size=18,stroke=2}) => {
  const p = {width:size,height:size,viewBox:'0 0 24 24',fill:'none',stroke:'currentColor',strokeWidth:stroke,strokeLinecap:'round',strokeLinejoin:'round'};
  const paths = {
    orders:<g><path d="M9 2h6a1 1 0 0 1 1 1v1h2a1 1 0 0 1 1 1v15a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h2V3a1 1 0 0 1 1-1z"/><path d="M9 12l2 2 4-4"/></g>,
    calendar:<g><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"/></g>,
    users:<g><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></g>,
    money:<g><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></g>,
    box:<g><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></g>,
    gear:<g><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></g>,
    plus:<g><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></g>,
    phone:<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 11.9a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 8.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z"/>,
    chat:<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>,
    print:<g><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></g>,
    camera:<g><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></g>,
    back:<polyline points="15 18 9 12 15 6"/>,
    check:<polyline points="20 6 9 17 4 12"/>,
    x:<g><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></g>,
    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"/>,
    car:<g><rect x="1" y="3" width="15" height="13" rx="1"/><path d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></g>,
    logout:<g><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></g>,
  };
  return <svg {...p}>{paths[name]||null}</svg>;
};

Object.assign(window, { C, fmt$, dateStr, statusLabel, statusColor, calc, Btn, Tag, Card, Label, Row, Grid, Stat, H2, H3, Icon, useIsMobile });
})();