Support Inbox

"use client";

import * as React from "react";
import { ArrowPathIcon, CheckCircleIcon, InboxIcon, PaperAirplaneIcon, SparklesIcon, UserIcon } from "@heroicons-animated/react";

import { cn } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Message, MessageAvatar, MessageContent, MessageStack } from "@/components/pandacoderz-ui/message";
import { Suggestion, SuggestionList, Suggestions } from "@/components/pandacoderz-ui/suggestions";
import { TextShimmer } from "@/components/pandacoderz-ui/text-shimmer";
import { Thread, ThreadContent } from "@/components/pandacoderz-ui/thread";
import { uid } from "@/lib/mock-stream";
import { useStreamText } from "@/lib/use-stream-text";

type Priority = "low" | "normal" | "high";
type Status = "open" | "snoozed" | "resolved";
type Tone = "friendly" | "concise" | "formal";
type Msg = { id: string; from: "customer" | "agent"; text: string; at: string };
type Ticket = {
  id: string; customer: string; company: string; plan: string; subject: string; priority: Priority; status: Status; updated: string;
  sentiment: "positive" | "neutral" | "frustrated"; summary: string; messages: Msg[]; drafts: Record<Tone, string>; actions: string[];
};

const tickets: Ticket[] = [
  {
    id: "t1", customer: "Maya Chen", company: "Northwind", plan: "Pro", subject: "Charged twice this month", priority: "high", status: "open", updated: "12m", sentiment: "frustrated",
    summary: "Customer sees two $49 charges dated Sep 1 and Sep 3. Likely a retry after a failed card update. Wants a refund and confirmation it won't recur.",
    messages: [
      { id: "m1", from: "customer", text: "Hi, I was charged twice this month ($49 on Sep 1 and again on Sep 3). I only have one workspace. Can you refund the duplicate and make sure this doesn't happen again?", at: "09:12" },
    ],
    drafts: {
      friendly: "Hi Maya, thanks for flagging this and sorry for the scare. I can see both charges on your account. The second one came from an automatic retry after your card was updated on Sep 2, so you were billed once for the failed attempt and once for the successful one. I've refunded the $49 duplicate; it should land within 3–5 business days. I've also added a note so retries can't double-bill this workspace again. Anything else I can help with?",
      concise: "Hi Maya, confirmed: the Sep 3 charge was a retry after your card update. I've refunded the $49 duplicate (3–5 business days) and flagged the account so it can't recur. Sorry for the trouble.",
      formal: "Dear Maya, thank you for bringing this to our attention. Our records show the Sep 3 charge resulted from an automatic payment retry following the card update on Sep 2. A refund of $49.00 has been issued and should appear within 3–5 business days. We have applied a safeguard to prevent recurrence. Please let us know if we can assist further.",
    },
    actions: ["Issue $49 refund", "Add billing safeguard", "Send receipt"],
  },
  {
    id: "t2", customer: "Jordan Alvarez", company: "Lumen Labs", plan: "Team", subject: "SSO login loops back to sign-in", priority: "high", status: "open", updated: "41m", sentiment: "neutral",
    summary: "Okta SSO redirects back to the sign-in page. Started after they rotated their signing certificate yesterday.",
    messages: [
      { id: "m1", from: "customer", text: "Since yesterday, everyone on our Okta SSO gets bounced back to the login page. We rotated our IdP cert yesterday afternoon, could that be related?", at: "08:40" },
      { id: "m2", from: "agent", text: "Thanks Jordan, very likely. Can you confirm the new certificate fingerprint so I can compare it to what we have on file?", at: "08:55" },
      { id: "m3", from: "customer", text: "Sure: SHA-256 3F:9A:…:C2. Uploaded the metadata XML in the admin panel too.", at: "09:03" },
    ],
    drafts: {
      friendly: "Perfect, thanks Jordan. The fingerprint you sent doesn't match the one on file, which explains the loop. I've re-synced your SAML metadata from the XML you uploaded and logins are working on my side. Could you have one person try again? If it still loops, a hard refresh clears the cached assertion.",
      concise: "Thanks. Fingerprints didn't match; I re-synced your SAML metadata from the uploaded XML. Please have someone retry login and hard-refresh if it still loops.",
      formal: "Thank you, Jordan. The provided fingerprint did not match our stored certificate, which caused the redirect loop. We have re-synchronised your SAML configuration using the uploaded metadata. Kindly ask a user to attempt login again and perform a hard refresh if the issue persists.",
    },
    actions: ["Re-sync SAML metadata", "Send SSO guide", "Escalate to platform"],
  },
  {
    id: "t3", customer: "Priya Raman", company: "Orbital", plan: "Free", subject: "Feature request: export to CSV", priority: "low", status: "snoozed", updated: "2d", sentiment: "positive",
    summary: "Wants CSV export of conversation history. Not blocking; happy user.",
    messages: [{ id: "m1", from: "customer", text: "Loving the product. Any chance of a CSV export for conversation history? Would help our monthly reporting.", at: "Mon" }],
    drafts: {
      friendly: "Thanks Priya, that's great to hear! CSV export is on our roadmap for next quarter. I've added your vote and will ping you the moment it ships. In the meantime the JSON export in Settings → Data covers the same fields if that helps your reporting.",
      concise: "Thanks Priya. CSV export is planned for next quarter; I've added your vote. JSON export (Settings → Data) has the same fields in the meantime.",
      formal: "Thank you for the kind words, Priya. CSV export is scheduled for the coming quarter and your request has been recorded. The existing JSON export under Settings → Data contains equivalent fields should it be useful in the interim.",
    },
    actions: ["Add to roadmap vote", "Send JSON export guide"],
  },
];

const priorityDot: Record<Priority, string> = { low: "bg-muted-foreground/40", normal: "bg-chart-2", high: "bg-red-500" };
const sentimentBadge: Record<Ticket["sentiment"], string> = { positive: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400", neutral: "bg-muted text-muted-foreground", frustrated: "bg-red-500/15 text-red-600 dark:text-red-400" };
const tones: { id: Tone; label: string }[] = [{ id: "friendly", label: "Friendly" }, { id: "concise", label: "Concise" }, { id: "formal", label: "Formal" }];

export type SupportInboxProps = { className?: string };

export default function SupportInbox({ className }: SupportInboxProps) {
  const [items, setItems] = React.useState(tickets);
  const [selectedId, setSelectedId] = React.useState(tickets[0].id);
  const [filter, setFilter] = React.useState<Status | "all">("open");
  const [tone, setTone] = React.useState<Tone>("friendly");
  const [draft, setDraft] = React.useState("");
  const [done, setDone] = React.useState<string[]>([]);
  const { text, isStreaming, start, reset } = useStreamText(10);

  const ticket = items.find((t) => t.id === selectedId) ?? items[0];

  const generate = React.useCallback(
    (t: Ticket, tn: Tone) => {
      setDraft("");
      void start(t.drafts[tn], () => setDraft(t.drafts[tn]));
    },
    [start],
  );

  React.useEffect(() => {
    if (ticket.status === "resolved") {
      reset();
      setDraft("");
      return;
    }
    generate(ticket, tone);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [ticket.id, tone]);

  const send = () => {
    if (!draft.trim()) return;
    const reply: Msg = { id: uid("m"), from: "agent", text: draft.trim(), at: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) };
    setItems((prev) => prev.map((t) => (t.id === ticket.id ? { ...t, status: "resolved", updated: "now", messages: [...t.messages, reply] } : t)));
    setDraft("");
    reset();
  };

  const visible = items.filter((t) => filter === "all" || t.status === filter);
  const counts = items.reduce<Record<string, number>>((acc, t) => ({ ...acc, [t.status]: (acc[t.status] ?? 0) + 1 }), {});

  return (
    <div data-slot="support-inbox" className={cn("grid h-full min-h-0 w-full overflow-hidden rounded-3xl border bg-background shadow-xs md:grid-cols-[minmax(0,17rem)_minmax(0,1fr)] xl:grid-cols-[minmax(0,17rem)_minmax(0,1fr)_minmax(0,17rem)]", className)}>
      <aside className="flex min-h-0 flex-col border-b bg-surface md:border-r md:border-b-0">
        <div className="flex h-12 shrink-0 items-center gap-2 border-b px-4 text-sm font-medium">
          <span className="flex size-6 items-center justify-center rounded-md bg-brand text-primary-foreground"><InboxIcon size={14} className="flex" /></span>
          Inbox
        </div>
        <div className="flex shrink-0 gap-1 px-3 py-2">
          {(["open", "snoozed", "resolved", "all"] as const).map((f) => (
            <button key={f} type="button" onClick={() => setFilter(f)} className={cn("h-7 rounded-full px-2.5 text-xs font-medium capitalize transition-colors", filter === f ? "bg-foreground text-background" : "text-muted-foreground hover:bg-accent hover:text-foreground")}>
              {f}{f !== "all" && counts[f] ? <span className="ml-1 opacity-70">{counts[f]}</span> : null}
            </button>
          ))}
        </div>
        <ul className="min-h-0 flex-1 overflow-y-auto px-2 pb-2">
          {visible.map((t) => (
            <li key={t.id}>
              <button type="button" onClick={() => setSelectedId(t.id)} className={cn("flex w-full flex-col gap-1 rounded-xl px-3 py-2.5 text-left transition-colors", t.id === selectedId ? "bg-background shadow-xs" : "hover:bg-accent/60")}>
                <div className="flex items-center gap-2 text-xs">
                  <span className={cn("size-1.5 shrink-0 rounded-full", priorityDot[t.priority])} />
                  <span className="truncate font-medium">{t.customer}</span>
                  <span className="ml-auto shrink-0 text-muted-foreground">{t.updated}</span>
                </div>
                <span className="truncate text-sm">{t.subject}</span>
                <span className="line-clamp-1 text-xs text-muted-foreground">{t.messages[t.messages.length - 1].text}</span>
              </button>
            </li>
          ))}
          {visible.length === 0 ? <li className="py-8 text-center text-xs text-muted-foreground">Nothing here.</li> : null}
        </ul>
      </aside>

      <section className="flex min-h-0 flex-col">
        <header className="flex h-12 shrink-0 items-center justify-between gap-3 border-b px-4">
          <div className="flex min-w-0 items-center gap-2">
            <span className="truncate text-sm font-medium">{ticket.subject}</span>
            <Badge variant="outline" className="capitalize">{ticket.status}</Badge>
          </div>
          <span className="text-xs text-muted-foreground">#{ticket.id.toUpperCase()}</span>
        </header>
        <Thread className="min-h-0 flex-1">
          <ThreadContent className="gap-4 p-4">
            {ticket.messages.map((m) =>
              m.from === "customer" ? (
                <Message key={m.id} from="assistant" aria-label="Customer message" className="max-w-[85%]">
                  <MessageAvatar fallback={<UserIcon size={14} className="flex" />} />
                  <MessageStack>
                    <span className="px-2 text-[11px] text-muted-foreground">{ticket.customer} · {m.at}</span>
                    <MessageContent className="rounded-2xl bg-muted/60 px-4 py-2">{m.text}</MessageContent>
                  </MessageStack>
                </Message>
              ) : (
                <Message key={m.id} from="user" aria-label="Agent reply">
                  <MessageStack>
                    <span className="px-2 text-[11px] text-muted-foreground">You · {m.at}</span>
                    <MessageContent>{m.text}</MessageContent>
                  </MessageStack>
                </Message>
              ),
            )}
          </ThreadContent>
        </Thread>

        {ticket.status === "resolved" ? (
          <div className="flex shrink-0 items-center justify-center gap-2 border-t p-4 text-sm text-muted-foreground"><CheckCircleIcon size={16} className="flex text-emerald-600 dark:text-emerald-400" /> Resolved. <Button size="xs" variant="ghost" onClick={() => setItems((prev) => prev.map((t) => (t.id === ticket.id ? { ...t, status: "open" } : t)))}>Reopen</Button></div>
        ) : (
          <div className="shrink-0 border-t bg-surface p-3">
            <div className="flex items-center gap-2 pb-2">
              <span className="flex items-center gap-1.5 text-xs font-medium"><SparklesIcon size={14} className="flex text-brand" /> AI draft</span>
              <div className="flex items-center gap-1 rounded-lg bg-muted p-0.5 text-[11px]">
                {tones.map((t) => <button key={t.id} type="button" onClick={() => setTone(t.id)} aria-pressed={tone === t.id} className="rounded-md px-2 py-0.5 font-medium text-muted-foreground transition-colors aria-pressed:bg-background aria-pressed:text-foreground aria-pressed:shadow-xs">{t.label}</button>)}
              </div>
              <Button size="icon-xs" variant="ghost" className="ml-auto rounded-full" aria-label="Regenerate" onClick={() => generate(ticket, tone)} disabled={isStreaming}><ArrowPathIcon size={12} className="flex" /></Button>
            </div>
            <div className="rounded-2xl border bg-background">
              {isStreaming ? (
                <p className="min-h-24 p-3 text-sm leading-6.5 text-muted-foreground">{text || <TextShimmer invertLight>Drafting a reply…</TextShimmer>}</p>
              ) : (
                <textarea value={draft} onChange={(e) => setDraft(e.target.value)} rows={4} className="min-h-24 w-full resize-none rounded-2xl bg-transparent p-3 text-sm leading-6.5 outline-none" placeholder="Write a reply…" />
              )}
              <div className="flex flex-wrap items-center gap-2 border-t p-2">
                <Suggestions onSelect={(a) => setDone((d) => (d.includes(a) ? d : [...d, a]))}>
                  <SuggestionList>{ticket.actions.map((a) => <Suggestion key={a} value={a} variant={done.includes(a) ? "filled" : "outline"} className="h-7 text-xs">{done.includes(a) ? "✓ " : ""}{a}</Suggestion>)}</SuggestionList>
                </Suggestions>
                <Button size="sm" className="ml-auto rounded-full" onClick={send} disabled={isStreaming || !draft.trim()}><PaperAirplaneIcon size={14} className="flex" /> Send &amp; resolve</Button>
              </div>
            </div>
          </div>
        )}
      </section>

      <aside className="hidden min-h-0 flex-col gap-4 overflow-y-auto border-l bg-surface p-4 xl:flex">
        <div className="flex items-center gap-3">
          <span className="flex size-10 items-center justify-center rounded-full bg-brand-soft text-sm font-semibold text-brand">{ticket.customer.split(" ").map((n) => n[0]).join("")}</span>
          <div className="min-w-0"><div className="truncate text-sm font-medium">{ticket.customer}</div><div className="truncate text-xs text-muted-foreground">{ticket.company} · {ticket.plan}</div></div>
        </div>
        <div className="flex flex-col gap-2">
          <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Sentiment</span>
          <Badge className={cn("w-fit border-transparent capitalize", sentimentBadge[ticket.sentiment])}>{ticket.sentiment}</Badge>
        </div>
        <div className="flex flex-col gap-2">
          <span className="flex items-center gap-1.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground"><SparklesIcon size={12} className="flex text-brand" /> AI summary</span>
          <p className="text-xs leading-5 text-muted-foreground">{ticket.summary}</p>
        </div>
        <div className="flex flex-col gap-2">
          <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Details</span>
          <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 text-xs">
            <dt className="text-muted-foreground">Priority</dt><dd className="capitalize">{ticket.priority}</dd>
            <dt className="text-muted-foreground">Messages</dt><dd>{ticket.messages.length}</dd>
            <dt className="text-muted-foreground">Actions</dt><dd>{done.length} taken</dd>
          </dl>
        </div>
      </aside>
    </div>
  );
}

/**
 * Helpers for scripted streaming in demos. Blocks use these to fake a model
 * response token by token without touching the network. Swap them for a real
 * fetch in production; the UI code does not change.
 */

export function sleep(ms: number, signal?: AbortSignal) {
  return new Promise<void>((resolve, reject) => {
    if (signal?.aborted) return reject(signal.reason);
    const id = setTimeout(resolve, ms);
    signal?.addEventListener(
      "abort",
      () => {
        clearTimeout(id);
        reject(signal.reason);
      },
      { once: true },
    );
  });
}

/** Split text into word-ish chunks so streaming looks natural. */
export function chunk(text: string): string[] {
  return text.match(/\S+\s*|\s+/g) ?? [text];
}

export function jitter(base: number) {
  return base + Math.random() * base;
}

/** Yield a string piece by piece with a small random delay between pieces. */
export async function* streamText(
  text: string,
  signal?: AbortSignal,
  delayMs = 14,
): AsyncGenerator<string> {
  for (const piece of chunk(text)) {
    if (signal?.aborted) return;
    yield piece;
    await sleep(jitter(delayMs), signal);
  }
}

let counter = 0;
export const uid = (prefix = "id") => `${prefix}-${Date.now().toString(36)}-${++counter}`;

"use client";

import * as React from "react";

import { streamText } from "./mock-stream";

/**
 * Drive a piece of text onto the screen as if it were streaming from a model.
 * `start(text)` clears and streams; `stop()` freezes what has arrived.
 */
export function useStreamText(delayMs = 14) {
  const [text, setText] = React.useState("");
  const [isStreaming, setIsStreaming] = React.useState(false);
  const abortRef = React.useRef<AbortController | null>(null);

  const stop = React.useCallback(() => {
    abortRef.current?.abort();
    abortRef.current = null;
    setIsStreaming(false);
  }, []);

  const start = React.useCallback(
    async (full: string, onDone?: () => void) => {
      abortRef.current?.abort();
      const controller = new AbortController();
      abortRef.current = controller;
      setText("");
      setIsStreaming(true);
      try {
        for await (const piece of streamText(full, controller.signal, delayMs)) {
          setText((prev) => prev + piece);
        }
        if (!controller.signal.aborted) onDone?.();
      } catch {
        /* aborted */
      } finally {
        if (abortRef.current === controller) {
          abortRef.current = null;
          setIsStreaming(false);
        }
      }
    },
    [delayMs],
  );

  const reset = React.useCallback(() => {
    stop();
    setText("");
  }, [stop]);

  React.useEffect(() => () => abortRef.current?.abort(), []);

  return { text, isStreaming, start, stop, reset, setText };
}