/* page-ai-companion.jsx — AI Companion content (03-ui §2). IIFE-scoped; exports via window. */
(function(){
const { useState, useMemo } = React;

// Active language set = union of non-suspended countries' supported_languages.
const AI_LANG_LABELS = { en: "English", fil: "Filipino", id: "Bahasa Indonesia", th: "Thai", ms: "Malay" };
const AI_TRIGGER_LABELS = {
  order_first_purchase: "First purchase",
  streak_3_days:        "3-day streak",
  loyalty_500_points:   "500-point milestone",
  cart_abandoned_6h:    "Cart abandoned (6h)",
  outlet_reopened:      "Outlet reopened",
};
const AI_TRIGGER_KEYS = Object.keys(AI_TRIGGER_LABELS);

/**
 * @spec US-051 — AI Companion (emotional-nudge content)
 * Platform-global, GA-managed. GA = CRUD; CM/AM/OM = read-only.
 * One-way prescribed CTAs (no conversational path); body localised per language.
 */
function AIContent({ role = "GA" }) {
  const isGA = role === "GA";

  const activeLangCodes = useMemo(() => Array.from(new Set(
    SB2_COUNTRIES.flatMap(c => c.supported_languages)
  )), []);
  const charById = useMemo(() => Object.fromEntries(SB4_CHARACTERS.map(c => [c.id, c.name])), []);
  const charLabel = (id) => charById[id] || "—";

  const [filters, setFilters] = useState({});
  const [searchQuery, setSearchQuery] = useState("");
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(20);
  const [selected, setSelected] = useState({});
  const [drawerFor, setDrawerFor] = useState(null);
  const [form, setForm] = useState(null);
  const [editing, setEditing] = useState(false);
  const [flagFor, setFlagFor] = useState(null);
  const [flagReason, setFlagReason] = useState("");
  const [confirmDelete, setConfirmDelete] = useState(false);
  const [toast, setToast] = useState(null);

  const fireToast = (msg) => { setToast(msg); setTimeout(() => setToast(null), 2200); };

  // ── filtering ──
  const charFilter = Array.isArray(filters.character_id) ? filters.character_id : [];
  const rows = SB4_AI.filter(r => {
    if (filters.status && r.status !== filters.status) return false;
    if (charFilter.length && !charFilter.includes(r.character_id)) return false;
    if (isGA && filters.trigger && r.trigger !== filters.trigger) return false;
    if (isGA && filters.flagged === "yes" && !r.flagged) return false;
    if (isGA && filters.flagged === "no" && r.flagged) return false;
    if (searchQuery) {
      const q = searchQuery.toLowerCase();
      const hay = [r.title, AI_TRIGGER_LABELS[r.trigger] || r.trigger, charLabel(r.character_id)].join(" ").toLowerCase();
      if (!hay.includes(q)) return false;
    }
    return true;
  });
  const totalPages = Math.max(1, Math.ceil(rows.length / pageSize));
  const visibleRows = rows.slice((page - 1) * pageSize, page * pageSize);

  // ── selection (GA only) ──
  const selectedIds = Object.keys(selected).filter(k => k !== "all" && selected[k]);
  const selectedCount = selected.all ? rows.length : selectedIds.length;
  const onToggleSelected = (id) => {
    if (id === "all") {
      setSelected(s => s.all ? {} : { all: true });
    } else {
      setSelected(s => { const n = { ...s, [id]: !s[id] }; delete n.all; return n; });
    }
  };
  const clearSelection = () => setSelected({});
  const effectiveSelectedIds = selected.all ? rows.map(r => r.id) : selectedIds;
  const selectedDraftCount = effectiveSelectedIds.filter(id => (SB4_AI.find(r => r.id === id) || {}).status === "draft").length;

  // ── drawer ──
  const openDrawer = (row) => { setDrawerFor(row.id); setForm({ ...row, body: { ...row.body } }); setEditing(false); };
  const createNew = () => {
    setDrawerFor("new");
    setForm({
      id: "new", title: "", character_id: "", trigger: "", status: "draft",
      flagged: false, flag_reason: "", cta_label: "", cta_target: "",
      impressions: 0, clicks_cta: 0, clicks_close: 0,
      body: Object.fromEntries(activeLangCodes.map(c => [c, ""])),
    });
    setEditing(true);
  };
  const closeDrawer = () => { setDrawerFor(null); setForm(null); setEditing(false); };
  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
  const setBody = (lang, v) => setForm(f => ({ ...f, body: { ...f.body, [lang]: v } }));

  const onSave = () => {
    _pushAudit({ action: form.id === "new" ? "character_context_create" : "character_context_update", entity_type: "character_contexts", entity_id: form.id, diff: form });
    closeDrawer();
    fireToast("Nudge saved · audit_logs updated");
  };
  const setStatus = (next) => {
    _pushAudit({ action: "character_context_status", entity_type: "character_contexts", entity_id: form.id, diff: { status: next } });
    set("status", next);
    fireToast(next === "published" ? "Nudge published" : "Nudge unpublished");
  };
  const doUnflag = () => {
    _pushAudit({ action: "character_context_unflag", entity_type: "character_contexts", entity_id: form.id });
    setForm(f => ({ ...f, flagged: false, flag_reason: "" }));
    fireToast("Flag cleared");
  };
  const submitFlag = () => {
    _pushAudit({ action: "character_context_flag", entity_type: "character_contexts", entity_id: flagFor, diff: { flag_reason: flagReason } });
    setForm(f => ({ ...f, flagged: true, flag_reason: flagReason }));
    setFlagFor(null); setFlagReason("");
    fireToast("Nudge flagged for review");
  };
  const bulkPublish = (next) => {
    _pushAudit({ action: "character_context_bulk_status", entity_type: "character_contexts", entity_id: null, diff: { ids: effectiveSelectedIds, status: next } });
    clearSelection();
    fireToast(`${effectiveSelectedIds.length} nudge(s) ${next === "published" ? "published" : "unpublished"}`);
  };
  const bulkDelete = () => {
    _pushAudit({ action: "character_context_bulk_delete", entity_type: "character_contexts", entity_id: null, diff: { ids: effectiveSelectedIds.filter(id => (SB4_AI.find(r => r.id === id) || {}).status === "draft") } });
    setConfirmDelete(false); clearSelection();
    fireToast("Draft nudge(s) deleted");
  };
  const bulkExport = () => fireToast(`Exporting ${effectiveSelectedIds.length} nudge(s)…`);

  // ── columns ──
  const baseColumns = [
    { label: "Nudge", sortable: true, sortKey: "title", render: r => (
      <div className="row" style={{ gap: 8, minWidth: 0, alignItems: "center" }}>
        <span style={{ ...T.primary() }}>{r.title || "Untitled"}</span>
        {r.flagged && <LIcon name="TriangleAlert" size={14} strokeWidth={2.2} color="var(--berry)"/>}
      </div>
    ) },
    { label: "Character", width: 150, sortable: true, sortKey: "character_id", render: r => <span style={{ ...T_MUTED }}>{charLabel(r.character_id)}</span> },
    { label: "Trigger", width: 180, sortable: true, sortKey: "trigger", render: r => <span style={{ ...T_MUTED }}>{AI_TRIGGER_LABELS[r.trigger] || r.trigger}</span> },
    { label: "Status", width: 120, sortable: true, sortKey: "status", render: r => <StatusPill status={r.status} kind="content"/> },
  ];
  const gaColumns = [
    { label: "Impr.", width: 84, sortable: true, sortKey: "impressions", render: r => <span style={T.amount}>{(r.impressions || 0).toLocaleString()}</span> },
    { label: "CTA",   width: 76, sortable: true, sortKey: "clicks_cta",   render: r => <span style={T.amount}>{(r.clicks_cta || 0).toLocaleString()}</span> },
    { label: "Dism.", width: 80, sortable: true, sortKey: "clicks_close", render: r => <span style={T.amount}>{(r.clicks_close || 0).toLocaleString()}</span> },
    { label: "Updated", width: 104, sortable: true, sortKey: "updated_at",   render: r => <span style={{ ...T_MUTED }}>{_fmtDate(r.updated_at, r.country_id || "SG")}</span> },
  ];
  const columns = isGA ? [...baseColumns, ...gaColumns] : baseColumns;

  // ── filters config ──
  const advancedFilters = [
    { key: "character_id", kind: "select", multi: true, label: "Character",
      options: SB4_CHARACTERS.map(c => ({ value: c.id, label: c.name })) },
    ...(isGA ? [
      { key: "trigger", kind: "select", label: "Trigger",
        options: [{ value: "", label: "All triggers" }, ...AI_TRIGGER_KEYS.map(k => ({ value: k, label: AI_TRIGGER_LABELS[k] }))] },
      { key: "flagged", kind: "select", label: "Flagged",
        options: [{ value: "", label: "All" }, { value: "yes", label: "Flagged only" }, { value: "no", label: "Not flagged" }] },
      { key: "created_at", kind: "date", label: "Date added" },
    ] : []),
  ];

  const description = isGA ? "Emotional-nudge content for companions." : "Companion nudges (read-only).";

  return (
    <div className="page-inner">
      <PageHead title="AI Companion" description={description}
        actions={isGA ? <Btn variant="primary" onClick={createNew}>New nudge</Btn> : null}/>

      <FilterBar
        primaryFilter={{ key: "status", label: "Status", options: [
          { value: "", label: "All statuses" },
          { value: "draft", label: "draft" },
          { value: "published", label: "published" },
        ]}}
        primaryValue={filters.status || ""}
        onPrimaryChange={v => { setFilters(f => ({ ...f, status: v })); setPage(1); }}
        advancedFilters={advancedFilters}
        advancedValues={filters}
        onAdvancedChange={(k, v) => { setFilters(f => ({ ...f, [k]: v })); setPage(1); }}
        onAdvancedReset={() => setFilters(f => ({ status: f.status || "" }))}
        onReset={() => { setFilters({}); setSearchQuery(""); setPage(1); }}
        search={searchQuery}
        onSearch={v => { setSearchQuery(v); setPage(1); }}
        searchPlaceholder="Search nudges…"/>

      {isGA && (
        <BulkBar selectedCount={selectedCount} onDeselect={clearSelection}
          actions={
            <>
              <Btn variant="ghost" onClick={() => bulkPublish("published")}>Publish</Btn>
              <Btn variant="ghost" onClick={() => bulkPublish("draft")}>Unpublish</Btn>
              <Btn variant="ghost" onClick={bulkExport}>Export</Btn>
              <Btn variant="danger" onClick={() => setConfirmDelete(true)} disabled={selectedDraftCount === 0}>Delete drafts</Btn>
            </>
          }/>
      )}

      <Table
        emptyText="No nudges match these filters."
        columns={columns}
        rows={visibleRows}
        onRow={openDrawer}
        selected={isGA ? selected : undefined}
        onToggleSelected={isGA ? onToggleSelected : undefined}/>

      <TableFooter page={page} totalPages={totalPages} onPage={setPage} count={pageSize} onCountChange={c => { setPageSize(c); setPage(1); }}/>

      <DetailDrawer
        open={!!drawerFor}
        onClose={closeDrawer}
        title={form && form.id === "new" ? "New nudge" : (form ? (form.title || "Nudge") : "")}
        subtitle={form ? charLabel(form.character_id) : ""}
        actions={form && (
          editing ? (
            <>
              <Btn variant="secondary" onClick={() => form.id === "new" ? closeDrawer() : setEditing(false)}>Cancel</Btn>
              <Btn variant="primary" onClick={onSave}>Save</Btn>
            </>
          ) : isGA ? (
            <>
              {form.flagged
                ? <Btn variant="ghost" onClick={doUnflag}>Unflag</Btn>
                : <Btn variant="ghost" onClick={() => { setFlagFor(form.id); setFlagReason(""); }}>Flag</Btn>}
              {form.status === "published"
                ? <Btn variant="secondary" onClick={() => setStatus("draft")}>Unpublish</Btn>
                : <Btn variant="secondary" onClick={() => setStatus("published")}>Publish</Btn>}
              <Btn variant="primary" onClick={() => setEditing(true)}>Edit</Btn>
            </>
          ) : null
        )}
        width={700}>
        {form && !editing && (
          <>
            <div style={{ marginBottom: 8 }}><StatusPill status={form.status} kind="content"/></div>
            {form.flagged && (
              <InlineAlert kind="warn"><strong>Flagged for review.</strong> {form.flag_reason}</InlineAlert>
            )}

            <FormSection title="Content">
              <KeyValueGrid items={[
                { label: "Title", value: form.title || "—" },
                { label: "Character", value: charLabel(form.character_id) },
              ]}/>
              <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 10 }}>
                {activeLangCodes.map(code => (
                  <Field key={code} label={`Body · ${AI_LANG_LABELS[code] || code}`}>
                    <div style={{ ...T_MUTED, whiteSpace: "pre-wrap" }}>{(form.body[code] || "").trim() || "—"}</div>
                  </Field>
                ))}
              </div>
            </FormSection>

            <FormSection title="Trigger">
              <KeyValueGrid items={[
                { label: "Trigger", value: AI_TRIGGER_LABELS[form.trigger] || form.trigger || "—" },
                { label: "CTA label", value: form.cta_label || "—" },
                { label: "CTA target", value: form.cta_target || "—" },
              ]}/>
            </FormSection>

            <FormSection title="Status">
              <KeyValueGrid items={[
                { label: "Status", value: form.status },
                { label: "Flagged", value: form.flagged ? "Yes" : "No" },
                { label: "Flag reason", value: form.flagged ? (form.flag_reason || "—") : "—" },
                { label: "Created by", value: form.created_by || "—" },
                { label: "Updated", value: _fmtDate(form.updated_at, form.country_id || "SG") },
              ]}/>
            </FormSection>

            <FormSection title="Metrics">
              <KeyValueGrid items={[
                { label: "Impressions", value: (form.impressions || 0).toLocaleString() },
                { label: "CTA clicks", value: (form.clicks_cta || 0).toLocaleString() },
                { label: "Dismissed", value: (form.clicks_close || 0).toLocaleString() },
              ]}/>
            </FormSection>
          </>
        )}

        {form && editing && (
          <>
            <FormSection title="Content">
              <Field label="Title" required>
                <Input value={form.title} onChange={v => set("title", v)} placeholder="e.g. First-order welcome"/>
              </Field>
              <Field label="Character">
                <Select value={form.character_id} onChange={v => set("character_id", v)} placeholder="No character">
                  <option value="">No character</option>
                  {SB4_CHARACTERS.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                </Select>
              </Field>
              <div style={{ marginTop: 4, display: "flex", flexDirection: "column", gap: 10 }}>
                {activeLangCodes.map(code => (
                  <Field key={code} label={`Body · ${AI_LANG_LABELS[code] || code}`}>
                    <Textarea value={form.body[code] || ""} onChange={v => setBody(code, v)} rows={3}
                      placeholder={`Nudge copy · ${AI_LANG_LABELS[code] || code}`}/>
                  </Field>
                ))}
              </div>
            </FormSection>

            <FormSection title="Trigger">
              <Field label="Trigger" required>
                <Select value={form.trigger} onChange={v => set("trigger", v)} placeholder="Select a trigger">
                  {AI_TRIGGER_KEYS.map(k => <option key={k} value={k}>{AI_TRIGGER_LABELS[k]}</option>)}
                </Select>
              </Field>
              <Field label="CTA label" hint="Optional one-way call-to-action.">
                <Input value={form.cta_label} onChange={v => set("cta_label", v)} placeholder="e.g. View rewards"/>
              </Field>
              <Field label="CTA target">
                <Input value={form.cta_target} onChange={v => set("cta_target", v)} placeholder="e.g. rewards_tab"/>
              </Field>
            </FormSection>

            <FormSection title="Status">
              <Field label="Status">
                <Select value={form.status} onChange={v => set("status", v)}>
                  <option value="draft">draft</option>
                  <option value="published">published</option>
                </Select>
              </Field>
            </FormSection>
          </>
        )}
      </DetailDrawer>

      <ConfirmModal
        open={confirmDelete}
        title="Delete draft nudges?"
        body={<div>Only draft nudges in your selection will be deleted. Published nudges are unaffected. This cannot be undone.</div>}
        confirmLabel="Delete drafts"
        onCancel={() => setConfirmDelete(false)}
        onConfirm={bulkDelete}/>

      <ConfirmModal
        open={!!flagFor}
        title="Flag this nudge?"
        body={
          <Field label="Reason" required>
            <Input value={flagReason} onChange={setFlagReason} placeholder="Why is this nudge flagged?"/>
          </Field>
        }
        confirmLabel="Flag"
        onCancel={() => { setFlagFor(null); setFlagReason(""); }}
        onConfirm={submitFlag}/>

      <Toast message={toast || ""} show={!!toast}/>
    </div>
  );
}

Object.assign(window, { AIContent });
})();