/* Kitchen Display — Snack Overflow (Production) */
const { useState, useEffect, useCallback, useMemo } = React;

/* ── Helpers ──────────────────────────────────────── */
function timeStr(iso) {
  const d = new Date(iso);
  return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
}

function minutesAgo(iso) {
  return Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
}

function nameToColor(name) {
  let h = 0;
  for (let i = 0; i < name.length; i++) h = name.charCodeAt(i) + ((h << 5) - h);
  return `oklch(0.72 0.12 ${Math.abs(h % 360)})`;
}
function nameToInitials(name) {
  if (name === "Guest") return "G";
  if (name === "LounaCOFFEE") return "LC";
  return name.slice(0, 2).toUpperCase();
}

/* ── Order Card ───────────────────────────────────── */
function KitchenCard({ order, onStatusChange }) {
  const [busy, setBusy] = useState(false);
  const age = minutesAgo(order.date);
  const isUrgent = age > 10 && order.status !== 'done';
  const isOld = age > 5 && order.status === 'new';

  const statusClass = {
    new: 'kc--new',
    progress: 'kc--progress',
    done: 'kc--done',
  }[order.status] || '';

  const handleStatus = async (newStatus) => {
    if (busy) return;
    setBusy(true);
    await onStatusChange(order.id, newStatus);
    setBusy(false);
  };

  return (
    <div className={`kc ${statusClass} ${isUrgent ? 'kc--urgent' : ''}`}>
      <div className="kc-header">
        <div className="kc-order-num">#{String(order.orderNum).padStart(2, '0')}</div>
        <div className="kc-meta">
          <span className="kc-time">{timeStr(order.date)}</span>
          <span className={`kc-age ${isOld ? 'kc-age--warn' : ''} ${isUrgent ? 'kc-age--urgent' : ''}`}>
            {age < 1 ? 'Just now' : `${age}m ago`}
          </span>
        </div>
      </div>

      <div className="kc-person">
        <span className="kc-avatar" style={{ background: nameToColor(order.person) }}>
          {nameToInitials(order.person)}
        </span>
        <span className="kc-person-name">{order.person}</span>
        {order.qty > 1 && <span className="kc-qty">×{order.qty}</span>}
      </div>

      <div className="kc-item-name">{order.name}</div>

      {order.summaryLines.length > 0 ? (
        <ul className="kc-details">
          {order.summaryLines.map((line, i) => (
            <li key={i} className="kc-detail">{line.name}</li>
          ))}
        </ul>
      ) : order.desc ? (
        <div className="kc-desc">{order.desc}</div>
      ) : null}

      <div className="kc-actions">
        {order.status === 'new' && (
          <button className="kc-btn kc-btn--start" onClick={() => handleStatus('progress')} disabled={busy}>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 4v12M4 10h12" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
            {busy ? '…' : 'Start'}
          </button>
        )}
        {order.status === 'progress' && (
          <button className="kc-btn kc-btn--done" onClick={() => handleStatus('done')} disabled={busy}>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M4 10l4 4 8-8" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
            {busy ? '…' : 'Done'}
          </button>
        )}
        {order.status === 'done' && (
          <div className="kc-done-label">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 9l4 4 8-8" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            Complete
          </div>
        )}
        {order.status !== 'new' && (
          <button className="kc-btn kc-btn--undo" onClick={() => handleStatus(order.status === 'done' ? 'progress' : 'new')} disabled={busy}>
            Undo
          </button>
        )}
      </div>
    </div>
  );
}

/* ── Empty State ──────────────────────────────────── */
function EmptyState() {
  return (
    <div className="k-empty">
      <div className="k-empty-icon">
        <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
          <rect x="12" y="20" width="40" height="32" rx="4" stroke="currentColor" strokeWidth="2.5" fill="none"/>
          <path d="M12 28h40" stroke="currentColor" strokeWidth="2.5"/>
          <circle cx="32" cy="40" r="4" stroke="currentColor" strokeWidth="2"/>
          <path d="M24 14h16" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
        </svg>
      </div>
      <h2 className="k-empty-title">No orders yet</h2>
      <p className="k-empty-sub">Configurable product orders will appear here as they come in</p>
    </div>
  );
}

/* ── Main App ─────────────────────────────────────── */
function KitchenApp() {
  const [orders, setOrders] = useState([]);
  const [filter, setFilter] = useState('active');
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const loadOrders = useCallback(async () => {
    try {
      const data = await window.api.kitchen.getOrders();
      setOrders(data);
      setError(null);
    } catch (err) {
      console.error('Failed to load orders:', err);
      setError(err.message);
    }
    setLoading(false);
  }, []);

  // Poll for new orders every 3 seconds
  useEffect(() => {
    loadOrders();
    const poll = setInterval(loadOrders, 3000);
    return () => clearInterval(poll);
  }, [loadOrders]);

  const handleStatusChange = useCallback(async (itemId, newStatus) => {
    try {
      await window.api.kitchen.updateStatus(itemId, newStatus);
      // Optimistic update
      setOrders(prev => prev.map(o => o.id === itemId ? { ...o, status: newStatus } : o));
    } catch (err) {
      console.error('Status update failed:', err);
      alert('Failed to update status');
    }
  }, []);

  const filtered = useMemo(() => {
    if (filter === 'active') return orders.filter(o => o.status !== 'done');
    return orders;
  }, [orders, filter]);

  const counts = useMemo(() => ({
    total: orders.length,
    new: orders.filter(o => o.status === 'new').length,
    progress: orders.filter(o => o.status === 'progress').length,
    done: orders.filter(o => o.status === 'done').length,
  }), [orders]);

  const displayDate = new Date().toLocaleDateString('en-ZA', {
    weekday: 'long', day: 'numeric', month: 'long', year: 'numeric'
  });

  if (loading) {
    return (
      <div className="k-app" style={{alignItems:'center',justifyContent:'center'}}>
        <div style={{color:'var(--text2)',fontSize:16}}>Loading kitchen orders…</div>
      </div>
    );
  }

  if (error && orders.length === 0) {
    return (
      <div className="k-app" style={{alignItems:'center',justifyContent:'center'}}>
        <div style={{color:'var(--red)',fontSize:16,textAlign:'center'}}>
          <div style={{marginBottom:8}}>Failed to connect to server</div>
          <button onClick={loadOrders} style={{padding:'10px 24px',borderRadius:8,border:'1px solid var(--border)',background:'var(--surface)',color:'var(--text)',fontSize:14,fontWeight:600,cursor:'pointer'}}>Retry</button>
        </div>
      </div>
    );
  }

  return (
    <div className="k-app">
      <header className="k-header">
        <div className="k-header-left">
          <img src="uploads/Logo_Transparent.png" className="k-logo-img" alt="" />
          <div className="k-header-titles">
            <h1 className="k-title">Kitchen</h1>
            <span className="k-date">{displayDate}</span>
          </div>
        </div>
        <div className="k-header-right">
          <div className="k-stats">
            <div className="k-stat k-stat--new">
              <span className="k-stat-num">{counts.new}</span>
              <span className="k-stat-label">New</span>
            </div>
            <div className="k-stat k-stat--prog">
              <span className="k-stat-num">{counts.progress}</span>
              <span className="k-stat-label">Making</span>
            </div>
            <div className="k-stat k-stat--done">
              <span className="k-stat-num">{counts.done}</span>
              <span className="k-stat-label">Done</span>
            </div>
          </div>
          <div className="k-filter-group">
            <button className={`k-filter ${filter === 'active' ? 'k-filter--on' : ''}`}
              onClick={() => setFilter('active')}>Active</button>
            <button className={`k-filter ${filter === 'all' ? 'k-filter--on' : ''}`}
              onClick={() => setFilter('all')}>All</button>
          </div>
        </div>
      </header>

      {filtered.length === 0 ? (
        <EmptyState />
      ) : (
        <div className="k-grid">
          {filtered.map(order => (
            <KitchenCard key={order.id} order={order} onStatusChange={handleStatusChange} />
          ))}
        </div>
      )}

      <a href="index.html" className="k-back-link">← Back to POS</a>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<KitchenApp />);