// Canned responses page
const { Card: CnCard, Pill: CnPill, Btn: CnBtn, Topbar: CnTopbar, Modal: CnModal, Field: CnField, Input: CnInput, Textarea: CnArea } = window.UI;

function Canned() {
  const [list, setList] = React.useState(window.Mock.cannedResponses || []);
  const [activeId, setActiveId] = React.useState((window.Mock.cannedResponses || [])[0]?.id || null);
  const [search, setSearch] = React.useState("");
  const [showAdd, setShowAdd] = React.useState(false);
  const [showEdit, setShowEdit] = React.useState(false);
  const [form, setForm] = React.useState({ title: "", shortcut: "", body: "" });
  const [editForm, setEditForm] = React.useState({ title: "", shortcut: "", body: "" });
  const [busy, setBusy] = React.useState(false);
  const [toast, setToast] = React.useState(null);

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

  const reload = async () => {
    await window.LoopData.bootstrap();
    const updated = window.Mock.cannedResponses || [];
    setList(updated);
    return updated;
  };

  const filtered = list.filter(r => {
    if (!search) return true;
    const q = search.toLowerCase();
    return (r.title || "").toLowerCase().includes(q) ||
           (r.shortcut || "").toLowerCase().includes(q) ||
           (r.body || "").toLowerCase().includes(q);
  });

  const active = list.find(r => r.id === activeId) || null;

  // ---- Handlers ---------------------------------------------------------------
  const handleSave = async () => {
    if (!form.title || !form.body) return;
    setBusy(true);
    try {
      const created = await window.LoopData.adminCreate("canned", form);
      const updated = await reload();
      setActiveId(created.id || (updated[0]?.id ?? null));
      setShowAdd(false);
      setForm({ title: "", shortcut: "", body: "" });
      showToast("Response saved ✓");
    } finally { setBusy(false); }
  };

  const openEdit = () => {
    if (!active) return;
    setEditForm({ title: active.title, shortcut: active.shortcut || "", body: active.body || "" });
    setShowEdit(true);
  };

  const handleEditSave = async () => {
    if (!editForm.title || !editForm.body) return;
    setBusy(true);
    try {
      await window.LoopData.adminUpdate("canned", activeId, editForm);
      await reload();
      setShowEdit(false);
      showToast("Changes saved ✓");
    } finally { setBusy(false); }
  };

  const handleDuplicate = async () => {
    if (!active) return;
    const copy = {
      title: active.title + " (copy)",
      shortcut: (active.shortcut || "").replace(/\/$/, "") + "-copy",
      body: active.body || "",
    };
    setBusy(true);
    try {
      const created = await window.LoopData.adminCreate("canned", copy);
      const updated = await reload();
      setActiveId(created.id || (updated[0]?.id ?? null));
      showToast("Duplicated ✓");
    } finally { setBusy(false); }
  };

  const handleDelete = async () => {
    if (!active || !window.confirm(`Delete "${active.title}"?`)) return;
    setBusy(true);
    try {
      await window.LoopData.adminDelete("canned", activeId);
      const updated = await reload();
      setActiveId(updated[0]?.id ?? null);
      showToast("Deleted");
    } finally { setBusy(false); }
  };

  // ---- Render -----------------------------------------------------------------
  return (
    <div className="flex-1 flex flex-col h-full overflow-hidden">
      <CnTopbar
        title="Canned Responses"
        subtitle={`${list.length} shortcuts · type / in any chat to insert`}
        right={
          <CnBtn variant="primary" onClick={() => { setForm({ title: "", shortcut: "", body: "" }); setShowAdd(true); }}>
            <Icon.Plus size={14}/> New response
          </CnBtn>
        }
      />

      <div className="flex-1 grid grid-cols-[340px_1fr] min-h-0">
        {/* Sidebar list */}
        <aside className="border-r border-white/[0.05] flex flex-col min-h-0 bg-ink-950/30">
          <div className="p-3 border-b border-white/[0.05]">
            <div className="relative">
              <Icon.Search size={14} className="absolute left-3 top-1/2 -translate-y-1/2 text-white/40"/>
              <input
                className="w-full h-9 pl-8 pr-3 rounded-xl bg-white/[0.03] border border-white/[0.07] text-[12.5px] outline-none focus:border-lime/40 text-white/90 placeholder:text-white/30"
                placeholder="Search shortcuts…"
                value={search}
                onChange={e => setSearch(e.target.value)}
              />
            </div>
          </div>
          <div className="flex-1 overflow-y-auto p-1.5">
            {filtered.length === 0 && (
              <div className="text-center text-[12px] text-white/35 py-10">
                {search ? "No matches" : "No canned responses yet"}
              </div>
            )}
            {filtered.map(r => {
              const isActive = r.id === activeId;
              return (
                <button key={r.id} onClick={() => setActiveId(r.id)}
                  className={`w-full text-left p-3 rounded-xl flex items-start gap-3 mb-0.5 transition ${isActive ? "bg-white/[0.05] border border-white/[0.06]" : "hover:bg-white/[0.03]"}`}>
                  <div className="grid place-items-center w-8 h-8 rounded-lg bg-lime/10 text-lime border border-lime/20 shrink-0">
                    <Icon.Bookmark size={14}/>
                  </div>
                  <div className="flex-1 min-w-0">
                    <div className="text-[12.5px] font-medium text-white/95 truncate">{r.title}</div>
                    <span className="text-[10.5px] font-mono text-lime">{r.shortcut}</span>
                    <div className="text-[11.5px] text-white/55 line-clamp-2 mt-1 leading-snug">{r.body}</div>
                  </div>
                </button>
              );
            })}
          </div>
        </aside>

        {/* Detail panel */}
        <main className="overflow-y-auto p-7 max-w-[760px]">
          {active ? (
            <CnCard padded={false}>
              <div className="p-5 border-b border-white/[0.05] flex items-center justify-between">
                <div className="flex items-center gap-3">
                  <div className="grid place-items-center w-10 h-10 rounded-xl bg-lime/10 text-lime border border-lime/25">
                    <Icon.Bookmark size={16}/>
                  </div>
                  <div>
                    <div className="text-[15px] font-medium text-white/95">{active.title}</div>
                    <div className="text-[11.5px] text-white/45">
                      Shortcut <span className="font-mono text-lime">{active.shortcut || "—"}</span>
                    </div>
                  </div>
                </div>
                <div className="flex items-center gap-1.5">
                  <CnBtn size="sm" variant="ghost" onClick={openEdit} disabled={busy}>
                    <Icon.Edit size={13}/> Edit
                  </CnBtn>
                  <CnBtn size="sm" variant="ghost" onClick={handleDuplicate} disabled={busy}>
                    <Icon.Copy size={13}/> Duplicate
                  </CnBtn>
                  <CnBtn size="sm" variant="danger" onClick={handleDelete} disabled={busy}>
                    <Icon.Trash size={13}/>
                  </CnBtn>
                </div>
              </div>
              <div className="p-6">
                <div className="rounded-xl bg-white/[0.02] border border-white/[0.06] p-5">
                  <div className="text-[14.5px] text-white/90 leading-relaxed whitespace-pre-line">{active.body}</div>
                </div>

                <div className="mt-6">
                  <div className="text-[10.5px] uppercase tracking-wider text-white/40 mb-2">Variables you can use</div>
                  <div className="flex flex-wrap gap-1.5">
                    {["{name}","{username}","{site}","{page}","{agent}","{order_id}"].map(v => (
                      <span key={v} className="text-[11px] font-mono px-2 py-0.5 rounded-md bg-lime/10 text-lime border border-lime/25">{v}</span>
                    ))}
                  </div>
                </div>
              </div>
            </CnCard>
          ) : (
            <div className="grid place-items-center h-64 text-white/35 text-[13px]">
              {list.length === 0 ? "No canned responses yet — add one above" : "Select a response to preview"}
            </div>
          )}
        </main>
      </div>

      {/* Toast */}
      {toast && (
        <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 px-4 py-2 rounded-xl bg-ink-800 border border-white/[0.1] text-[12.5px] text-white/90 shadow-xl">
          {toast}
        </div>
      )}

      {/* New response modal */}
      <CnModal open={showAdd} onClose={() => setShowAdd(false)} title="New canned response" subtitle="Reusable replies your team can drop into any chat." width={560}>
        <div className="space-y-4">
          <div className="grid grid-cols-[1fr_180px] gap-3">
            <CnField label="Title">
              <CnInput value={form.title} onChange={e => setForm(f => ({ ...f, title: e.target.value }))} placeholder="e.g. Greeting · Tagalog"/>
            </CnField>
            <CnField label="Shortcut">
              <CnInput value={form.shortcut} onChange={e => setForm(f => ({ ...f, shortcut: e.target.value }))} placeholder="/hello" className="font-mono"/>
            </CnField>
          </div>
          <CnField label="Response body" hint="Use {name}, {site}, {agent} for variables.">
            <CnArea rows={5} value={form.body} onChange={e => setForm(f => ({ ...f, body: e.target.value }))} placeholder="Hi po! Salamat sa pag-message…"/>
          </CnField>
          <div className="flex justify-end gap-2 pt-2">
            <CnBtn variant="quiet" onClick={() => setShowAdd(false)}>Cancel</CnBtn>
            <CnBtn variant="primary" onClick={handleSave} disabled={busy || !form.title || !form.body}>
              {busy ? "Saving…" : "Save response"}
            </CnBtn>
          </div>
        </div>
      </CnModal>

      {/* Edit modal */}
      <CnModal open={showEdit} onClose={() => setShowEdit(false)} title="Edit canned response" width={560}>
        <div className="space-y-4">
          <div className="grid grid-cols-[1fr_180px] gap-3">
            <CnField label="Title">
              <CnInput value={editForm.title} onChange={e => setEditForm(f => ({ ...f, title: e.target.value }))} placeholder="e.g. Greeting · Tagalog"/>
            </CnField>
            <CnField label="Shortcut">
              <CnInput value={editForm.shortcut} onChange={e => setEditForm(f => ({ ...f, shortcut: e.target.value }))} placeholder="/hello" className="font-mono"/>
            </CnField>
          </div>
          <CnField label="Response body" hint="Use {name}, {site}, {agent} for variables.">
            <CnArea rows={5} value={editForm.body} onChange={e => setEditForm(f => ({ ...f, body: e.target.value }))} placeholder="Hi po! Salamat sa pag-message…"/>
          </CnField>
          <div className="flex justify-end gap-2 pt-2">
            <CnBtn variant="quiet" onClick={() => setShowEdit(false)}>Cancel</CnBtn>
            <CnBtn variant="primary" onClick={handleEditSave} disabled={busy || !editForm.title || !editForm.body}>
              {busy ? "Saving…" : "Save changes"}
            </CnBtn>
          </div>
        </div>
      </CnModal>
    </div>
  );
}

window.Canned = Canned;