/* screens-am-inbox.jsx — AM Review Inbox (US-04, proposal §SCREEN 1).
   AM xem submissions trong portfolio, variance vs BQ baseline, Accept/Reject. */

function AMInboxScreen({ warehouseId, navigate, addToast }) {
  const P = window.WFP_POINTS;
  const all = (window.WFP && window.WFP.CUSTOMER_FORECAST_SUBMISSIONS) || [];

  const [me, setMe] = React.useState('khoana@boxme.asia');
  const [stateFilter, setStateFilter] = React.useState('Open');
  const [search, setSearch] = React.useState('');
  const [picked, setPicked] = React.useState(null);
  const [subs, setSubs] = React.useState(all);

  const AM_OPTIONS = Array.from(new Set(all.map(s => s.account_manager)))
    .map(am => ({ value: am, label: am }));

  const STATE_OPTIONS = [
    { value: 'all',           label: 'Tất cả trạng thái' },
    { value: 'Open',          label: 'Open' },
    { value: 'AM Reviewed',   label: 'AM Reviewed' },
    { value: 'Plan Accepted', label: 'Plan Accepted' },
    { value: 'Rejected',      label: 'Rejected' },
    { value: 'Cancelled',     label: 'Cancelled' },
  ];

  const visible = subs.filter(s =>
    s.account_manager === me &&
    (stateFilter === 'all' || s.workflow_state === stateFilter) &&
    (!search || (s.customer + s.id + s.customer_code).toLowerCase().includes(search.toLowerCase()))
  );

  // KPI tiles
  const myAll = subs.filter(s => s.account_manager === me);
  const todayISO = '2026-05-26';
  const kpis = {
    pending:  myAll.filter(s => s.workflow_state === 'Open').length,
    accepted: myAll.filter(s => s.workflow_state === 'Plan Accepted').length,
    rejected: myAll.filter(s => s.workflow_state === 'Rejected').length,
    coverage: Math.round((myAll.filter(s => ['Plan Accepted','AM Reviewed','Open'].includes(s.workflow_state)).length / Math.max(1, myAll.length)) * 100),
  };

  function updateState(id, next, extra) {
    setSubs(prev => prev.map(s => s.id === id ? Object.assign({}, s, {
      workflow_state: next,
      reviewed_by: me,
      reviewed_at: new Date().toISOString(),
      rejection_reason: extra && extra.rejection_reason ? extra.rejection_reason : s.rejection_reason,
    }) : s));
    if (addToast) addToast({ kind: 'SUCCESS', title: `${id} → ${next}`, body: `Cập nhật bởi ${me}` });
    if (picked && picked.id === id) setPicked(null);
  }

  function varianceBadge(s) {
    if (s.variance_flag === 'Suspicious') return <Badge kind="danger">🚨 {s.variance_pct.toFixed(1)}%</Badge>;
    if (s.variance_flag === 'High')        return <Badge kind="warning">⚠ {s.variance_pct.toFixed(1)}%</Badge>;
    return <Badge kind="success">✓ {s.variance_pct.toFixed(1)}%</Badge>;
  }

  function stateBadge(s) {
    const map = { 'Open': 'info', 'AM Reviewed': 'warning', 'Plan Accepted': 'success', 'Rejected': 'danger', 'Cancelled': 'neutral' };
    return <Badge kind={map[s.workflow_state] || 'neutral'}>{s.workflow_state}</Badge>;
  }

  const columns = [
    { key: 'id', header: 'ID', width: 110, priority: 1, render: r => <code style={{ fontSize: 12 }}>{r.id}</code> },
    { key: 'customer', header: 'Khách hàng', priority: 1, render: r => (
        <div>
          <div style={{ fontWeight: 600 }}>{r.customer}</div>
          <div style={{ fontSize: 11, color: 'var(--bx-text-muted)' }}>{r.customer_code}</div>
        </div>
    ) },
    { key: 'type', header: 'Loại', priority: 2, render: r => <Badge kind="info">{r.submission_type}</Badge> },
    { key: 'period', header: 'Period', priority: 2, render: r => <span style={{ fontSize: 12 }}>{r.period_start} → {r.period_end}</span> },
    { key: 'submitted', header: 'Orders', priority: 1, align: 'right', render: r => <strong>{r.total_orders_submitted.toLocaleString('vi-VN')}</strong> },
    { key: 'baseline', header: 'BQ baseline', priority: 3, align: 'right', render: r => <span style={{ color: 'var(--bx-text-muted)' }}>{r.bq_baseline_total.toLocaleString('vi-VN')}</span> },
    { key: 'variance', header: 'Variance', priority: 1, render: r => varianceBadge(r) },
    { key: 'lead', header: 'Lead', priority: 3, render: r => `${r.lead_time_days}d` },
    { key: 'state', header: 'State', priority: 2, render: r => stateBadge(r) },
    { key: 'action', header: 'Action', priority: 1, render: r => (
        <div style={{ display: 'flex', gap: 4 }}>
          <Button size="sm" variant="ghost" onClick={() => setPicked(r)}>Review</Button>
          {r.workflow_state === 'Open' && r.variance_flag !== 'Suspicious' && (
            <Button size="sm" variant="primary" onClick={() => updateState(r.id, 'Plan Accepted')}>Accept</Button>
          )}
        </div>
    ) },
  ];

  return (
    <div style={{ padding: 20, overflowY: 'auto' }}>
      <PageHeader
        title="AM Review Inbox"
        subtitle="Customer Forecast Submission — Accept/Reject theo portfolio AM"
      />

      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 16 }}>
        <Metric icon="inbox" label="Chờ review" value={kpis.pending}
                sublabel={`${myAll.filter(s => s.workflow_state === 'Open' && s.variance_flag !== 'Normal').length} high variance`}/>
        <Metric icon="check-circle" label="Đã Accept" value={kpis.accepted} sublabel="SLA 24h" deltaTone="success"/>
        <Metric icon="x-circle" label="Reject" value={kpis.rejected} sublabel="tuần này" deltaTone="danger"/>
        <Metric icon="users" label="Coverage portfolio" value={kpis.coverage + '%'} sublabel="đã submit"/>
      </div>

      <Card title="Filters" padding={12} style={{ marginBottom: 12 }}>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', alignItems: 'flex-end' }}>
          <Field label="Account Manager" style={{ minWidth: 220 }}>
            <Select value={me} onChange={setMe} options={AM_OPTIONS}/>
          </Field>
          <Field label="Trạng thái" style={{ minWidth: 180 }}>
            <Select value={stateFilter} onChange={setStateFilter} options={STATE_OPTIONS}/>
          </Field>
          <Field label="Tìm kiếm" style={{ flex: 1, minWidth: 200 }}>
            <Input value={search} onChange={setSearch} placeholder="Customer / ID..." icon="search"/>
          </Field>
        </div>
      </Card>

      <Card title={`Submissions (${visible.length})`} padding={0}>
        {visible.length === 0
          ? <div style={{ padding: 24 }}><Empty icon="inbox" title="Không có submission" subtitle="Đổi filter để xem khác"/></div>
          : <Table columns={columns} rows={visible} getRowKey={r => r.id} dense/>}
      </Card>

      {picked && (
        <ReviewDialog
          submission={picked}
          onClose={() => setPicked(null)}
          onAccept={(reason) => updateState(picked.id, 'Plan Accepted')}
          onReject={(reason) => updateState(picked.id, 'Rejected', { rejection_reason: reason })}
          onMark={()    => updateState(picked.id, 'AM Reviewed')}
        />
      )}
    </div>
  );
}

function ReviewDialog({ submission, onClose, onAccept, onReject, onMark }) {
  const [rejReason, setRejReason] = React.useState('');
  const [showRej, setShowRej] = React.useState(false);
  const canEdit = submission.workflow_state === 'Open' || submission.workflow_state === 'AM Reviewed';

  return (
    <Dialog open onClose={onClose} title={`${submission.id} — ${submission.customer}`}
            subtitle={`${submission.submission_type} · ${submission.fulfillment_center} · submitted via ${submission.submitted_via}`}
            width={760}
            footer={(
              <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
                <Button variant="ghost" onClick={onClose}>Đóng</Button>
                {canEdit && <Button variant="secondary" onClick={onMark}>Mark Reviewed</Button>}
                {canEdit && <Button variant="danger" onClick={() => setShowRej(true)}>Reject</Button>}
                {canEdit && <Button variant="primary" onClick={onAccept}>Accept</Button>}
              </div>
            )}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 16, fontSize: 13 }}>
        <div><div style={{ color: 'var(--bx-text-muted)', fontSize: 11 }}>Total submitted</div><strong>{submission.total_orders_submitted.toLocaleString('vi-VN')}</strong></div>
        <div><div style={{ color: 'var(--bx-text-muted)', fontSize: 11 }}>BQ baseline</div><strong>{submission.bq_baseline_total.toLocaleString('vi-VN')}</strong></div>
        <div><div style={{ color: 'var(--bx-text-muted)', fontSize: 11 }}>Variance</div><strong style={{ color: submission.variance_flag === 'Suspicious' ? 'var(--bx-color-red)' : submission.variance_flag === 'High' ? 'var(--bx-color-yellow)' : 'var(--bx-color-green)' }}>{submission.variance_pct.toFixed(1)}% — {submission.variance_flag}</strong></div>
        <div><div style={{ color: 'var(--bx-text-muted)', fontSize: 11 }}>Lead time</div><strong>{submission.lead_time_days} ngày</strong></div>
      </div>

      <h4 style={{ margin: '12px 0 8px', fontSize: 13 }}>Daily forecasts</h4>
      <table style={{ width: '100%', fontSize: 12, borderCollapse: 'collapse' }}>
        <thead>
          <tr style={{ background: 'var(--bx-page-bg)', color: 'var(--bx-text-muted)' }}>
            <th style={{ textAlign: 'left',  padding: 6 }}>Date</th>
            <th style={{ textAlign: 'left',  padding: 6 }}>Promo</th>
            <th style={{ textAlign: 'right', padding: 6 }}>Expected orders</th>
            <th style={{ textAlign: 'right', padding: 6 }}>BQ baseline</th>
            <th style={{ textAlign: 'right', padding: 6 }}>Δ</th>
          </tr>
        </thead>
        <tbody>
          {submission.daily_forecasts.map(d => (
            <tr key={d.forecast_date}>
              <td style={{ padding: 6, borderTop: '1px solid var(--bx-border-soft)' }}>{d.forecast_date}</td>
              <td style={{ padding: 6, borderTop: '1px solid var(--bx-border-soft)' }}>{d.promo_label_snapshot || '—'}</td>
              <td style={{ padding: 6, textAlign: 'right', borderTop: '1px solid var(--bx-border-soft)' }}><strong>{d.expected_orders.toLocaleString('vi-VN')}</strong></td>
              <td style={{ padding: 6, textAlign: 'right', borderTop: '1px solid var(--bx-border-soft)', color: 'var(--bx-text-muted)' }}>{d.bq_reference_orders.toLocaleString('vi-VN')}</td>
              <td style={{ padding: 6, textAlign: 'right', borderTop: '1px solid var(--bx-border-soft)', color: d.delta_vs_baseline >= 0 ? 'var(--bx-color-green)' : 'var(--bx-color-red)' }}>{d.delta_vs_baseline >= 0 ? '+' : ''}{d.delta_vs_baseline.toLocaleString('vi-VN')}</td>
            </tr>
          ))}
        </tbody>
      </table>

      {submission.rejection_reason && (
        <div style={{ marginTop: 12, padding: 10, background: 'var(--bx-color-red-soft)', borderRadius: 6, fontSize: 12 }}>
          <strong>Rejection reason:</strong> {submission.rejection_reason}
        </div>
      )}

      {showRej && (
        <div style={{ marginTop: 12, padding: 12, background: 'var(--bx-page-bg)', borderRadius: 6 }}>
          <Field label="Lý do reject (bắt buộc)" required>
            <Input value={rejReason} onChange={setRejReason} placeholder="Số liệu cao bất thường, vui lòng kiểm tra lại..."/>
          </Field>
          <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 8 }}>
            <Button size="sm" variant="ghost" onClick={() => setShowRej(false)}>Hủy</Button>
            <Button size="sm" variant="danger" disabled={!rejReason.trim()} onClick={() => onReject(rejReason)}>Confirm Reject</Button>
          </div>
        </div>
      )}
    </Dialog>
  );
}

window.AMInboxScreen = AMInboxScreen;