// screen-campaigns.jsx — Promotional campaigns scraped per brand
const { useState: useStateCM } = React;

const CAMP_STATUS = {
  active:   { label: 'Đang diễn ra', cls: 'badge-green',   icon: 'play'  },
  upcoming: { label: 'Sắp diễn ra',  cls: 'badge-blue',    icon: 'clock' },
  ended:    { label: 'Đã kết thúc',  cls: 'badge-neutral', icon: 'check' },
};

const POST_KINDS = [
  { id: 'hero',     icon: 'megaphone', label: 'Bài tổng campaign',   desc: 'Banner + caption giới thiệu chương trình, ngày bắt đầu/kết thúc, mức giảm chung.' },
  { id: 'carousel', icon: 'gallery',   label: 'Carousel top sản phẩm', desc: 'Chọn 3-10 sản phẩm trong campaign, đăng dạng album FB native (swipe được).' },
  { id: 'composite',icon: 'sparkle',   label: 'Lookbook AI ghép',    desc: '2-5 sản phẩm, AI ghép thành 1 ảnh lookbook outfit hoàn chỉnh.' },
  { id: 'series',   icon: 'calendar',  label: 'Chuỗi bài theo lịch', desc: 'Rải N bài tự động trải đều suốt thời gian campaign (1 bài / ngày hoặc theo cấu hình).' },
];

function fmtDateShort(iso) {
  const d = new Date(iso);
  return ('0' + d.getDate()).slice(-2) + '/' + ('0' + (d.getMonth() + 1)).slice(-2);
}
function daysBetween(a, b) {
  return Math.round((new Date(b) - new Date(a)) / 86400000);
}
function daysFromNow(iso) {
  return Math.round((new Date(iso) - new Date('2026-05-29T12:00:00+07:00')) / 86400000);
}

function CampaignsScreen() {
  const app = useApp();
  const [filter, setFilter] = useStateCM('all');
  const [brandFilter, setBrandFilter] = useStateCM('all');
  const [open, setOpen] = useStateCM(null);

  const list = CAMPAIGNS.filter(c => {
    if (filter !== 'all' && c.status !== filter) return false;
    if (brandFilter !== 'all' && c.brand !== brandFilter) return false;
    return true;
  });

  const summary = {
    active: CAMPAIGNS.filter(c => c.status === 'active').length,
    upcoming: CAMPAIGNS.filter(c => c.status === 'upcoming').length,
    products: CAMPAIGNS.reduce((s, c) => s + c.productCount, 0),
    posted: CAMPAIGNS.reduce((s, c) => s + c.postedCount, 0),
  };

  return (
    <div className="page-pad wide">
      <div className="between" style={{ marginBottom: 14 }}>
        <div>
          <div className="t-h1">Chương trình KM</div>
          <div className="t-sm dim">Hệ thống scrape sale + event của từng brand theo lịch. Tạo bài tổng, carousel, lookbook hoặc series tự động.</div>
        </div>
        <Button variant="primary" icon="plus" onClick={() => app.toast('Cron sẽ scan lại trong 5 phút', 'rotate', 'var(--blue)')}>Quét lại ngay</Button>
      </div>

      {/* summary cards */}
      <div className="grid-4" style={{ marginBottom: 14 }}>
        <div className="stat"><div className="stat-top t-xs"><Icon name="play" size={13} style={{ color: 'var(--green)' }} /> Đang chạy</div><div className="stat-val">{summary.active}</div></div>
        <div className="stat"><div className="stat-top t-xs"><Icon name="clock" size={13} style={{ color: 'var(--blue)' }} /> Sắp tới</div><div className="stat-val">{summary.upcoming}</div></div>
        <div className="stat"><div className="stat-top t-xs"><Icon name="package" size={13} style={{ color: 'var(--accent)' }} /> Sản phẩm trong KM</div><div className="stat-val">{summary.products}</div></div>
        <div className="stat"><div className="stat-top t-xs"><Icon name="upload" size={13} style={{ color: 'var(--green)' }} /> Đã đăng</div><div className="stat-val">{summary.posted}</div></div>
      </div>

      {/* filters */}
      <div className="row gap-sm" style={{ marginBottom: 14, flexWrap: 'wrap' }}>
        <Seg value={filter} options={[
          { value: 'all', label: 'Tất cả' },
          { value: 'active', label: 'Đang chạy' },
          { value: 'upcoming', label: 'Sắp tới' },
          { value: 'ended', label: 'Đã kết thúc' },
        ]} onChange={setFilter} />
        <select className="select sm" value={brandFilter} onChange={e => setBrandFilter(e.target.value)} style={{ minWidth: 160 }}>
          <option value="all">Tất cả brand</option>
          {BRANDS.filter(b => b.enabled).map(b => <option key={b.key} value={b.key}>{b.name}</option>)}
        </select>
        <div className="topbar-spacer"></div>
        <span className="t-xs dimmer">{list.length} / {CAMPAIGNS.length} campaign</span>
      </div>

      {/* card grid */}
      <div className="grid-3 desktop-only" style={{ gap: 14 }}>
        {list.map(c => <CampaignCard key={c.id} c={c} onOpen={() => setOpen(c)} />)}
      </div>
      <div className="mobile-only col" style={{ gap: 10 }}>
        {list.map(c => <CampaignCard key={c.id} c={c} onOpen={() => setOpen(c)} />)}
      </div>

      {list.length === 0 && (
        <Empty icon="megaphone" title="Chưa có campaign" desc="Cron sẽ tự scan các trang sale theo lịch. Hoặc thêm thủ công từ trang Nguồn brand." />
      )}

      {open && <CampaignDrawer c={open} onClose={() => setOpen(null)} app={app} />}
    </div>
  );
}

function CampaignCard({ c, onOpen }) {
  const b = brandOf(c.brand);
  const s = CAMP_STATUS[c.status];
  const total = daysBetween(c.startAt, c.endAt);
  const dStart = daysFromNow(c.startAt);
  const dEnd = daysFromNow(c.endAt);
  const progress = c.productCount ? Math.round((c.postedCount / c.productCount) * 100) : 0;
  const timeLabel = c.status === 'upcoming' ? `Còn ${dStart} ngày nữa bắt đầu`
                   : c.status === 'active' ? `Còn ${dEnd} ngày kết thúc`
                   : `Đã kết thúc ${-dEnd} ngày trước`;

  return (
    <div className="card" style={{ overflow: 'hidden', cursor: 'pointer' }} onClick={onOpen}>
      {/* banner */}
      <div style={{ background: 'linear-gradient(135deg, ' + c.color + ' 0%, ' + c.color + 'aa 100%)', padding: '16px 14px', color: '#fff', position: 'relative' }}>
        <div className="between" style={{ alignItems: 'flex-start', marginBottom: 8 }}>
          <BrandLogo brand={b} size={32} />
          <span className={'badge ' + s.cls}><Icon name={s.icon} size={11} />{s.label}</span>
        </div>
        <div className="t-h2 clip-2" style={{ color: '#fff', marginBottom: 4 }}>{c.bannerLabel}</div>
        <div className="t-2xs" style={{ color: 'rgba(255,255,255,.85)' }}>{c.titleJp}</div>
      </div>

      <div className="card-pad">
        <div className="t-sm strong clip-2" style={{ marginBottom: 6, minHeight: 36 }}>{c.title}</div>
        <div className="t-2xs dim clip-2" style={{ marginBottom: 12, minHeight: 28 }}>{c.desc}</div>

        <div className="row gap-sm t-xs dimmer" style={{ marginBottom: 8 }}>
          <Icon name="calendar" size={12} />
          <span className="mono">{fmtDateShort(c.startAt)} → {fmtDateShort(c.endAt)}</span>
          <span>·</span>
          <span>{total} ngày</span>
        </div>
        <div className={'t-2xs strong ' + (c.status === 'active' ? '' : '')} style={{ color: c.status === 'active' ? 'var(--green)' : c.status === 'upcoming' ? 'var(--blue)' : 'var(--text-3)', marginBottom: 10 }}>
          {timeLabel}
        </div>

        <div className="row gap-sm t-2xs dimmer" style={{ marginBottom: 6 }}>
          <span>Đã đăng <span className="strong" style={{ color: 'var(--text)' }}>{c.postedCount}</span> / {c.productCount} sản phẩm</span>
          <div className="topbar-spacer"></div>
          <span className="mono">{progress}%</span>
        </div>
        <div style={{ height: 5, background: 'var(--surface-2)', borderRadius: 99, overflow: 'hidden' }}>
          <div style={{ width: progress + '%', height: '100%', background: c.color }}></div>
        </div>

        <div className="between" style={{ marginTop: 12 }}>
          <Badge variant="red">-{c.discount}%</Badge>
          <span className="t-2xs dimmer">Scrape {c.lastScraped}</span>
        </div>
      </div>
    </div>
  );
}

function CampaignDrawer({ c, onClose, app }) {
  const [tab, setTab] = useStateCM('overview');
  const b = brandOf(c.brand);
  const s = CAMP_STATUS[c.status];
  const products = productsInCampaign(c.id);
  const posts = POSTS.filter(p => p.campaignId === c.id);

  return (
    <Drawer
      title={c.bannerLabel}
      sub={`${b.name} · ${c.titleJp}`}
      onClose={onClose}
      head={<>
        <BrandLogo brand={b} size={36} />
        <div style={{ flex: 1, minWidth: 0 }}>
          <div className="t-h2 clip-1">{c.bannerLabel}</div>
          <div className="t-xs dimmer clip-1">{b.name} · {fmtDateShort(c.startAt)} → {fmtDateShort(c.endAt)}</div>
        </div>
        <span className={'badge ' + s.cls}><Icon name={s.icon} size={11} />{s.label}</span>
      </>}
      foot={<>
        <Button variant="ghost" icon="external" onClick={() => window.open('https://' + c.sourceUrl, '_blank')}>Xem nguồn</Button>
        <div className="topbar-spacer"></div>
        <Button variant="primary" icon="plus" onClick={() => setTab('create')}>Tạo bài cho campaign</Button>
      </>}
    >
      <Tabs active={tab} onChange={setTab} tabs={[
        { value: 'overview', label: 'Tổng quan' },
        { value: 'products', label: `Sản phẩm (${products.length})` },
        { value: 'posts',    label: `Bài đã đăng (${posts.length})` },
        { value: 'create',   label: 'Tạo bài' },
      ]} />

      <div style={{ paddingTop: 16 }}>
        {tab === 'overview' && <CampaignOverview c={c} b={b} />}
        {tab === 'products' && <CampaignProducts products={products} app={app} onClose={onClose} />}
        {tab === 'posts' && <CampaignPosts posts={posts} app={app} onClose={onClose} />}
        {tab === 'create' && <CampaignCreate c={c} products={products} app={app} onClose={onClose} />}
      </div>
    </Drawer>
  );
}

function CampaignOverview({ c, b }) {
  const total = daysBetween(c.startAt, c.endAt);
  return (
    <div className="col" style={{ gap: 14 }}>
      <div style={{ background: 'linear-gradient(135deg, ' + c.color + ' 0%, ' + c.color + 'aa 100%)', padding: 16, borderRadius: 'var(--r-md)', color: '#fff' }}>
        <div className="t-2xs strong" style={{ opacity: .8, marginBottom: 6 }}>BANNER PREVIEW</div>
        <div className="t-h1" style={{ color: '#fff', marginBottom: 4 }}>{c.bannerLabel}</div>
        <div className="t-sm" style={{ color: 'rgba(255,255,255,.9)' }}>{c.titleJp}</div>
      </div>

      <div className="card card-pad">
        <div className="t-2xs strong dimmer" style={{ marginBottom: 8 }}>MÔ TẢ</div>
        <div className="t-sm" style={{ marginBottom: 12 }}>{c.title}</div>
        <div className="t-xs dim">{c.desc}</div>
      </div>

      <div className="grid-2">
        <InfoBox icon="calendar" label="Thời gian">
          <div className="t-sm strong">{fmtDateShort(c.startAt)} → {fmtDateShort(c.endAt)}</div>
          <div className="t-2xs dimmer">{total} ngày · múi giờ Nhật</div>
        </InfoBox>
        <InfoBox icon="tag" label="Mức giảm">
          <div className="t-sm strong" style={{ color: 'var(--red)' }}>-{c.discount}%</div>
          <div className="t-2xs dimmer">Tối đa cho item lớn</div>
        </InfoBox>
        <InfoBox icon="package" label="Sản phẩm">
          <div className="t-sm strong">{c.productCount}</div>
          <div className="t-2xs dimmer">Đã scrape</div>
        </InfoBox>
        <InfoBox icon="upload" label="Bài đã đăng">
          <div className="t-sm strong">{c.postedCount}</div>
          <div className="t-2xs dimmer">{c.productCount ? Math.round((c.postedCount / c.productCount) * 100) : 0}% coverage</div>
        </InfoBox>
      </div>

      <div className="card card-pad">
        <div className="t-2xs strong dimmer" style={{ marginBottom: 8 }}>NGUỒN SCRAPE</div>
        <div className="row gap-sm">
          <Icon name="external" size={14} style={{ color: 'var(--accent)' }} />
          <a className="t-sm mono" style={{ color: 'var(--accent)' }} href={'https://' + c.sourceUrl} target="_blank">{c.sourceUrl}</a>
        </div>
        <div className="t-2xs dimmer" style={{ marginTop: 6 }}>Lần scrape gần nhất: {c.lastScraped}</div>
      </div>
    </div>
  );
}

function InfoBox({ icon, label, children }) {
  return (
    <div className="card card-pad">
      <div className="row gap-sm t-2xs strong dimmer" style={{ marginBottom: 6 }}>
        <Icon name={icon} size={13} />{label}
      </div>
      {children}
    </div>
  );
}

function CampaignProducts({ products, app, onClose }) {
  if (!products.length) {
    return <Empty icon="package" title="Chưa link sản phẩm" desc="Hệ thống chưa map sản phẩm nào vào campaign này. Sẽ tự link khi scrape lại." />;
  }
  return (
    <div className="col" style={{ gap: 8 }}>
      {products.map(p => {
        const b = brandOf(p.brand);
        return (
          <div key={p.id} className="row" style={{ gap: 10, padding: 10, background: 'var(--bg-2)', borderRadius: 'var(--r-md)', cursor: 'pointer' }}
               onClick={() => { onClose(); app.go('review', p.id); }}>
            <Placeholder label="" brand={b} ratio="1" style={{ width: 44, height: 44 }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="t-sm strong clip-1">{p.titleVn}</div>
              <div className="t-2xs dimmer">{fmtJPY(p.jpy)} → {fmtVND(p.vnd)}{p.disc > 0 ? ` · -${p.disc}%` : ''}</div>
            </div>
            <StatusPill status={p.status} />
          </div>
        );
      })}
    </div>
  );
}

function CampaignPosts({ posts, app, onClose }) {
  if (!posts.length) {
    return <Empty icon="upload" title="Chưa có bài nào" desc="Vào tab Tạo bài để bắt đầu." />;
  }
  return (
    <div className="col" style={{ gap: 8 }}>
      {posts.map(p => (
        <div key={p.id} className="row" style={{ gap: 10, padding: 10, background: 'var(--bg-2)', borderRadius: 'var(--r-md)', cursor: 'pointer' }}
             onClick={() => { onClose(); app.go('review', p.productId || (p.productIds && p.productIds[0])); }}>
          <div className="col" style={{ minWidth: 44, alignItems: 'center' }}>
            <Icon name={p.format === 'carousel' ? 'gallery' : p.format === 'composite' ? 'sparkle' : 'image'} size={20} style={{ color: 'var(--accent)' }} />
            <span className="t-2xs dimmer">{p.format}</span>
          </div>
          <div style={{ flex: 1, minWidth: 0 }}>
            <div className="t-sm clip-2">{p.caption.split('\n')[0]}</div>
            <div className="t-2xs dimmer">{(p.productIds || [p.productId]).length} sản phẩm · {p.genBy.split(' +')[0]}</div>
          </div>
          <StatusPill status={p.status} />
        </div>
      ))}
    </div>
  );
}

function CampaignCreate({ c, products, app, onClose }) {
  const [kind, setKind] = useStateCM('hero');
  const [picked, setPicked] = useStateCM([]);
  const [seriesCount, setSeriesCount] = useStateCM(Math.min(5, products.length));

  const togglePick = (id) => {
    setPicked(arr => arr.includes(id) ? arr.filter(x => x !== id) : [...arr, id].slice(-10));
  };

  const create = () => {
    const labels = { hero: 'bài tổng campaign', carousel: 'carousel ' + picked.length + ' sản phẩm', composite: 'lookbook AI ghép ' + picked.length + ' sản phẩm', series: 'chuỗi ' + seriesCount + ' bài theo lịch' };
    app.toast('Đã enqueue WF03: tạo ' + labels[kind], 'sparkle', 'var(--accent)');
    onClose();
  };

  const needsPick = kind === 'carousel' || kind === 'composite';
  const minPick = kind === 'carousel' ? 3 : 2;
  const maxPick = kind === 'carousel' ? 10 : 5;
  const canCreate = !needsPick || (picked.length >= minPick && picked.length <= maxPick);

  return (
    <div className="col" style={{ gap: 14 }}>
      <div className="t-2xs strong dimmer">CHỌN KIỂU BÀI</div>
      <div className="col" style={{ gap: 8 }}>
        {POST_KINDS.map(k => (
          <button key={k.id} onClick={() => { setKind(k.id); setPicked([]); }}
                  className={'card card-pad ' + (kind === k.id ? 'card-active' : '')}
                  style={{ textAlign: 'left', cursor: 'pointer', borderColor: kind === k.id ? 'var(--accent)' : undefined, background: kind === k.id ? 'var(--accent-soft)' : undefined, padding: 12 }}>
            <div className="row gap-sm" style={{ alignItems: 'flex-start' }}>
              <div style={{ width: 36, height: 36, borderRadius: 'var(--r-sm)', background: kind === k.id ? 'var(--accent)' : 'var(--surface-2)', color: kind === k.id ? 'var(--accent-text)' : 'var(--text)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                <Icon name={k.icon} size={18} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="t-sm strong" style={{ marginBottom: 2 }}>{k.label}</div>
                <div className="t-2xs dim">{k.desc}</div>
              </div>
              {kind === k.id && <Icon name="check" size={16} style={{ color: 'var(--accent)' }} />}
            </div>
          </button>
        ))}
      </div>

      {needsPick && (
        <>
          <div className="between" style={{ marginTop: 4 }}>
            <div className="t-2xs strong dimmer">CHỌN SẢN PHẨM ({minPick}-{maxPick})</div>
            <span className={'t-2xs mono ' + (picked.length < minPick || picked.length > maxPick ? 'badge-red' : '')} style={{ color: picked.length >= minPick && picked.length <= maxPick ? 'var(--green)' : 'var(--text-3)' }}>{picked.length} đã chọn</span>
          </div>
          {products.length === 0 ? (
            <div className="panel" style={{ padding: 14, textAlign: 'center' }}>
              <span className="t-xs dim">Campaign chưa có sản phẩm. Đợi cron link lại.</span>
            </div>
          ) : (
            <div className="col" style={{ gap: 6, maxHeight: 280, overflowY: 'auto' }}>
              {products.map(p => {
                const on = picked.includes(p.id);
                const b = brandOf(p.brand);
                return (
                  <div key={p.id} onClick={() => togglePick(p.id)}
                       className="row" style={{ gap: 10, padding: 8, borderRadius: 'var(--r-sm)', cursor: 'pointer', background: on ? 'var(--accent-soft)' : 'var(--bg-2)', border: '1px solid ' + (on ? 'var(--accent)' : 'transparent') }}>
                    <Checkbox on={on} onChange={() => togglePick(p.id)} />
                    <Placeholder label="" brand={b} ratio="1" style={{ width: 36, height: 36 }} />
                    <div style={{ flex: 1, minWidth: 0 }}>
                      <div className="t-xs strong clip-1">{p.titleVn}</div>
                      <div className="t-2xs dimmer mono">{fmtVND(p.vnd)}</div>
                    </div>
                    <Score value={p.score} />
                  </div>
                );
              })}
            </div>
          )}
        </>
      )}

      {kind === 'series' && (
        <div className="card card-pad" style={{ background: 'var(--bg-2)' }}>
          <Field label="Số bài muốn rải" hint={`Trải đều suốt ${daysBetween(c.startAt, c.endAt)} ngày campaign · tránh trùng giờ vàng đã có bài khác`}>
            <input className="input mono" type="number" min={1} max={products.length || 20} value={seriesCount} onChange={e => setSeriesCount(parseInt(e.target.value) || 1)} />
          </Field>
          <div className="t-2xs dim" style={{ marginTop: 8 }}>
            Hệ thống sẽ tự chia khoảng cách, ưu tiên sản phẩm có điểm cao trước. Mỗi bài 1 sản phẩm, vẫn qua khâu duyệt text + ảnh.
          </div>
        </div>
      )}

      {kind === 'hero' && (
        <div className="card card-pad" style={{ background: 'var(--bg-2)' }}>
          <div className="t-2xs strong dimmer" style={{ marginBottom: 6 }}>PREVIEW CAPTION DỰ KIẾN</div>
          <div className="t-xs mono dim" style={{ whiteSpace: 'pre-wrap', lineHeight: 1.6 }}>
            {`🔥 ${c.title}\n\n📅 ${fmtDateShort(c.startAt)} → ${fmtDateShort(c.endAt)} (giờ Nhật)\n💸 Giảm tới ${c.discount}% — ${c.productCount} sản phẩm\n\n${c.desc}\n\nInbox Zei JP để chốt đơn nhé!\n\n#ZeiJP #sale #${brandOf(c.brand).safe.replace(/\./g,'')}Nhat`}
          </div>
          <div className="t-2xs dimmer" style={{ marginTop: 8 }}>LLM sẽ refine + brand-safe check trước khi đưa vào khâu duyệt.</div>
        </div>
      )}

      <div className="row gap-sm" style={{ marginTop: 4 }}>
        <Button variant="ghost" onClick={onClose}>Hủy</Button>
        <div className="topbar-spacer"></div>
        <Button variant="primary" icon="sparkle" onClick={create} disabled={!canCreate}>
          Tạo {kind === 'hero' ? '1 bài tổng' : kind === 'series' ? seriesCount + ' bài chuỗi' : kind === 'carousel' ? 'carousel ' + picked.length : 'lookbook ' + picked.length}
        </Button>
      </div>
    </div>
  );
}

Object.assign(window, { CampaignsScreen });