import { useEffect, useState } from 'react';
import { __ } from '@wordpress/i18n';
import { cfg } from './api.js';

// The full Lucide set the icon picker offers (assets/icons/lucide.json, { name: [paths, tags] }), fetched
// once, the first time an icon outside the preloaded map is drawn.
let lucide = null;
function loadLucide() {
  if (!lucide) {
    lucide = cfg.iconsJson
      ? fetch(cfg.iconsJson).then((r) => r.json()).then((all) => {
        cfg.icons = cfg.icons || {};
        Object.keys(all).forEach((k) => { if (!cfg.icons[k]) cfg.icons[k] = all[k][0]; });
      }).catch(() => {})
      : Promise.resolve();
  }
  return lucide;
}

/** Lucide icon by name: the map PHP localized, else the full set from lucide.json. */
export function Icon({ name, size = 18, className = '' }) {
  const known = !name || !!(cfg.icons && cfg.icons[name]);
  const [, loaded] = useState(0);
  useEffect(() => {
    let live = true;
    if (!known) loadLucide().then(() => live && loaded((n) => n + 1));
    return () => { live = false; };
  }, [name, known]);
  const inner = (cfg.icons && cfg.icons[name]) || cfg.icons?.circle || '';
  return (
    <svg className={'sa-i ' + className} width={size} height={size} viewBox="0 0 24 24" aria-hidden="true" focusable="false"
      dangerouslySetInnerHTML={{ __html: inner }} />
  );
}

export function Card({ title, tools, children, className = '', pad = true }) {
  return (
    <section className={'sa-card ' + className}>
      {title && <div className="sa-card-hd"><h2>{title}</h2>{tools && <div className="sa-card-tools">{tools}</div>}</div>}
      <div className={pad ? 'sa-card-bd' : ''}>{children}</div>
    </section>
  );
}

export function Button({ children, variant = '', size = '', icon, href, target, onClick, type = 'button', disabled, className = '', ...rest }) {
  // `rest` forwards data-*/aria-*/title etc. so screens (and QA) can tag buttons.
  const cls = `sa-btn ${variant ? 'sa-btn-' + variant : ''} ${size ? 'sa-btn-' + size : ''} ${className}`;
  const body = <>{icon && <Icon name={icon} size={16} />}<span>{children}</span></>;
  if (href) return <a className={cls} href={href} target={target} rel={target === '_blank' ? 'noopener' : undefined} onClick={onClick} {...rest}>{body}</a>;
  return <button type={type} className={cls} onClick={onClick} disabled={disabled} {...rest}>{body}</button>;
}

export function Badge({ children, tone = '' }) {
  return <span className={'sa-badge ' + (tone ? 'sa-badge-' + tone : '')}>{children}</span>;
}

export function Field({ label, help, htmlFor, children, inline }) {
  return (
    <div className={'sa-field ' + (inline ? 'sa-field-inline' : '')}>
      {label && <label htmlFor={htmlFor}>{label}</label>}
      <div className="sa-field-ctl">{children}{help && <p className="sa-help">{help}</p>}</div>
    </div>
  );
}

export function Switch({ checked, onChange, label, help }) {
  return (
    <label className="sa-switch">
      <input type="checkbox" checked={!!checked} onChange={(e) => onChange(e.target.checked)} />
      <span className="sa-switch-track" aria-hidden="true"><span className="sa-switch-thumb" /></span>
      <span className="sa-switch-text"><b>{label}</b>{help && <small>{help}</small>}</span>
    </label>
  );
}

export function Notice({ tone = 'info', children, onClose }) {
  const icon = { ok: 'circle-check', error: 'circle-x', warn: 'triangle-alert', info: 'sparkles' }[tone];
  return (
    <div className={'sa-notice sa-notice-' + tone} role={tone === 'error' ? 'alert' : 'status'}>
      <Icon name={icon} size={18} /><div className="sa-grow">{children}</div>
      {onClose && <button type="button" className="sa-icobtn" aria-label={__('Dismiss', 'dashbread')} onClick={onClose}><Icon name="x" size={16} /></button>}
    </div>
  );
}

/** Toast queue: `toast.show('Saved')`. */
const listeners = new Set();
export const toast = {
  show(text, tone = 'ok') { listeners.forEach((l) => l({ id: Date.now() + Math.random(), text, tone })); },
};
export function Toasts() {
  const [items, setItems] = useState([]);
  useEffect(() => {
    const l = (t) => {
      setItems((s) => [...s, t]);
      setTimeout(() => setItems((s) => s.filter((x) => x.id !== t.id)), 3500);
    };
    listeners.add(l);
    return () => listeners.delete(l);
  }, []);
  return (
    <div className="sa-toasts" aria-live="polite">
      {items.map((t) => <div key={t.id} className={'sa-toast sa-toast-' + t.tone}><Icon name={t.tone === 'error' ? 'circle-x' : 'circle-check'} size={16} />{t.text}</div>)}
    </div>
  );
}

export function Spinner({ label = __('Loading…', 'dashbread') }) {
  return <div className="sa-spinner" role="status"><span /> {label}</div>;
}

export function Empty({ icon = 'files', title, children, action }) {
  return (
    <div className="sa-empty"><Icon name={icon} size={32} /><h3>{title}</h3>{children && <p>{children}</p>}{action}</div>
  );
}

export function Stat({ value, label, tone = 'primary', icon }) {
  return (
    <div className={'sa-stat sa-stat-' + tone}>
      <div className="sa-stat-v">{value}</div>
      <div className="sa-stat-l">{label}</div>
      {icon && <Icon name={icon} size={22} className="sa-stat-i" />}
    </div>
  );
}