// utils.jsx — shared icons + helpers for Sao Mai Hotel UI

// ─── Icons (Material-style line icons) ──────────────────────
const Icon = ({ name, size = 20, stroke = 1.8, ...rest }) => {
  const s = { width: size, height: size, display: 'inline-block', flexShrink: 0, ...rest.style };
  const common = {
    width: size,
    height: size,
    viewBox: '0 0 24 24',
    fill: 'none',
    stroke: 'currentColor',
    strokeWidth: stroke,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
    ...rest,
    style: s,
  };
  const paths = {
    menu: <><path d="M3 7h18M3 12h18M3 17h18"/></>,
    calendar: <><rect x="3.5" y="5" width="17" height="15" rx="2"/><path d="M8 3v4M16 3v4M3.5 10h17"/></>,
    timeline: <><path d="M4 6h6M4 12h12M4 18h8"/><circle cx="13" cy="6" r="1.5"/><circle cx="19" cy="12" r="1.5"/><circle cx="15" cy="18" r="1.5"/></>,
    list: <><path d="M8 6h13M8 12h13M8 18h13"/><circle cx="4" cy="6" r="1"/><circle cx="4" cy="12" r="1"/><circle cx="4" cy="18" r="1"/></>,
    invoice: <><path d="M6 3h10l3 3v15l-2-1.5L15 21l-2-1.5L11 21l-2-1.5L7 21l-1-1V3z"/><path d="M9 9h7M9 13h7M9 17h4"/></>,
    bed: <><path d="M3 8v12M3 14h18M21 20v-6a3 3 0 0 0-3-3H8v3"/><circle cx="6.5" cy="11.5" r="2"/></>,
    chart: <><path d="M4 19V5M4 19h16"/><path d="M8 15v-3M12 15V8M16 15v-5"/></>,
    chevron_left: <path d="M15 6l-6 6 6 6"/>,
    chevron_right: <path d="M9 6l6 6-6 6"/>,
    chevron_down: <path d="M6 9l6 6 6-6"/>,
    plus: <><path d="M12 5v14M5 12h14"/></>,
    minus: <path d="M5 12h14"/>,
    x: <><path d="M6 6l12 12M18 6L6 18"/></>,
    search: <><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></>,
    filter: <path d="M4 4h16l-6 8v6l-4 2v-8z"/>,
    settings: <><circle cx="12" cy="12" r="3"/><path d="M19 12a7 7 0 0 0-.1-1.2l2.1-1.6-2-3.4-2.5.8a7 7 0 0 0-2-1.2l-.4-2.6h-4l-.4 2.6a7 7 0 0 0-2 1.2l-2.5-.8-2 3.4 2.1 1.6a7 7 0 0 0 0 2.4l-2.1 1.6 2 3.4 2.5-.8a7 7 0 0 0 2 1.2l.4 2.6h4l.4-2.6a7 7 0 0 0 2-1.2l2.5.8 2-3.4-2.1-1.6c.07-.4.1-.8.1-1.2z"/></>,
    user: <><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></>,
    users: <><circle cx="9" cy="8" r="4"/><path d="M2 21a7 7 0 0 1 14 0"/><path d="M16 4a4 4 0 0 1 0 8M22 21a7 7 0 0 0-5-6.7"/></>,
    phone: <path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z"/>,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></>,
    location: <><path d="M12 22s7-7 7-12a7 7 0 0 0-14 0c0 5 7 12 7 12z"/><circle cx="12" cy="10" r="2.5"/></>,
    clock: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    moon: <path d="M21 13A9 9 0 1 1 11 3a7 7 0 0 0 10 10z"/>,
    sun: <><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4 12H2M22 12h-2M5 5l1.5 1.5M17.5 17.5L19 19M5 19l1.5-1.5M17.5 6.5L19 5"/></>,
    print: <><path d="M6 9V3h12v6M6 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"/></>,
    download: <><path d="M12 3v12M7 10l5 5 5-5"/><path d="M4 19h16"/></>,
    edit: <><path d="M4 20h4l11-11-4-4L4 16v4z"/><path d="M14 5l4 4"/></>,
    trash: <><path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/></>,
    check: <path d="M5 13l4 4 10-12"/>,
    check_circle: <><circle cx="12" cy="12" r="9"/><path d="M8 12l3 3 5-6"/></>,
    arrow_right: <><path d="M5 12h14M13 6l6 6-6 6"/></>,
    sparkle: <><path d="M12 3v6M12 15v6M3 12h6M15 12h6M5.6 5.6l4.2 4.2M14.2 14.2l4.2 4.2M5.6 18.4l4.2-4.2M14.2 9.8l4.2-4.2"/></>,
    bell: <><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9z"/><path d="M10 21a2 2 0 0 0 4 0"/></>,
    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"/><path d="M14 14h3v3h-3zM20 14v3M14 20h3M17 17v4M20 17h1M21 20h-1"/></>,
    refresh: <><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/></>,
    sidebar: <><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M9 4v16"/></>,
    cash: <><rect x="2" y="6" width="20" height="12" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M6 9v0M18 15v0"/></>,
    card: <><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M2 10h20M6 15h3"/></>,
    bank: <><path d="M3 9l9-5 9 5M5 9v9M19 9v9M9 9v9M15 9v9M3 18h18M3 21h18"/></>,
    later: <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/><path d="M5 5l-1 1"/></>,
    info: <><circle cx="12" cy="12" r="9"/><path d="M12 8v0M11 12h1v5h1"/></>,
    star: <path d="M12 3l2.6 5.5 6 .9-4.4 4.3 1 6-5.2-2.8L6.8 19.7l1-6L3.4 9.4l6-.9z"/>,
  };
  return <svg {...common}>{paths[name] || null}</svg>;
};

// ─── Date helpers ────────────────────────────────────────────
const DOW_VN = ['CN', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7'];
const DOW_VN_LONG = ['Chủ nhật', 'Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy'];
const MONTH_VN = ['Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4', 'Tháng 5', 'Tháng 6', 'Tháng 7', 'Tháng 8', 'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12'];

const sameDay = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
const startOfDay = (d) => { const x = new Date(d); x.setHours(0,0,0,0); return x; };
const daysBetween = (a, b) => Math.round((startOfDay(b) - startOfDay(a)) / 86400000);
const formatDateVN = (d) => `${DOW_VN_LONG[d.getDay()]}, ${d.getDate()} ${MONTH_VN[d.getMonth()]} ${d.getFullYear()}`;
const formatDateShort = (d) => `${String(d.getDate()).padStart(2,'0')}/${String(d.getMonth()+1).padStart(2,'0')}/${d.getFullYear()}`;
const formatRange = (a, b) => {
  if (a.getMonth() === b.getMonth() && a.getFullYear() === b.getFullYear()) {
    return `${MONTH_VN[a.getMonth()]} ${a.getFullYear()}`;
  }
  return `${MONTH_VN[a.getMonth()]} – ${MONTH_VN[b.getMonth()]} ${b.getFullYear()}`;
};

// ─── Currency ────────────────────────────────────────────────
const VND = (n) => {
  if (n == null) return '—';
  return new Intl.NumberFormat('de-DE').format(Math.round(n)) + 'đ';
};
const VNDshort = (n) => {
  if (n == null) return '—';
  if (n >= 1_000_000) return (n / 1_000_000).toFixed(n >= 10_000_000 ? 0 : 1).replace(/\.0$/, '') + 'tr';
  if (n >= 1_000) return Math.round(n / 1_000) + 'k';
  return String(n);
};

// ─── Misc ────────────────────────────────────────────────────
const initials = (name) => {
  if (!name) return '?';
  const parts = name.trim().split(/\s+/);
  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
  return (parts[parts.length - 2][0] + parts[parts.length - 1][0]).toUpperCase();
};

const findRoom = (rooms, id) => rooms.find(r => r.id === id);
const findGuest = (guests, id) => guests.find(g => g.id === id);
const findService = (catalog, id) => catalog.find(s => s.id === id);
const findMenuItem = (menu, id) => menu.find(m => m.id === id);

const computeBookingTotal = (booking, rooms, catalog, menu) => {
  const room = findRoom(rooms, booking.roomId);
  const nights = Math.max(1, daysBetween(booking.checkIn, booking.checkOut));
  const roomTotal = room ? room.price * nights : 0;
  const servicesTotal = (booking.services || []).reduce((sum, s) => {
    const sv = findService(catalog, s.id);
    return sum + (sv ? sv.price * s.qty : 0);
  }, 0);
  const ordersTotal = menu ? (booking.orders || [])
    .filter(o => o.status !== 'cancelled')
    .reduce((sum, o) => {
      const item = findMenuItem(menu, o.itemId);
      return sum + (item ? item.price * o.qty : 0);
    }, 0) : 0;
  const subtotal = roomTotal + servicesTotal + ordersTotal;
  const tax = Math.round(subtotal * 0.1);
  const total = subtotal + tax;
  return { nights, roomTotal, servicesTotal, ordersTotal, subtotal, tax, total };
};

// Export everything to window
Object.assign(window, {
  Icon,
  DOW_VN, DOW_VN_LONG, MONTH_VN,
  sameDay, startOfDay, daysBetween,
  formatDateVN, formatDateShort, formatRange,
  VND, VNDshort,
  initials,
  findRoom, findGuest, findService, findMenuItem,
  computeBookingTotal,
});
