// ngoy-coin.jsx — daily coins and a tiny reward shop for View & Mimi
const { useState: useNgoyState } = React;

function ngoyCoinBalance(project) {
  const ngoy = project?.ngoy;
  if (!ngoy) return 0;
  const earned = ngoy.dailyClaims.reduce((sum, claim) => sum + Number(claim.amount || 0), 0);
  const spent = ngoy.requests.filter(request => request.status === 'approved')
    .reduce((sum, request) => sum + Number(request.cost || 0), 0);
  return earned - spent;
}

function NgoyCoinIcon({ size = 42 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 48 48" fill="none" aria-hidden="true">
      <circle cx="24" cy="24" r="19" fill="#FFD968" stroke="#B87824" strokeWidth="2.2"/>
      <circle cx="24" cy="24" r="14.5" fill="#FFE999" stroke="#E0A83E" strokeWidth="1.4" strokeDasharray="2.4 2.4"/>
      <path d="M17 21.5 19 16l5 3 5-3 2 5.5c1.4 1.4 2 3.1 2 5 0 4.4-4 7.2-9 7.2s-9-2.8-9-7.2c0-1.9.7-3.6 2-5Z" fill="#FFF9E7" stroke="#8C6135" strokeWidth="1.45" strokeLinejoin="round"/>
      <circle cx="21" cy="25.5" r="1.1" fill="#6D4A31"/><circle cx="27" cy="25.5" r="1.1" fill="#6D4A31"/>
      <path d="m22.5 28.5 1.5-.8 1.5.8-1.5 1.4-1.5-1.4Z" fill="#D47882"/>
      <path d="M12 13l2.5 2.5M36 13l-2.5 2.5M24 8v3" stroke="#FFF1B6" strokeWidth="2" strokeLinecap="round"/>
    </svg>
  );
}

function ngoyDate(timestamp) {
  if (!timestamp) return '—';
  return new Date(timestamp).toLocaleDateString('en-GB', { day:'numeric', month:'short', year:'numeric' });
}

function ngoyToday() {
  const d = new Date();
  return [d.getFullYear(), String(d.getMonth() + 1).padStart(2, '0'), String(d.getDate()).padStart(2, '0')].join('-');
}

function NgoyCoinPage({ project, identity, toast }) {
  useStore();
  const fresh = Store.get().projects.find(p => p.id === project.id) || project;
  const ngoy = fresh.ngoy;
  const balance = ngoyCoinBalance(fresh);
  const isView = identity === 'view';
  const isMimi = identity === 'mimi';
  const today = ngoyToday();
  const collectedToday = ngoy.dailyClaims.some(claim => claim.date === today);
  const pending = ngoy.requests.filter(request => request.status === 'pending');
  const [requestItem, setRequestItem] = useNgoyState(null);
  const [approval, setApproval] = useNgoyState(null);

  function collectToday() {
    const result = Store.collectNgoyDaily(identity);
    toast(result.message);
  }

  return (
    <div className="ngoy-page fade-in">
      <section className="ngoy-hero">
        <div className="ngoy-hero-art"><NgoyCoinIcon size={78}/><span>＋10</span></div>
        <div className="ngoy-hero-copy">
          <span className="ngoy-kicker">OUR LITTLE REWARD WALLET</span>
          <h2>Small coins, sweet rewards</h2>
          <p>Collect 10 coins each day, save them up, and trade them for something lovely.</p>
          <div className={`ngoy-role ${isView ? 'view' : 'mimi'}`}>{isView ? 'View · Reward approver' : 'Mimi · Coin collector'}</div>
        </div>
        <div className="ngoy-balance-card"><span>Available balance</span><strong>{balance}</strong><small>Ngoy Coins</small></div>
      </section>

      <section className="ngoy-daily-card">
        <div className="ngoy-daily-date"><span>TODAY</span><strong>{new Date().toLocaleDateString('en-GB', { weekday:'long', day:'numeric', month:'long' })}</strong></div>
        <div className="ngoy-daily-copy">
          <h3>{collectedToday ? 'Today’s coins are safe ✨' : '10 coins are ready today'}</h3>
          <p>{isMimi ? 'Tap once to collect your 10 coins for today.' : 'Mimi can collect 10 coins here, once per day.'}</p>
        </div>
        {isMimi ? <button className={`btn ngoy-collect ${collectedToday ? 'done' : ''}`} disabled={collectedToday} onClick={collectToday}>
          {collectedToday ? '✓ Collected today' : '＋ Collect 10 coins'}
        </button> : <div className={`ngoy-waiting ${collectedToday ? 'done' : ''}`}>
          {collectedToday ? '✓ Mimi collected today' : 'Waiting for Mimi'}
        </div>}
      </section>

      {isView && (
        <section className="ngoy-approvals">
          <div className="section-head"><div><h3>Approval inbox</h3><p className="muted">Mimi’s reward requests appear here.</p></div><span className="ngoy-count">{pending.length} pending</span></div>
          {pending.length === 0 ? <div className="ngoy-empty-small">No requests waiting right now 💌</div> :
            <div className="ngoy-request-list">{pending.map(request => (
              <button key={request.id} className="ngoy-request-row" onClick={() => setApproval(request)}>
                <span className="ngoy-request-emoji">{request.itemEmoji || '🎁'}</span>
                <span><b>{request.itemName}</b><small>Requested {ngoyDate(request.requestedAt)}</small></span>
                <strong>{request.cost} coins</strong><i>Review →</i>
              </button>
            ))}</div>}
        </section>
      )}

      <section className="ngoy-shop">
        <div className="section-head"><div><h3>Ngoy Shop</h3><p className="muted">A tiny shop made just for Mimi.</p></div></div>
        <div className="ngoy-shop-grid">{ngoy.shopItems.map(item => {
          const pendingSame = ngoy.requests.some(request => request.itemId === item.id && request.status === 'pending');
          return (
            <article className="ngoy-shop-card" key={item.id} style={{'--item':item.color}}>
              <div className="ngoy-item-emoji">{item.emoji}</div>
              <div className="ngoy-item-price"><NgoyCoinIcon size={18}/>{item.cost}</div>
              <h4>{item.name}</h4><p>{item.description}</p>
              {isMimi ? <button className="btn ngoy-request-btn" disabled={pendingSame} onClick={() => setRequestItem(item)}>
                {pendingSame ? 'Request pending' : 'Request reward'}
              </button> : <div className="ngoy-view-note">Mimi can request this</div>}
            </article>
          );
        })}</div>
      </section>

      <section className="ngoy-history">
        <div className="section-head"><div><h3>Coin history</h3><p className="muted">Every daily add and reward decision.</p></div></div>
        <NgoyHistory ngoy={ngoy}/>
      </section>

      {requestItem && <NgoyRequestModal item={requestItem} balance={balance} identity={identity} toast={toast} onClose={() => setRequestItem(null)}/>}
      {approval && <NgoyApprovalModal request={approval} balance={balance} identity={identity} toast={toast} onClose={() => setApproval(null)}/>}
    </div>
  );
}

function NgoyHistory({ ngoy }) {
  const rows = [
    ...ngoy.dailyClaims.map(claim => ({ id:claim.id, at:claim.createdAt, kind:'earn', emoji:'☀️', title:'Daily coins', detail:`Collected by ${claim.by === 'mimi' ? 'Mimi' : 'View'} · ${ngoyDate(claim.createdAt)}`, amount:`+${claim.amount}` })),
    ...ngoy.requests.filter(request => request.status !== 'pending').map(request => ({
      id:request.id, at:request.resolvedAt || request.requestedAt, kind:request.status,
      emoji:request.itemEmoji || '🎁', title:request.itemName,
      detail:`${request.status === 'approved' ? 'Approved' : 'Declined'} by View · ${ngoyDate(request.resolvedAt || request.requestedAt)}`,
      amount:request.status === 'approved' ? `−${request.cost}` : 'No charge',
    })),
  ].sort((a,b) => Number(b.at || 0) - Number(a.at || 0));
  if (rows.length === 0) return <div className="ngoy-history-empty"><NgoyCoinIcon size={45}/><h4>No coin activity yet</h4><p>Mimi can collect the first 10 coins today.</p></div>;
  return <div className="ngoy-history-list">{rows.map(row => <div className="ngoy-history-row" key={`${row.kind}-${row.id}`}>
    <span className="ngoy-history-emoji">{row.emoji}</span><span><b>{row.title}</b><small>{row.detail}</small></span>
    <strong className={row.kind}>{row.amount}</strong>
  </div>)}</div>;
}

function NgoyRequestModal({ item, balance, identity, toast, onClose }) {
  const [note, setNote] = useNgoyState('');
  function send() {
    const result = Store.requestNgoyItem(item.id, note, identity);
    toast(result.message); if (result.ok) onClose();
  }
  return <Modal title="Request this reward?" onClose={onClose} icon={<div className="ngoy-modal-emoji">{item.emoji}</div>}>
    <div className="ngoy-modal-item"><div><b>{item.name}</b><p>{item.description}</p></div><strong>{item.cost} coins</strong></div>
    <div className="ngoy-modal-balance">Current balance <b>{balance} coins</b></div>
    <div className="field"><label>Note for View <span className="faint">(optional)</span></label><textarea className="textarea" value={note} onChange={e=>setNote(e.target.value)} placeholder="Anything you want to say?" rows="3"/></div>
    <p className="muted ngoy-modal-help">Coins are only deducted after View approves the request.</p>
    <button className="btn btn-primary ngoy-full" onClick={send}>Send request to View</button>
  </Modal>;
}

function NgoyApprovalModal({ request, balance, identity, toast, onClose }) {
  const canAfford = balance >= Number(request.cost || 0);
  function decide(decision) {
    const result = Store.resolveNgoyRequest(request.id, decision, identity);
    toast(result.message); if (result.ok) onClose();
  }
  return <Modal title="Review Mimi’s request" onClose={onClose} icon={<div className="ngoy-modal-emoji">{request.itemEmoji || '🎁'}</div>}>
    <div className="ngoy-modal-item"><div><b>{request.itemName}</b><p>{request.note || 'No note added.'}</p></div><strong>{request.cost} coins</strong></div>
    <div className={`ngoy-modal-balance ${canAfford ? '' : 'low'}`}>Available after approval <b>{canAfford ? balance - request.cost : 'Not enough coins'}</b></div>
    <p className="muted ngoy-modal-help">Approving deducts the coins immediately. Declining keeps the balance unchanged.</p>
    <div className="ngoy-approval-actions"><button className="btn ngoy-decline" onClick={() => decide('rejected')}>Decline</button><button className="btn ngoy-approve" disabled={!canAfford} onClick={() => decide('approved')}>Approve reward</button></div>
  </Modal>;
}

Object.assign(window, { NgoyCoinPage, NgoyCoinIcon, ngoyCoinBalance });