/* Dulius App UI Kit — Platform Support */

const SUPPORT_TICKETS_KEY = "dulius:support-tickets:v1";

function FaqItem({ q, a }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className={`dfaq ${open ? "open" : ""}`}>
      <button className="dfaq-q" onClick={() => setOpen(!open)}>
        <span>{q}</span><Icon name={open ? "minus" : "plus"} size={18} />
      </button>
      {open && <div className="dfaq-a">{a}</div>}
    </div>
  );
}

function supportChannelAction(channel) {
  if (channel.title === "Email") {
    window.location.href = "mailto:hello@dulius.com?subject=Dulius%20support%20request";
    return;
  }
  if (channel.title === "Schedule a call") {
    window.location.href = "mailto:hello@dulius.com?subject=Schedule%20a%20Dulius%20funding%20call";
    return;
  }
  window.dispatchEvent(new CustomEvent("dulius:support-channel", { detail: channel }));
}

function saveSupportTicket(ticket) {
  if (window.duliusSubmitSupport) { try { window.duliusSubmitSupport(ticket); } catch (e) {} }
  try {
    const existing = JSON.parse(localStorage.getItem(SUPPORT_TICKETS_KEY) || "[]");
    localStorage.setItem(SUPPORT_TICKETS_KEY, JSON.stringify([ticket].concat(existing).slice(0, 10)));
  } catch (e) {}
}

async function duliusFetchTickets() {
  try {
    var tok = null;
    if (window.Clerk && window.Clerk.session) { tok = await window.Clerk.session.getToken(); }
    if (!tok) return [];
    var r = await fetch("/api/member/tickets", { headers: { Authorization: "Bearer " + tok }, cache: "no-store" });
    if (!r.ok) return [];
    var j = await r.json();
    return (j && j.tickets) || [];
  } catch (e) { return []; }
}

function ticketStatusTone(st) {
  var s = (st || "").toLowerCase();
  if (s.indexOf("resolved") > -1 || s.indexOf("closed") > -1) return "success";
  if (s.indexOf("progress") > -1 || s.indexOf("open") > -1) return "info";
  return "muted";
}

function fmtTicketDate(iso) {
  try {
    var d = new Date(iso);
    return d.toLocaleDateString(undefined, { month: "short", day: "numeric" }) + " · " +
      d.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" });
  } catch (e) { return ""; }
}

function ensureTicketStyles() {
  if (document.getElementById("dulius-ticket-styles")) return;
  var st = document.createElement("style");
  st.id = "dulius-ticket-styles";
  st.textContent = [
    ".dempty-sm{padding:18px 4px;color:#6b7a70;font-size:14px;line-height:1.5}",
    ".dticket-list{display:flex;flex-direction:column;gap:10px}",
    ".dticket{border:1px solid #e6ece8;border-radius:14px;overflow:hidden;background:#fff;transition:border-color .15s}",
    ".dticket.open{border-color:#cfe0d4}",
    ".dticket-head{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;background:none;border:none;cursor:pointer;text-align:left}",
    ".dticket-head:hover{background:#f6faf7}",
    ".dticket-main{min-width:0}",
    ".dticket-subj{font-weight:600;color:#143222;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}",
    ".dticket-meta{font-size:12px;color:#7a887f;margin-top:2px}",
    ".dticket-body{padding:4px 16px 16px;display:flex;flex-direction:column;gap:10px;border-top:1px solid #eef3ef}",
    ".dticket-msg{padding:11px 13px;border-radius:12px;font-size:13.5px;line-height:1.5}",
    ".dticket-msg-you{background:#f1f6f2;color:#21402c}",
    ".dticket-msg-team{background:#eef4ff;color:#1d3357}",
    ".dticket-who{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin-bottom:4px}",
    ".dticket-text{white-space:pre-wrap}",
    ".dticket-pending{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#8a7a3a;background:#fdf7e7;border-radius:10px;padding:9px 12px}",
  ].join("\n");
  document.head.appendChild(st);
}

function TicketHistory() {
  const [tickets, setTickets] = React.useState(null);
  const [openId, setOpenId] = React.useState(null);

  const load = React.useCallback(() => {
    duliusFetchTickets().then(function (t) { setTickets(t); });
  }, []);

  React.useEffect(() => {
    ensureTicketStyles();
    var tries = 0;
    var iv = setInterval(function () {
      tries++;
      if (window.Clerk && window.Clerk.session) { load(); clearInterval(iv); }
      else if (tries > 20) { setTickets([]); clearInterval(iv); }
    }, 400);
    var onUpd = function () { load(); };
    window.addEventListener("dulius:support-submitted", onUpd);
    return function () { clearInterval(iv); window.removeEventListener("dulius:support-submitted", onUpd); };
  }, [load]);

  if (tickets === null) {
    return (
      <Card className="dpanel">
        <div className="dpanel-head"><h3 className="ds-h3">Your requests</h3></div>
        <div className="dempty-sm">Loading your requests…</div>
      </Card>
    );
  }

  return (
    <Card className="dpanel">
      <div className="dpanel-head">
        <h3 className="ds-h3">Your requests</h3>
        <button className="dmodal-cancel" style={{ padding: "6px 12px" }} onClick={load}>Refresh</button>
      </div>
      {tickets.length === 0 ? (
        <div className="dempty-sm">No requests yet. Send a message above and it’ll show up here with replies from your advisor.</div>
      ) : (
        <div className="dticket-list">
          {tickets.map(function (t) {
            var replies = t.replies || [];
            var isOpen = openId === t.id;
            return (
              <div key={t.id} className={"dticket" + (isOpen ? " open" : "")}>
                <button className="dticket-head" onClick={() => setOpenId(isOpen ? null : t.id)}>
                  <div className="dticket-main">
                    <div className="dticket-subj">{t.subject || t.topic || "Support request"}</div>
                    <div className="dticket-meta">{t.id} · {fmtTicketDate(t.createdAt)}{replies.length ? " · " + replies.length + " repl" + (replies.length === 1 ? "y" : "ies") : ""}</div>
                  </div>
                  <Badge tone={ticketStatusTone(t.status)} dot>{t.status || "received"}</Badge>
                </button>
                {isOpen && (
                  <div className="dticket-body">
                    <div className="dticket-msg dticket-msg-you">
                      <div className="dticket-who">You</div>
                      <div className="dticket-text">{t.message}</div>
                    </div>
                    {replies.map(function (rp, i) {
                      return (
                        <div key={i} className="dticket-msg dticket-msg-team">
                          <div className="dticket-who">{rp.by || "Dulius advisor"}{rp.at ? " · " + fmtTicketDate(rp.at) : ""}</div>
                          <div className="dticket-text">{rp.text || rp.message || rp.reply}</div>
                        </div>
                      );
                    })}
                    {replies.length === 0 && (
                      <div className="dticket-pending"><Icon name="clock" size={14} /> Awaiting a reply from your advisor — typically within 2 hours.</div>
                    )}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      )}
    </Card>
  );
}

function Support() {
  const s = DULIUS.support;
  const [topic, setTopic] = React.useState("My active deal");
  const [message, setMessage] = React.useState("");
  const [error, setError] = React.useState("");
  const [sent, setSent] = React.useState(null);

  React.useEffect(() => {
    const focusForm = () => {
      const el = document.querySelector(".dsupport-form textarea");
      if (el) el.focus();
    };
    window.addEventListener("dulius:support-channel", focusForm);
    return () => window.removeEventListener("dulius:support-channel", focusForm);
  }, []);

  const submit = () => {
    const clean = message.trim();
    if (clean.length < 12) {
      setError("Add a little more detail so the support team can route this correctly.");
      return;
    }
    const ticket = {
      id: "SUP-" + Date.now().toString(36).toUpperCase(),
      topic,
      message: clean,
      business: DULIUS.user.business,
      owner: DULIUS.user.name,
      createdAt: new Date().toISOString(),
      status: "received",
    };
    saveSupportTicket(ticket);
    setSent(ticket);
    setError("");
    setTimeout(function () { window.dispatchEvent(new CustomEvent("dulius:support-submitted")); }, 1200);
  };

  return (
    <div className="dscreen">
      <Card className="dsupport-hero" pad={false}>
        <div className="dsupport-hero-in">
          <div className="dsupport-hero-icon"><Icon name="life-buoy" size={24} /></div>
          <div>
            <div className="dsupport-hero-t">We're in your corner</div>
            <div className="dsupport-hero-s">Real people who know alternative lending — reach us however works for you. Premium &amp; Pro members get priority response.</div>
          </div>
          <Badge tone="success" dot>Online now</Badge>
        </div>
      </Card>

      <div className="dsupport-grid">
        {s.channels.map((c, i) => (
          <Card key={i} className="dchannel dcard-click" onClick={() => supportChannelAction(c)}>
            <div className="dchannel-icon"><Icon name={c.icon} size={22} /></div>
            <div className="dchannel-t">{c.title}</div>
            <div className="dchannel-s">{c.sub}</div>
            <span className="dchannel-cta">{c.cta} <Icon name="arrow-right" size={15} /></span>
          </Card>
        ))}
      </div>

      <div className="dgrid-2">
        <Card className="dpanel">
          <div className="dpanel-head"><h3 className="ds-h3">Send us a message</h3></div>
          {sent ? (
            <div className="dsupport-sent"><div className="dsupport-sent-icon"><Icon name="check" size={26} /></div><div className="dsupport-sent-t">Message received</div><div className="dsupport-sent-s">Reference {sent.id}. A funding advisor will reply within 2 hours.</div><button className="dmodal-cancel" onClick={() => { setSent(null); setMessage(""); }}>Send another message</button></div>
          ) : (
            <div className="dsupport-form">
              <label className="dcardf full"><span>Topic</span><div className="ofield-in"><Icon name="tag" size={18} /><select value={topic} onChange={(e) => setTopic(e.target.value)}><option>My active deal</option><option>An offer or application</option><option>Renewals</option><option>Disputes &amp; negotiation</option><option>Billing &amp; subscription</option><option>Something else</option></select></div></label>
              <label className="dcardf full"><span>How can we help?</span><textarea className="dtextarea" rows={4} placeholder="Tell us what's going on…" value={message} onChange={(e) => { setMessage(e.target.value); setError(""); }} /></label>
              {error && <div className="dform-error"><Icon name="alert-circle" size={15} /> {error}</div>}
              <Button variant="accent" iconRight="send" onClick={submit} style={{ width: "100%" }}>Send message</Button>
            </div>
          )}
        </Card>

        <Card className="dpanel">
          <div className="dpanel-head"><h3 className="ds-h3">Common questions</h3></div>
          <div className="dfaqs">
            {s.faqs.map((f, i) => <FaqItem key={i} q={f.q} a={f.a} />)}
          </div>
        </Card>
      </div>

      <TicketHistory />
    </div>
  );
}
Object.assign(window, { Support, FaqItem, saveSupportTicket, TicketHistory, duliusFetchTickets });