lynkeduppro-crm/src/components/dashboard/mail.tsx

"use client";

// ============================================================
// Mail — a dedicated reader for app-to-app and email messages,
// powered by IIOS via the be-crm data door (crm.mail.*). Distinct
// from Messenger (chat) and from the work-item Inbox: this shows the
// actual mail (subject + rendered body) and lets you read + reply +
// compose. HTML bodies render inside a sandboxed iframe (no scripts).
// ============================================================

import { type CSSProperties, useEffect, useState } from "react";
import { Avatar, Btn, Field, Icon, Modal, PageHead, Pill, useToast } from "./ui";
import { useMailThreads, useMailThread, useMailCompose, type MailThread, type MailPerson } from "@/lib/mail-api";

const timeOf = (iso?: string) => {
  if (!iso) return "";
  const d = new Date(iso);
  return Number.isNaN(+d) ? "" : d.toLocaleString([], { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
};
const CUSTOMER_GRAD = "linear-gradient(135deg,#10b981,#059669)";
const inputStyle: CSSProperties = {
  width: "100%", padding: "9px 12px", borderRadius: 10, border: "1px solid var(--border)",
  background: "var(--panel)", color: "var(--text)", fontSize: 14, outline: "none",
};

export function Mail() {
  const list = useMailThreads();
  const toast = useToast();
  const [selected, setSelected] = useState<string | null>(null);
  const [newOpen, setNewOpen] = useState(false);

  useEffect(() => {
    if ((!selected || !list.threads.some((t) => t.threadId === selected)) && list.threads[0]) {
      setSelected(list.threads[0].threadId);
    }
  }, [list.threads, selected]);

  const current = list.threads.find((t) => t.threadId === selected) ?? null;

  return (
    <div className="view">
      <PageHead
        eyebrow="Communication" title="Mail" subtitle="Read and send app messages and email — everything in one place" icon="chat"
        actions={<Btn icon="plus" onClick={() => setNewOpen(true)}>New mail</Btn>}
      />
      {!list.live && (
        <div style={{ margin: "0 0 14px", padding: "8px 14px", borderRadius: 10, background: "var(--panel-2)", color: "var(--muted)", fontSize: 13, border: "1px solid var(--border)" }}>
          Demo mode — running on mock data. It goes live once the Shell + be-crm are connected.
        </div>
      )}

      <div className="card" style={{ display: "flex", height: 640, padding: 0, overflow: "hidden" }}>
        <aside style={{ width: 320, borderRight: "1px solid var(--border)", overflowY: "auto", background: "var(--panel)" }}>
          {list.loading && <div style={{ padding: 16, color: "var(--muted)" }}>Loading…</div>}
          {!list.loading && list.threads.length === 0 && (
            <div style={{ padding: 16, color: "var(--muted)" }}>No mail yet. Compose a new message.</div>
          )}
          {list.threads.map((t) => (
            <ThreadRow key={t.threadId} t={t} active={t.threadId === selected} onClick={() => setSelected(t.threadId)} />
          ))}
        </aside>

        <section style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, background: "var(--bg)" }}>
          {current ? (
            <Reader key={current.threadId} thread={current} onError={(m) => toast.push({ tone: "error", title: "Failed", desc: m })} />
          ) : (
            <div style={{ margin: "auto", color: "var(--muted)", textAlign: "center" }}>
              <Icon name="chat" size={38} /><p>Select or compose a message</p>
            </div>
          )}
        </section>
      </div>

      <NewMailModal
        open={newOpen} onClose={() => setNewOpen(false)}
        onSent={() => { setNewOpen(false); list.refetch(); toast.push({ tone: "success", title: "Sent" }); }}
        onError={(m) => toast.push({ tone: "error", title: "Couldn't send", desc: m })}
      />
    </div>
  );
}

function ThreadRow({ t, active, onClick }: { t: MailThread; active: boolean; onClick: () => void }) {
  return (
    <button
      onClick={onClick}
      style={{
        display: "block", width: "100%", textAlign: "left", padding: "12px 16px", border: "none",
        borderBottom: "1px solid var(--border)", cursor: "pointer",
        background: active ? "var(--panel-2)" : "transparent", color: "var(--text)",
      }}
    >
      <div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "center" }}>
        <span style={{ fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{t.subject || "(no subject)"}</span>
        <span style={{ color: "var(--muted)", fontSize: 11, flexShrink: 0 }}>{timeOf(t.lastAt)}</span>
      </div>
      <div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "center", marginTop: 3 }}>
        <span style={{ color: "var(--muted)", fontSize: 12.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{t.lastMessage ?? "No messages"}</span>
        {t.unread > 0 && <span style={{ background: "var(--orange)", color: "#fff", borderRadius: 999, fontSize: 11, padding: "1px 7px", flexShrink: 0 }}>{t.unread}</span>}
      </div>
    </button>
  );
}

function Reader({ thread, onError }: { thread: MailThread; onError: (m: string) => void }) {
  const t = useMailThread(thread.threadId);
  const [draft, setDraft] = useState("");
  const [sending, setSending] = useState(false);

  async function reply() {
    const text = draft.trim();
    if (!text || sending) return;
    setDraft(""); setSending(true);
    try { await t.reply(text); }
    catch (e) { setDraft(text); onError((e as Error).message); }
    finally { setSending(false); }
  }

  return (
    <>
      <header style={{ padding: "14px 20px", borderBottom: "1px solid var(--border)" }}>
        <div style={{ fontWeight: 700, fontSize: 16 }}>{thread.subject || "(no subject)"}</div>
        <div style={{ color: "var(--muted)", fontSize: 12, marginTop: 2 }}>{thread.participants.length} participant(s)</div>
      </header>

      <div style={{ flex: 1, overflowY: "auto", padding: 18, display: "flex", flexDirection: "column", gap: 14 }}>
        {t.loading && t.messages.length === 0 && <div style={{ margin: "auto", color: "var(--muted)" }}>Loading…</div>}
        {!t.loading && t.messages.length === 0 && <div style={{ margin: "auto", color: "var(--muted)" }}>No messages in this thread.</div>}
        {t.messages.map((m) => (
          <div key={m.interactionId} style={{ border: "1px solid var(--border)", borderRadius: 12, background: "var(--panel)", overflow: "hidden" }}>
            <div style={{ padding: "8px 14px", borderBottom: "1px solid var(--border)", display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--muted)" }}>
              <span>{m.kind === "EMAIL" ? "Email" : "Reply"}{m.actorId ? ` · ${m.actorId.replace(/^(pp_|cust_)/, "").slice(0, 8)}` : ""}</span>
              <span>{timeOf(m.occurredAt)}</span>
            </div>
            {m.html
              ? <iframe sandbox="" srcDoc={m.html} title="mail body" style={{ width: "100%", height: 220, border: "none", background: "#fff" }} />
              : <div style={{ padding: 14, whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 14 }}>{m.text}</div>}
          </div>
        ))}
      </div>

      <footer style={{ display: "flex", gap: 8, padding: 14, borderTop: "1px solid var(--border)" }}>
        <input
          value={draft} onChange={(e) => setDraft(e.target.value)}
          onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void reply(); } }}
          placeholder="Reply…" style={inputStyle}
        />
        <Btn icon="send" onClick={() => void reply()} disabled={sending || !draft.trim()}>Reply</Btn>
      </footer>
    </>
  );
}

function NewMailModal({ open, onClose, onSent, onError }: { open: boolean; onClose: () => void; onSent: () => void; onError: (m: string) => void }) {
  const compose = useMailCompose(onSent);
  const [mode, setMode] = useState<"internal" | "external">("internal");
  const [recipient, setRecipient] = useState("");   // userId (internal) or email (external)
  const [subject, setSubject] = useState("");
  const [body, setBody] = useState("");
  const [q, setQ] = useState("");
  const [busy, setBusy] = useState(false);

  useEffect(() => { if (!open) { setMode("internal"); setRecipient(""); setSubject(""); setBody(""); setQ(""); setBusy(false); } }, [open]);

  const filtered = compose.directory.filter((p) => p.name.toLowerCase().includes(q.trim().toLowerCase()));
  const canSend = !!recipient && !!subject.trim() && !!body.trim() && !busy;

  async function send() {
    if (!canSend) return;
    setBusy(true);
    try {
      if (mode === "internal") await compose.sendInternal(recipient, subject.trim(), body.trim());
      else await compose.sendExternal(recipient.trim(), subject.trim(), body.trim());
    } catch (e) { onError((e as Error).message); }
    finally { setBusy(false); }
  }

  return (
    <Modal
      open={open} onClose={onClose} title="New mail" subtitle={mode === "internal" ? "To a team member or client (in-app)" : "To an email address"} icon="chat"
      footer={<>
        <Btn variant="ghost" onClick={onClose}>Cancel</Btn>
        <Btn icon="send" onClick={() => void send()} disabled={!canSend}>{busy ? "Sending…" : "Send"}</Btn>
      </>}
    >
      <div style={{ display: "flex", gap: 6, marginBottom: 12 }}>
        <Btn variant={mode === "internal" ? "primary" : "outline"} onClick={() => { setMode("internal"); setRecipient(""); }}>In-app</Btn>
        <Btn variant={mode === "external" ? "primary" : "outline"} onClick={() => { setMode("external"); setRecipient(""); }}>Email</Btn>
      </div>

      {mode === "internal" ? (
        <Field label="To (person)">
          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search people…" style={{ ...inputStyle, marginBottom: 8 }} />
          <div style={{ maxHeight: 180, overflowY: "auto", display: "flex", flexDirection: "column", gap: 2 }}>
            {filtered.length === 0 && <div style={{ color: "var(--muted)", padding: 8 }}>No people found.</div>}
            {filtered.map((p: MailPerson) => (
              <label key={p.id} style={{ display: "flex", alignItems: "center", gap: 10, padding: "7px 10px", borderRadius: 10, cursor: "pointer", background: recipient === p.id ? "var(--panel-2)" : "transparent" }}>
                <input type="radio" checked={recipient === p.id} onChange={() => setRecipient(p.id)} />
                <Avatar initials={(p.name.split(/\s+/).map((s) => s[0]).join("").slice(0, 2) || "?").toUpperCase()} size={26} gradient={p.kind === "customer" ? CUSTOMER_GRAD : undefined} />
                <span style={{ flex: 1 }}>{p.name}</span>
                <Pill tone="muted">{p.kind}</Pill>
              </label>
            ))}
          </div>
        </Field>
      ) : (
        <Field label="To (email)">
          <input value={recipient} onChange={(e) => setRecipient(e.target.value)} placeholder="name@company.com" style={inputStyle} />
        </Field>
      )}

      <Field label="Subject"><input value={subject} onChange={(e) => setSubject(e.target.value)} placeholder="Subject" style={inputStyle} /></Field>
      <Field label="Message"><textarea value={body} onChange={(e) => setBody(e.target.value)} placeholder="Write your message…" rows={6} style={{ ...inputStyle, resize: "vertical" }} /></Field>
    </Modal>
  );
}