/* Maho Mockup — shared primitives */
const { useState, useEffect, useContext, createContext, useRef } = React;

const ICONS = {
  sparkles: (
    <path d="M12 3l1.5 4.5L18 9l-4.5 1.5L12 15l-1.5-4.5L6 9l4.5-1.5L12 3zM19 14l.8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8L19 14zM5 15l.7 1.8L7.5 17.5 5.7 18.2 5 20l-.7-1.8L2.5 17.5l1.8-.7L5 15z" />
  ),
  camera: (
    <>
      <path d="M4 8h3l2-2h6l2 2h3v11H4V8z" />
      <circle cx="12" cy="13" r="3.5" />
    </>
  ),
  images: (
    <>
      <rect x="3" y="5" width="14" height="12" rx="2" />
      <path d="M7 17l4-4 3 3 2-2 3 3" />
      <path d="M10 5V3h11v12h-2" />
    </>
  ),
  reader: (
    <>
      <path d="M4 5h10a2 2 0 012 2v12H6a2 2 0 01-2-2V5z" />
      <path d="M16 7h2a2 2 0 012 2v10H8" />
      <path d="M8 10h5M8 13h5" />
    </>
  ),
  youtube: (
    <>
      <rect x="2.5" y="6" width="19" height="12" rx="3" />
      <path d="M10 9.5v5l5-2.5-5-2.5z" className="fill" />
    </>
  ),
  bulb: (
    <>
      <path d="M9 18h6M10 21h4" />
      <path d="M12 3a6 6 0 014 10c-.8.7-1.3 1.6-1.5 2.5H9.5C9.3 14.6 8.8 13.7 8 13a6 6 0 014-10z" />
    </>
  ),
  chat: (
    <>
      <path d="M5 6h14a2 2 0 012 2v7a2 2 0 01-2 2H10l-4 3v-3H5a2 2 0 01-2-2V8a2 2 0 012-2z" />
    </>
  ),
  time: (
    <>
      <circle cx="12" cy="12" r="8.5" />
      <path d="M12 7.5V12l3 2" />
    </>
  ),
  book: (
    <>
      <path d="M5 5.5A2.5 2.5 0 017.5 3H19v16H7.5A2.5 2.5 0 005 16.5v-11z" />
      <path d="M5 16.5A2.5 2.5 0 017.5 19H19" />
    </>
  ),
  library: (
    <>
      <path d="M4 4h3v16H4zM10 4h3v16h-3zM16 6l4 1.2v12.5L16 18.5V6z" />
    </>
  ),
  person: (
    <>
      <circle cx="12" cy="8" r="3.5" />
      <path d="M5 19c1.5-3.5 4-5 7-5s5.5 1.5 7 5" />
    </>
  ),
  chevronRight: <path d="M9 6l6 6-6 6" />,
  chevronLeft: <path d="M15 6l-6 6 6 6" />,
  chevronBack: <path d="M14 6l-6 6 6 6" />,
  refresh: (
    <>
      <path d="M20 12a8 8 0 10-2.3 5.5" />
      <path d="M20 5v5h-5" />
    </>
  ),
  trash: (
    <>
      <path d="M5 7h14M9 7V5h6v2M8 7l1 12h6l1-12" />
    </>
  ),
  wallet: (
    <>
      <rect x="3" y="6" width="18" height="13" rx="2" />
      <path d="M3 10h18" />
      <circle cx="16" cy="14.5" r="1.2" />
    </>
  ),
  card: (
    <>
      <rect x="3" y="6" width="18" height="12" rx="2" />
      <path d="M3 10h18M7 14h4" />
    </>
  ),
  stats: (
    <>
      <path d="M4 19V5M4 19h16" />
      <path d="M8 15v-4M12 15V8M16 15v-6" />
    </>
  ),
  settings: (
    <>
      <circle cx="12" cy="12" r="3" />
      <path d="M12 3v2M12 19v2M4.9 6.5l1.4 1.4M17.7 16.1l1.4 1.4M3 12h2M19 12h2M4.9 17.5l1.4-1.4M17.7 7.9l1.4-1.4" />
    </>
  ),
  login: (
    <>
      <path d="M10 7V5H4v14h6v-2" />
      <path d="M14 12H7M14 12l-2.5-2.5M14 12l-2.5 2.5" />
      <path d="M14 7h6v10h-6" />
    </>
  ),
  logout: (
    <>
      <path d="M10 7V5H4v14h6v-2" />
      <path d="M14 12H7M20 12l-2.5-2.5M20 12l-2.5 2.5" />
    </>
  ),
  volume: (
    <>
      <path d="M5 10v4h3l4 3V7l-4 3H5z" />
      <path d="M16 9.5a3.5 3.5 0 010 5M18.5 7a6.5 6.5 0 010 10" />
    </>
  ),
  check: <path d="M5 12.5l4.5 4.5L19 7" />,
  close: <path d="M6 6l12 12M18 6L6 18" />,
  signal: (
    <>
      <path d="M4 16v2M8 13v5M12 10v8M16 7v11M20 4v14" />
    </>
  ),
  battery: (
    <>
      <rect x="3" y="8" width="16" height="8" rx="1.5" />
      <path d="M19 11h2v2h-2" />
      <rect x="5" y="10" width="10" height="4" className="fill" />
    </>
  ),
  wifi: (
    <>
      <path d="M3.5 9.5a12 12 0 0117 0" />
      <path d="M6.5 12.5a8 8 0 0111 0" />
      <path d="M9.5 15.5a4 4 0 015 0" />
      <circle cx="12" cy="19" r="1" className="fill" />
    </>
  ),
};

function Icon({ name, size = 20, className = "" }) {
  const body = ICONS[name];
  if (!body) return null;
  const fillMode = name === "youtube" || name === "battery" || name === "wifi" ? " icon--fill" : "";
  return (
    <span className={`icon${fillMode} ${className}`} style={{ width: size, height: size, fontSize: size }} aria-hidden="true">
      <svg viewBox="0 0 24 24" width={size} height={size}>
        {body}
      </svg>
    </span>
  );
}

function ZenButton({ variant = "primary", block, sm, children, className = "", ...rest }) {
  const cls = [
    "zen-btn",
    `zen-btn-${variant}`,
    block ? "zen-btn-block" : "",
    sm ? "zen-btn-sm" : "",
    className,
  ].filter(Boolean).join(" ");
  return (
    <button type="button" className={cls} {...rest}>
      {children}
    </button>
  );
}

function ZenCard({ children, className = "", onClick, style }) {
  return (
    <div className={`zen-card ${className}`} onClick={onClick} style={style}>
      {children}
    </div>
  );
}

function CardHeader({ icon, title, subtitle }) {
  return (
    <div className="card-header">
      <div className="card-icon">{icon}</div>
      <div className="card-titles">
        <h2 className="card-title">{title}</h2>
        {subtitle ? <p className="card-subtitle">{subtitle}</p> : null}
      </div>
    </div>
  );
}

function ModeTabs({ items, value, onChange }) {
  return (
    <div className="input-mode-tabs">
      {items.map((it) => (
        <button
          key={it.id}
          type="button"
          className={`mode-tab${value === it.id ? " active" : ""}`}
          onClick={() => onChange(it.id)}
        >
          {it.icon ? <Icon name={it.icon} size={14} /> : null}
          <span>{it.label}</span>
        </button>
      ))}
    </div>
  );
}

function PageHeader({ title, onBack, right }) {
  return (
    <div className="zen-toolbar">
      {onBack ? (
        <div className="zen-toolbar__left">
          <button type="button" className="back-btn" onClick={onBack}>
            <Icon name="chevronBack" size={18} />
            上一頁
          </button>
        </div>
      ) : null}
      <div className="zen-toolbar__title">{title}</div>
      {right ? <div className="zen-toolbar__right">{right}</div> : null}
    </div>
  );
}

function HubRow({ icon, iconText, title, subtitle, onClick }) {
  return (
    <button type="button" className="hub-btn" onClick={onClick}>
      <div className="hub-btn-left">
        <div className="hub-icon">
          {iconText ? iconText : <Icon name={icon} size={18} />}
        </div>
        <div className="language-info">
          <span className="language-name">{title}</span>
          <span className="language-code">{subtitle}</span>
        </div>
      </div>
      <Icon name="chevronRight" size={18} className="hub-chevron" />
    </button>
  );
}

function StatusPill({ status, children }) {
  return <span className={`status-pill ${status}`}>{children}</span>;
}

const ToastCtx = createContext(null);

function ToastProvider({ children }) {
  const [toasts, setToasts] = useState([]);
  const push = (message, kind = "default") => {
    const id = Date.now() + Math.random();
    setToasts((t) => [...t, { id, message, kind }]);
    setTimeout(() => setToasts((t) => t.filter((x) => x.id !== id)), 1800);
  };
  return (
    <ToastCtx.Provider value={{ push }}>
      {children}
      <div className="toast-host">
        {toasts.map((t) => (
          <div key={t.id} className={`toast ${t.kind}`}>{t.message}</div>
        ))}
      </div>
    </ToastCtx.Provider>
  );
}

function useToast() {
  return useContext(ToastCtx) || { push: () => {} };
}

Object.assign(window, {
  Icon,
  ZenButton,
  ZenCard,
  CardHeader,
  ModeTabs,
  PageHeader,
  HubRow,
  StatusPill,
  ToastProvider,
  useToast,
  ToastCtx,
});