"use client";
/* eslint-disable react-hooks/set-state-in-effect, @next/next/no-html-link-for-pages */

import { FormEvent, useCallback, useEffect, useState } from "react";
import {
  Activity,
  AlertTriangle,
  ArrowLeft,
  BarChart3,
  Bell,
  BookOpen,
  Bot,
  Box,
  BriefcaseBusiness,
  CheckCircle2,
  ChevronDown,
  ContactRound,
  CreditCard,
  FileWarning,
  Gauge,
  Home,
  Inbox,
  Languages,
  LifeBuoy,
  Link2,
  ListTodo,
  Megaphone,
  Menu,
  MessageSquare,
  MoreHorizontal,
  Plus,
  Search,
  Settings,
  ShieldAlert,
  Sparkles,
  Users,
  Workflow,
  X,
  Zap,
} from "lucide-react";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  NativeSelect,
  NativeSelectOption,
} from "@/components/ui/native-select";
import { Progress } from "@/components/ui/progress";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/sheet";
import { Skeleton } from "@/components/ui/skeleton";
import { Textarea } from "@/components/ui/textarea";
import { Toaster } from "@/components/ui/sonner";

type Row = Record<string, unknown>;
type Data = {
  workspace: Row;
  workspaces: Row[];
  permissions: string[];
  entitlements: Record<string, { enabled: boolean; limit: number | null }>;
  preferences: {
    language: "ar" | "en";
    timezone: string;
    defaultRange: string;
  };
  needsAttention: Row[];
  subscription: Row;
  kpis: Row[];
  agents: Row[];
  conversations: Row[];
  leads: Row[];
  contactsTotal: number;
  tasks: Row[];
  knowledge: Row[];
  workflows: Row[];
  automation: Row[];
  channels: Row[];
  activity: Row[];
  notifications: Row[];
};

const copy: Record<"ar" | "en", Record<string, string>> = {
  ar: {
    home: "الرئيسية",
    agents: "الوكلاء",
    inbox: "المحادثات",
    crm: "العملاء",
    sales: "المبيعات",
    tasks: "المهام",
    knowledge: "المعرفة",
    automation: "الأتمتة",
    campaigns: "الحملات",
    channels: "القنوات",
    integrations: "التكاملات",
    analytics: "التحليلات",
    team: "الفريق",
    usage: "الاستخدام",
    billing: "الفوترة",
    settings: "الإعدادات",
    attention: "يحتاج انتباهك",
    attentionSub: "الحالات ذات الأولوية في مساحة العمل",
    noAttention: "لا توجد حالات عاجلة الآن",
    command: "مركز قيادة الأعمال",
    today: "إليك أهم ما يحدث في مساحة عملك اليوم.",
    ask: "اسأل NEXORA",
    quick: "جديد",
    search: "ابحث عن عميل، محادثة، وكيل أو مهمة…",
    operations: "العمليات الآن",
    digital: "وكلاؤك الرقميون",
    handoff: "بانتظار الموظفين",
    recent: "أحدث المحادثات",
    recentLeads: "العملاء المحتملون",
    myTasks: "مهامي",
    knowledgeHealth: "صحة المعرفة",
    automationHealth: "صحة الأتمتة",
    channelHealth: "حالة القنوات",
    usageTitle: "استخدام الذكاء الاصطناعي",
    activity: "آخر النشاطات",
    empty: "لا توجد بيانات بعد",
    open: "فتح",
    createAgent: "إنشاء وكيل",
    allRead: "تعليم الكل كمقروء",
    notifications: "الإشعارات",
    coming: "قريبًا",
    locked: "غير متاح في خطتك",
    retry: "إعادة المحاولة",
  },
  en: {
    home: "Home",
    agents: "AI Agents",
    inbox: "Inbox",
    crm: "CRM",
    sales: "Sales",
    tasks: "Tasks",
    knowledge: "Knowledge",
    automation: "Automation",
    campaigns: "Campaigns",
    channels: "Channels",
    integrations: "Integrations",
    analytics: "Analytics",
    team: "Team",
    usage: "Usage",
    billing: "Billing",
    settings: "Settings",
    attention: "Needs attention",
    attentionSub: "Priority items in this workspace",
    noAttention: "Nothing urgent needs attention",
    command: "Business command center",
    today: "Here is what matters in your workspace today.",
    ask: "Ask NEXORA",
    quick: "New",
    search: "Search contacts, conversations, agents or tasks…",
    operations: "Live operations",
    digital: "Your digital team",
    handoff: "Waiting for a teammate",
    recent: "Recent conversations",
    recentLeads: "Recent leads",
    myTasks: "My tasks",
    knowledgeHealth: "Knowledge health",
    automationHealth: "Automation health",
    channelHealth: "Channel health",
    usageTitle: "AI usage",
    activity: "Recent activity",
    empty: "No data yet",
    open: "Open",
    createAgent: "Create agent",
    allRead: "Mark all as read",
    notifications: "Notifications",
    coming: "Coming soon",
    locked: "Not in your plan",
    retry: "Retry",
  },
};

const nav = [
  ["home", Home, "/dashboard", null],
  ["agents", Bot, "/dashboard/agents", "agents.view"],
  ["inbox", Inbox, "/inbox", "inbox.view"],
  ["crm", ContactRound, "/crm", "crm.view"],
  ["sales", BriefcaseBusiness, "/crm/deals", "sales.view"],
  ["tasks", ListTodo, "/crm/tasks", "tasks.view"],
  [
    "knowledge",
    BookOpen,
    "/dashboard/operations?view=knowledge",
    "knowledge.view",
  ],
  [
    "automation",
    Workflow,
    "/dashboard/operations?view=workflows",
    "automation.view",
  ],
  ["campaigns", Megaphone, "", "coming"],
  [
    "channels",
    MessageSquare,
    "/dashboard/operations?view=channels",
    "channels.view",
  ],
  ["integrations", Link2, "", "coming"],
  [
    "analytics",
    BarChart3,
    "/dashboard/operations?view=analytics",
    "analytics.view",
  ],
  ["team", Users, "/dashboard/operations?view=team", "team.view"],
  ["usage", Gauge, "/dashboard/billing", "usage.view"],
  ["billing", CreditCard, "/dashboard/billing", "billing.view"],
  [
    "settings",
    Settings,
    "/dashboard/operations?view=settings",
    "settings.view",
  ],
] as const;

export default function CommandCenter({
  user,
}: {
  user: { displayName: string; email: string };
}) {
  const [data, setData] = useState<Data | null>(null),
    [error, setError] = useState(""),
    [range, setRange] = useState("7d"),
    [menu, setMenu] = useState(false),
    [notifications, setNotifications] = useState(false),
    [searchOpen, setSearchOpen] = useState(false),
    [quickOpen, setQuickOpen] = useState(false),
    [askOpen, setAskOpen] = useState(false);
  const [search, setSearch] = useState(""),
    [results, setResults] = useState<Row[]>([]),
    [busy, setBusy] = useState(false);
  const load = useCallback(async () => {
    setError("");
    try {
      const r = await fetch(`/api/dashboard?range=${range}`, {
        cache: "no-store",
      });
      const j = (await r.json()) as Data & { error?: string; detail?: string };
      if (!r.ok) throw new Error(j.detail || j.error || "load_failed");
      setData(j);
    } catch (error) {
      setError(
        process.env.NODE_ENV === "development" && error instanceof Error
          ? error.message
          : "تعذر تحميل مركز القيادة الآن.",
      );
    }
  }, [range]);
  useEffect(() => {
    const id = setTimeout(() => void load(), 0);
    return () => clearTimeout(id);
  }, [load]);
  const lang = data?.preferences.language ?? "ar",
    t = copy[lang],
    dir = lang === "ar" ? "rtl" : "ltr";
  useEffect(() => {
    if (!searchOpen || search.trim().length < 2) return;
    const id = setTimeout(async () => {
      const r = await fetch(`/api/dashboard?q=${encodeURIComponent(search)}`, {
        cache: "no-store",
      });
      if (r.ok) setResults(((await r.json()) as { results: Row[] }).results);
    }, 250);
    return () => clearTimeout(id);
  }, [search, searchOpen]);
  useEffect(() => {
    const handler = (event: KeyboardEvent) => {
      if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === "k") {
        event.preventDefault();
        setSearchOpen(true);
      }
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, []);
  async function post(body: object, reload = true) {
    setBusy(true);
    try {
      const r = await fetch("/api/dashboard", {
        method: "POST",
        headers: { "content-type": "application/json" },
        body: JSON.stringify(body),
      });
      const j = (await r.json()) as Row;
      if (!r.ok) throw new Error(String(j.error || "action_failed"));
      if (reload) await load();
      return j;
    } catch (e) {
      toast.error(
        e instanceof Error && e.message === "already_claimed"
          ? lang === "ar"
            ? "استلم موظف آخر هذه المحادثة."
            : "Another teammate already claimed this conversation."
          : lang === "ar"
            ? "تعذر إكمال الإجراء."
            : "Action could not be completed.",
      );
      throw e;
    } finally {
      setBusy(false);
    }
  }
  async function switchWorkspace(id: string) {
    await post({ action: "switch_workspace", workspaceId: id });
    window.location.reload();
  }
  async function toggleLanguage() {
    const next = lang === "ar" ? "en" : "ar";
    await post({ action: "set_language", language: next }, false);
    setData((current) =>
      current
        ? {
            ...current,
            preferences: { ...current.preferences, language: next },
          }
        : current,
    );
  }
  const hour = Number(
    new Intl.DateTimeFormat("en", {
      hour: "numeric",
      hour12: false,
      timeZone: data?.preferences.timezone ?? "Asia/Riyadh",
    }).format(new Date()),
  );
  const greeting =
    lang === "ar"
      ? hour < 12
        ? "صباح الخير"
        : "مساء الخير"
      : hour < 12
        ? "Good morning"
        : "Good evening";
  const unread = data?.notifications.filter((n) => !n.read_at).length ?? 0;
  const initials = user.displayName
    .split(" ")
    .slice(0, 2)
    .map((x) => x[0])
    .join("")
    .toUpperCase();
  return (
    <div className="ccmd" dir={dir} lang={lang}>
      <Toaster position="top-center" richColors dir={dir} />
      <aside
        className={`ccmd-side ${menu ? "open" : ""}`}
        aria-label={lang === "ar" ? "التنقل الرئيسي" : "Main navigation"}
      >
        <div className="ccmd-brand">
          <span>
            <Sparkles />
          </span>
          <b>
            NEXORA <i>AI</i>
          </b>
          <button
            className="ccmd-close"
            onClick={() => setMenu(false)}
            aria-label="Close"
          >
            <X />
          </button>
        </div>
        <WorkspaceMenu data={data} lang={lang} change={switchWorkspace} />
        <nav>
          {nav.map(([key, Icon, href, permission]) => {
            const visible =
              !permission ||
              permission === "coming" ||
              data?.permissions.includes(permission);
            if (!visible) return null;
            const coming = permission === "coming";
            return coming ? (
              <span className="ccmd-nav disabled" key={key}>
                <Icon />
                <b>{t[key]}</b>
                <small>{t.coming}</small>
              </span>
            ) : (
              <a
                className={`ccmd-nav ${key === "home" ? "active" : ""}`}
                href={href}
                key={key}
                onClick={() => setMenu(false)}
              >
                <Icon />
                <b>{t[key]}</b>
              </a>
            );
          })}
        </nav>
        <div className="ccmd-side-foot">
          <a href="/contact?intent=support">
            <LifeBuoy />
            {lang === "ar" ? "المساعدة والدعم" : "Help & support"}
          </a>
          <a href="/signout-with-chatgpt?return_to=/">
            <span>{initials || "N"}</span>
            <b>
              {user.displayName}
              <small>{user.email}</small>
            </b>
          </a>
        </div>
      </aside>
      {menu && (
        <button
          className="ccmd-backdrop"
          aria-label="Close navigation"
          onClick={() => setMenu(false)}
        />
      )}
      <main className="ccmd-main">
        <header className="ccmd-top">
          <div>
            <button
              className="ccmd-menu"
              onClick={() => setMenu(true)}
              aria-label="Menu"
            >
              <Menu />
            </button>
            <button className="ccmd-search" onClick={() => setSearchOpen(true)}>
              <Search />
              <span>{t.search}</span>
              <kbd>⌘ K</kbd>
            </button>
          </div>
          <div>
            <button className="ccmd-ask" onClick={() => setAskOpen(true)}>
              <Sparkles />
              {t.ask}
            </button>
            <button
              className="ccmd-icon"
              onClick={toggleLanguage}
              aria-label="Language"
            >
              <Languages />
            </button>
            <button
              className="ccmd-icon"
              onClick={() => setNotifications(true)}
              aria-label={t.notifications}
            >
              <Bell />
              {unread > 0 && <i>{unread}</i>}
            </button>
            <button className="ccmd-new" onClick={() => setQuickOpen(true)}>
              <Plus />
              {t.quick}
            </button>
          </div>
        </header>
        <div className="ccmd-content">
          {!data && !error ? (
            <Loading />
          ) : error ? (
            <div className="ccmd-error">
              <ShieldAlert />
              <h1>
                {lang === "ar"
                  ? "تعذر فتح مساحة العمل"
                  : "Could not open workspace"}
              </h1>
              <p>{error}</p>
              <Button onClick={() => void load()}>{t.retry}</Button>
            </div>
          ) : (
            data && (
              <>
                <section className="ccmd-welcome">
                  <div>
                    <span>{t.command}</span>
                    <h1>
                      {greeting}، {user.displayName.split(" ")[0]}
                    </h1>
                    <p>{t.today}</p>
                  </div>
                  <NativeSelect
                    value={range}
                    onChange={(e) => setRange(e.target.value)}
                    aria-label="Date range"
                  >
                    <NativeSelectOption value="today">
                      {lang === "ar" ? "اليوم" : "Today"}
                    </NativeSelectOption>
                    <NativeSelectOption value="7d">
                      {lang === "ar" ? "7 أيام" : "7 days"}
                    </NativeSelectOption>
                    <NativeSelectOption value="30d">
                      {lang === "ar" ? "30 يومًا" : "30 days"}
                    </NativeSelectOption>
                  </NativeSelect>
                </section>
                <Attention items={data.needsAttention} t={t} lang={lang} />
                <Kpis items={data.kpis} lang={lang} />
                <section className="ccmd-grid major">
                  <AgentsCard data={data} lang={lang} />
                  <OperationsCard data={data} lang={lang} />
                </section>
                <section className="ccmd-grid triple">
                  <HandoffCard
                    data={data}
                    lang={lang}
                    claim={async (id) => {
                      await post({ action: "claim_conversation", id });
                      toast.success(
                        lang === "ar"
                          ? "تم استلام المحادثة"
                          : "Conversation claimed",
                      );
                    }}
                  />
                  <LeadsCard data={data} lang={lang} />
                  <TasksCard
                    data={data}
                    lang={lang}
                    create={() => setQuickOpen(true)}
                  />
                </section>
                <section className="ccmd-grid triple health">
                  <HealthCard
                    icon={BookOpen}
                    title={t.knowledgeHealth}
                    rows={data.knowledge.map((x) => ({
                      label: String(x.status),
                      value: Number(x.count),
                    }))}
                    empty={t.empty}
                    href="/dashboard/operations?view=knowledge"
                  />
                  <HealthCard
                    icon={Workflow}
                    title={t.automationHealth}
                    rows={data.automation.map((x) => ({
                      label: String(x.status),
                      value: Number(x.count),
                    }))}
                    empty={t.empty}
                    href="/dashboard/operations?view=workflows"
                  />
                  <ChannelsCard data={data} lang={lang} />
                </section>
                <section className="ccmd-grid major">
                  <UsageCard data={data} lang={lang} />
                  <ActivityCard data={data} lang={lang} />
                </section>
                <Onboarding data={data} lang={lang} />
              </>
            )
          )}
        </div>
      </main>
      <MobileNav data={data} t={t} create={() => setQuickOpen(true)} />
      <SearchDialog
        open={searchOpen}
        setOpen={setSearchOpen}
        value={search}
        setValue={setSearch}
        results={results}
        lang={lang}
      />
      <QuickCreate
        open={quickOpen}
        setOpen={setQuickOpen}
        data={data}
        lang={lang}
        busy={busy}
        submit={post}
      />
      <Notifications
        open={notifications}
        setOpen={setNotifications}
        data={data}
        lang={lang}
        post={post}
      />
      <AskNexora open={askOpen} setOpen={setAskOpen} lang={lang} post={post} />
    </div>
  );
}

function WorkspaceMenu({
  data,
  lang,
  change,
}: {
  data: Data | null;
  lang: "ar" | "en";
  change: (id: string) => void;
}) {
  return (
    <div className="ccmd-workspace">
      <span>
        <Box />
      </span>
      <label>
        <small>{lang === "ar" ? "مساحة العمل" : "Workspace"}</small>
        <select
          value={String(data?.workspace.id ?? "")}
          onChange={(e) => void change(e.target.value)}
          disabled={!data}
        >
          <option value={String(data?.workspace.id ?? "")}>
            {String(
              data?.workspace.name ??
                (lang === "ar" ? "جارٍ التحميل" : "Loading"),
            )}
          </option>
          {data?.workspaces
            .filter((x) => x.id !== data.workspace.id)
            .map((x) => (
              <option key={String(x.id)} value={String(x.id)}>
                {String(x.name)}
              </option>
            ))}
        </select>
        <em>
          {String(
            data?.subscription.planNameAr ??
              data?.workspace.plan ??
              (lang === "ar" ? "بدون اشتراك" : "No subscription"),
          )}{" "}
          · {String(data?.workspace.role ?? "")}
        </em>
      </label>
      <ChevronDown />
    </div>
  );
}

function Loading() {
  return (
    <div className="ccmd-loading">
      <Skeleton className="h-28 rounded-3xl" />
      <div>
        {[1, 2, 3, 4].map((x) => (
          <Skeleton key={x} className="h-28 rounded-2xl" />
        ))}
      </div>
      <Skeleton className="h-80 rounded-3xl" />
    </div>
  );
}

function Attention({
  items,
  t,
  lang,
}: {
  items: Row[];
  t: typeof copy.ar;
  lang: string;
}) {
  return (
    <section className={`ccmd-attention ${items.length ? "has" : "clear"}`}>
      <header>
        <span>
          <AlertTriangle />
        </span>
        <div>
          <h2>{t.attention}</h2>
          <p>{t.attentionSub}</p>
        </div>
        {items.length > 0 && <b>{items.length}</b>}
      </header>
      {items.length ? (
        <div>
          {items.slice(0, 4).map((x) => (
            <a
              key={String(x.id)}
              href={String(x.href)}
              className={`attention-${x.priority}`}
            >
              <span>
                {x.priority === "critical" ? <ShieldAlert /> : <FileWarning />}
              </span>
              <div>
                <strong>{String(lang === "ar" ? x.titleAr : x.titleEn)}</strong>
                <small>{String(lang === "ar" ? x.bodyAr : x.bodyEn)}</small>
              </div>
              <ArrowLeft />
            </a>
          ))}
        </div>
      ) : (
        <p className="ccmd-all-good">
          <CheckCircle2 />
          {t.noAttention}
        </p>
      )}
    </section>
  );
}

const kpiMeta: Record<string, [string, string, React.ElementType]> = {
  conversations: ["المحادثات", "Conversations", MessageSquare],
  handoffs: ["تحويلات بشرية", "Human handoffs", Users],
  leads: ["Leads جديدة", "New leads", ContactRound],
  tasks: ["مهام مفتوحة", "Open tasks", ListTodo],
  credits: ["رصيد AI مستخدم", "AI credits used", Zap],
  agents: ["وكلاء نشطون", "Active agents", Bot],
};
function Kpis({ items, lang }: { items: Row[]; lang: string }) {
  return (
    <section className="ccmd-kpis">
      {items.map((x) => {
        const [ar, en, Icon] = kpiMeta[String(x.key)];
        return (
          <article key={String(x.key)}>
            <span>
              <Icon />
            </span>
            <div>
              <small>{lang === "ar" ? ar : en}</small>
              <strong>
                {Number(x.value).toLocaleString(
                  lang === "ar" ? "ar-SA" : "en-US",
                )}
              </strong>
              {x.change !== null && (
                <em className={Number(x.change) >= 0 ? "up" : "down"}>
                  {Number(x.change) > 0 ? "+" : ""}
                  {String(x.change)}%{" "}
                  {lang === "ar" ? "عن الفترة السابقة" : "vs previous period"}
                </em>
              )}
            </div>
          </article>
        );
      })}
    </section>
  );
}

function CardHead({
  icon: Icon,
  title,
  href,
  label,
}: {
  icon: React.ElementType;
  title: string;
  href?: string;
  label?: string;
}) {
  return (
    <header className="ccmd-card-head">
      <span>
        <Icon />
      </span>
      <h2>{title}</h2>
      {href && (
        <a href={href}>
          {label ?? "فتح"}
          <ArrowLeft />
        </a>
      )}
    </header>
  );
}
function AgentsCard({ data, lang }: { data: Data; lang: string }) {
  return (
    <article className="ccmd-card">
      <CardHead
        icon={Bot}
        title={lang === "ar" ? "وكلاؤك الرقميون" : "Your digital team"}
        href="/dashboard/agents"
        label={lang === "ar" ? "إدارة الوكلاء" : "Manage agents"}
      />
      {data.agents.length ? (
        <div className="ccmd-agent-list">
          {data.agents.slice(0, 5).map((x) => (
            <a href={`/dashboard/agents/${x.id}`} key={String(x.id)}>
              <span>
                <Bot />
              </span>
              <div>
                <strong>{String(x.name)}</strong>
                <small>
                  {String(x.role)} · {String(x.channel)}
                </small>
              </div>
              <em className={`status-${x.status}`}>{String(x.status)}</em>
              <b>
                {Number(x.conversations)}
                <small>{lang === "ar" ? " اختبارًا" : " tests"}</small>
              </b>
            </a>
          ))}
        </div>
      ) : (
        <Empty
          icon={Bot}
          text={lang === "ar" ? "لا يوجد وكلاء بعد" : "No agents yet"}
          action={lang === "ar" ? "إنشاء أول وكيل" : "Create your first agent"}
          href="/create-agent/setup"
        />
      )}
    </article>
  );
}
function OperationsCard({ data, lang }: { data: Data; lang: string }) {
  const handoffs = data.conversations.filter(
      (x) => x.state === "handoff",
    ).length,
    active = data.agents.filter((x) => x.status === "active").length,
    openTasks = Number(data.kpis.find((x) => x.key === "tasks")?.value ?? 0);
  const items = [
    [
      MessageSquare,
      lang === "ar" ? "محادثات نشطة" : "Active conversations",
      data.conversations.length,
      "/dashboard/operations?view=inbox",
    ],
    [
      Users,
      lang === "ar" ? "بانتظار موظف" : "Waiting for human",
      handoffs,
      "/dashboard/operations?view=inbox",
    ],
    [
      Bot,
      lang === "ar" ? "وكلاء يعملون" : "Agents running",
      active,
      "/dashboard/agents",
    ],
    [
      ListTodo,
      lang === "ar" ? "مهام مفتوحة" : "Open tasks",
      openTasks,
      "#tasks",
    ],
  ] as const;
  return (
    <article className="ccmd-card operations">
      <CardHead
        icon={Activity}
        title={lang === "ar" ? "العمليات الآن" : "Live operations"}
      />
      <div>
        {items.map(([Icon, label, value, href]) => (
          <a href={href} key={label}>
            <span>
              <Icon />
            </span>
            <b>{value}</b>
            <small>{label}</small>
            <ArrowLeft />
          </a>
        ))}
      </div>
      <p>
        <i />
        {lang === "ar"
          ? "تعرض الحالة من سجلات مساحة العمل الحالية، وليست بيانات تجريبية."
          : "Status reflects current workspace records, not demo data."}
      </p>
    </article>
  );
}
function HandoffCard({
  data,
  lang,
  claim,
}: {
  data: Data;
  lang: string;
  claim: (id: string) => Promise<void>;
}) {
  const items = data.conversations.filter((x) => x.state === "handoff");
  return (
    <article className="ccmd-card">
      <CardHead
        icon={HeadphonesIcon}
        title={lang === "ar" ? "بانتظار الموظفين" : "Waiting for a teammate"}
        href="/dashboard/operations?view=inbox"
      />
      {items.length ? (
        <div className="mini-list">
          {items.slice(0, 4).map((x) => (
            <div key={String(x.id)}>
              <span className="avatar">
                {String(x.customer_name).slice(0, 1)}
              </span>
              <b>
                {String(x.customer_name)}
                <small>{String(x.last_intent || x.channel)}</small>
              </b>
              <button onClick={() => void claim(String(x.id))}>
                {lang === "ar" ? "استلام" : "Claim"}
              </button>
            </div>
          ))}
        </div>
      ) : (
        <Empty
          icon={CheckCircle2}
          text={
            lang === "ar"
              ? "لا توجد محادثات محولة الآن"
              : "No handed-off conversations"
          }
        />
      )}
    </article>
  );
}
function LeadsCard({ data, lang }: { data: Data; lang: string }) {
  return (
    <article className="ccmd-card" id="leads">
      <CardHead
        icon={ContactRound}
        title={lang === "ar" ? "العملاء المحتملون" : "Recent leads"}
      />
      {data.leads.length ? (
        <div className="mini-list">
          {data.leads.slice(0, 4).map((x) => (
            <div key={String(x.id)}>
              <span className="score">{Number(x.score)}</span>
              <b>
                {String(x.full_name || x.title)}
                <small>{String(x.interest || x.stage)}</small>
              </b>
              <em>{String(x.stage)}</em>
            </div>
          ))}
        </div>
      ) : (
        <Empty
          icon={ContactRound}
          text={
            lang === "ar"
              ? "لم تتم إضافة Leads بعد"
              : "No leads have been added"
          }
        />
      )}
    </article>
  );
}
function TasksCard({
  data,
  lang,
  create,
}: {
  data: Data;
  lang: string;
  create: () => void;
}) {
  return (
    <article className="ccmd-card" id="tasks">
      <CardHead icon={ListTodo} title={lang === "ar" ? "مهامي" : "My tasks"} />
      {data.tasks.length ? (
        <div className="task-list">
          {data.tasks.slice(0, 4).map((x) => (
            <div key={String(x.id)}>
              <span className={`priority-${x.priority}`} />
              <b>
                {String(x.title)}
                <small>
                  {x.due_at
                    ? new Intl.DateTimeFormat(lang === "ar" ? "ar-SA" : "en", {
                        dateStyle: "medium",
                        timeStyle: "short",
                      }).format(new Date(String(x.due_at)))
                    : lang === "ar"
                      ? "بلا موعد"
                      : "No due date"}
                </small>
              </b>
            </div>
          ))}
        </div>
      ) : (
        <Empty
          icon={ListTodo}
          text={lang === "ar" ? "لا توجد مهام مفتوحة" : "No open tasks"}
          action={lang === "ar" ? "إنشاء مهمة" : "Create task"}
          onClick={create}
        />
      )}
    </article>
  );
}
function HealthCard({
  icon,
  title,
  rows,
  empty,
  href,
}: {
  icon: React.ElementType;
  title: string;
  rows: { label: string; value: number }[];
  empty: string;
  href: string;
}) {
  return (
    <article className="ccmd-card health-card">
      <CardHead icon={icon} title={title} href={href} />
      {rows.length ? (
        <div>
          {rows.map((x) => (
            <p key={x.label}>
              <span>{x.label.replaceAll("_", " ")}</span>
              <b>{x.value}</b>
            </p>
          ))}
        </div>
      ) : (
        <p className="health-empty">{empty}</p>
      )}
    </article>
  );
}
function ChannelsCard({ data, lang }: { data: Data; lang: string }) {
  return (
    <article className="ccmd-card health-card">
      <CardHead
        icon={MessageSquare}
        title={lang === "ar" ? "حالة القنوات" : "Channel health"}
        href="/dashboard/operations?view=channels"
      />
      {data.channels.length ? (
        <div>
          {data.channels.map((x) => (
            <p key={String(x.id)}>
              <span>{String(x.name)}</span>
              <b className={`channel-${x.status}`}>{String(x.status)}</b>
            </p>
          ))}
        </div>
      ) : (
        <Empty
          icon={MessageSquare}
          text={lang === "ar" ? "لا توجد قناة مربوطة" : "No connected channels"}
          action={lang === "ar" ? "إعداد قناة" : "Set up a channel"}
          href="/dashboard/operations?view=channels"
        />
      )}
    </article>
  );
}
function UsageCard({ data, lang }: { data: Data; lang: string }) {
  const s = data.subscription,
    p = s.usagePercent === null ? 0 : Number(s.usagePercent);
  return (
    <article className="ccmd-card usage">
      <CardHead
        icon={Gauge}
        title={lang === "ar" ? "استخدام الذكاء الاصطناعي" : "AI usage"}
        href="/dashboard/billing"
        label={lang === "ar" ? "تفاصيل الاستخدام" : "Usage details"}
      />
      <div>
        <span>
          <b>{Number(s.creditsUsed).toLocaleString()}</b>
          <small>
            {lang === "ar"
              ? " رصيد مستخدم هذا الشهر"
              : " credits used this month"}
          </small>
        </span>
        {s.creditLimit !== null ? (
          <>
            <Progress value={p} />
            <p>
              <span>{p}%</span>
              <b>
                {lang === "ar"
                  ? `${s.creditsRemaining} متبقٍ من ${s.creditLimit}`
                  : `${s.creditsRemaining} remaining of ${s.creditLimit}`}
              </b>
            </p>
          </>
        ) : (
          <p className="usage-unlimited">
            {lang === "ar"
              ? "لا يوجد حد رصيد منشور لهذه المساحة."
              : "No published credit limit for this workspace."}
          </p>
        )}
      </div>
    </article>
  );
}
function ActivityCard({ data, lang }: { data: Data; lang: string }) {
  return (
    <article className="ccmd-card">
      <CardHead
        icon={Activity}
        title={lang === "ar" ? "آخر النشاطات" : "Recent activity"}
      />
      {data.activity.length ? (
        <div className="activity-list">
          {data.activity.slice(0, 6).map((x) => (
            <p key={String(x.id)}>
              <span>
                <Activity />
              </span>
              <b>
                {String(x.action)}
                <small>{String(x.target_label)}</small>
              </b>
              <time>{relative(String(x.created_at), lang)}</time>
            </p>
          ))}
        </div>
      ) : (
        <Empty
          icon={Activity}
          text={
            lang === "ar"
              ? "لا توجد نشاطات مسجلة بعد"
              : "No activity has been recorded"
          }
        />
      )}
    </article>
  );
}
function Onboarding({ data, lang }: { data: Data; lang: string }) {
  if (data.agents.length && data.knowledge.length && data.channels.length)
    return null;
  const steps = [
    {
      done: true,
      label: lang === "ar" ? "إنشاء مساحة العمل" : "Create workspace",
    },
    {
      done: data.agents.length > 0,
      label: lang === "ar" ? "إنشاء أول وكيل" : "Create first agent",
    },
    {
      done: data.knowledge.length > 0,
      label: lang === "ar" ? "إضافة المعرفة" : "Add knowledge",
    },
    {
      done: data.channels.length > 0,
      label: lang === "ar" ? "إعداد قناة" : "Set up a channel",
    },
  ];
  return (
    <section className="ccmd-onboarding">
      <div>
        <span>
          <Sparkles />
        </span>
        <div>
          <small>{lang === "ar" ? "خطوات البداية" : "Getting started"}</small>
          <h2>
            {lang === "ar" ? "أكمل إعداد NEXORA" : "Complete your NEXORA setup"}
          </h2>
          <p>
            {steps.filter((x) => x.done).length}/{steps.length}{" "}
            {lang === "ar" ? "مكتمل" : "complete"}
          </p>
        </div>
      </div>
      <ol>
        {steps.map((x, i) => (
          <li className={x.done ? "done" : ""} key={x.label}>
            <span>{x.done ? <CheckCircle2 /> : i + 1}</span>
            {x.label}
          </li>
        ))}
      </ol>
      <a href="/create-agent/setup">
        {lang === "ar" ? "متابعة الإعداد" : "Continue setup"}
        <ArrowLeft />
      </a>
    </section>
  );
}
function Empty({
  icon: Icon,
  text,
  action,
  href,
  onClick,
}: {
  icon: React.ElementType;
  text: string;
  action?: string;
  href?: string;
  onClick?: () => void;
}) {
  return (
    <div className="ccmd-empty">
      <Icon />
      <p>{text}</p>
      {action &&
        (href ? (
          <a href={href}>{action}</a>
        ) : (
          <button onClick={onClick}>{action}</button>
        ))}
    </div>
  );
}
function relative(value: string, lang: string) {
  const minutes = Math.max(
    0,
    Math.floor((Date.now() - new Date(value).getTime()) / 60000),
  );
  if (minutes < 1) return lang === "ar" ? "الآن" : "now";
  if (minutes < 60)
    return lang === "ar" ? `قبل ${minutes} د` : `${minutes}m ago`;
  const hours = Math.floor(minutes / 60);
  return lang === "ar" ? `قبل ${hours} س` : `${hours}h ago`;
}
function HeadphonesIcon() {
  return <LifeBuoy />;
}

function MobileNav({
  data,
  t,
  create,
}: {
  data: Data | null;
  t: typeof copy.ar;
  create: () => void;
}) {
  return (
    <nav className="ccmd-mobile">
      <a href="/dashboard">
        <Home />
        <small>{t.home}</small>
      </a>
      {data?.permissions.includes("inbox.view") && (
        <a href="/dashboard/operations?view=inbox">
          <Inbox />
          <small>{t.inbox}</small>
        </a>
      )}
      <button onClick={create}>
        <Plus />
        <small>{t.quick}</small>
      </button>
      {data?.permissions.includes("agents.view") && (
        <a href="/dashboard/agents">
          <Bot />
          <small>{t.agents}</small>
        </a>
      )}
      <a href="/dashboard/operations?view=settings">
        <MoreHorizontal />
        <small>{t.settings}</small>
      </a>
    </nav>
  );
}

function SearchDialog({
  open,
  setOpen,
  value,
  setValue,
  results,
  lang,
}: {
  open: boolean;
  setOpen: (x: boolean) => void;
  value: string;
  setValue: (x: string) => void;
  results: Row[];
  lang: string;
}) {
  const href = (x: Row) =>
    x.type === "agent"
      ? "/dashboard/agents"
      : x.type === "conversation"
        ? "/dashboard/operations?view=inbox"
        : x.type === "task"
          ? "#tasks"
          : "#leads";
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent
        className="ccmd-dialog"
        dir={lang === "ar" ? "rtl" : "ltr"}
      >
        <DialogHeader>
          <DialogTitle>
            {lang === "ar" ? "البحث في مساحة العمل" : "Search workspace"}
          </DialogTitle>
          <DialogDescription>
            {lang === "ar"
              ? "تظهر النتائج التي تسمح لك صلاحياتك برؤيتها فقط."
              : "Only results allowed by your permissions are shown."}
          </DialogDescription>
        </DialogHeader>
        <div className="search-input">
          <Search />
          <Input
            autoFocus
            value={value}
            onChange={(e) => setValue(e.target.value)}
            placeholder={
              lang === "ar"
                ? "اكتب حرفين على الأقل…"
                : "Type at least two characters…"
            }
          />
        </div>
        <div className="search-results">
          {results.map((x) => (
            <a href={href(x)} key={`${x.type}:${x.id}`}>
              <span>{String(x.type)}</span>
              <b>
                {String(x.title)}
                <small>{String(x.subtitle || "")}</small>
              </b>
              <ArrowLeft />
            </a>
          ))}
          {value.length >= 2 && !results.length && (
            <p>
              {lang === "ar" ? "لا توجد نتائج مطابقة." : "No matching results."}
            </p>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}

function QuickCreate({
  open,
  setOpen,
  data,
  lang,
  busy,
  submit,
}: {
  open: boolean;
  setOpen: (x: boolean) => void;
  data: Data | null;
  lang: string;
  busy: boolean;
  submit: (x: object) => Promise<Row>;
}) {
  const [kind, setKind] = useState("task"),
    [form, setForm] = useState({
      title: "",
      name: "",
      email: "",
      phone: "",
      company: "",
      interest: "",
      score: "50",
      priority: "medium",
      dueAt: "",
    });
  const allowed = [
    data?.permissions.includes("tasks.manage") && "task",
    data?.permissions.includes("crm.manage") && "contact",
    data?.permissions.includes("crm.manage") && "lead",
  ].filter(Boolean) as string[];
  useEffect(() => {
    if (open && !allowed.includes(kind)) setKind(allowed[0] ?? "agent");
  }, [open, allowed, kind]);
  async function save(e: FormEvent) {
    e.preventDefault();
    if (kind === "agent") {
      window.location.href = "/create-agent/setup";
      return;
    }
    const body =
      kind === "task"
        ? {
            action: "create_task",
            title: form.title,
            priority: form.priority,
            dueAt: form.dueAt ? new Date(form.dueAt).toISOString() : null,
          }
        : {
            action: kind === "contact" ? "create_contact" : "create_lead",
            ...(kind === "contact"
              ? {
                  fullName: form.name,
                  email: form.email,
                  phone: form.phone,
                  company: form.company,
                }
              : {
                  title: form.title,
                  contactName: form.name,
                  interest: form.interest,
                  score: Number(form.score),
                }),
          };
    await submit(body);
    toast.success(lang === "ar" ? "تم الحفظ بنجاح" : "Saved successfully");
    setOpen(false);
    setForm({
      title: "",
      name: "",
      email: "",
      phone: "",
      company: "",
      interest: "",
      score: "50",
      priority: "medium",
      dueAt: "",
    });
  }
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogContent
        className="ccmd-dialog"
        dir={lang === "ar" ? "rtl" : "ltr"}
      >
        <DialogHeader>
          <DialogTitle>
            {lang === "ar" ? "إنشاء جديد" : "Create new"}
          </DialogTitle>
          <DialogDescription>
            {lang === "ar"
              ? "تظهر الخيارات حسب صلاحياتك الحالية."
              : "Options reflect your current permissions."}
          </DialogDescription>
        </DialogHeader>
        <div className="quick-kinds">
          {allowed.includes("task") && (
            <button
              className={kind === "task" ? "active" : ""}
              onClick={() => setKind("task")}
            >
              <ListTodo />
              {lang === "ar" ? "مهمة" : "Task"}
            </button>
          )}
          {allowed.includes("contact") && (
            <button
              className={kind === "contact" ? "active" : ""}
              onClick={() => setKind("contact")}
            >
              <ContactRound />
              {lang === "ar" ? "عميل" : "Contact"}
            </button>
          )}
          {allowed.includes("lead") && (
            <button
              className={kind === "lead" ? "active" : ""}
              onClick={() => setKind("lead")}
            >
              <BriefcaseBusiness />
              Lead
            </button>
          )}
          <button
            className={kind === "agent" ? "active" : ""}
            onClick={() => setKind("agent")}
          >
            <Bot />
            {lang === "ar" ? "وكيل" : "Agent"}
          </button>
        </div>
        {kind === "agent" ? (
          <div className="quick-agent">
            <Bot />
            <h3>
              {lang === "ar"
                ? "ابدأ مع معالج إنشاء الوكيل"
                : "Open the agent setup wizard"}
            </h3>
            <p>
              {lang === "ar"
                ? "سيتم التحقق من حدود الباقة والصلاحيات على الخادم قبل الإنشاء."
                : "Plan limits and permissions are checked on the server before creation."}
            </p>
            <Button
              onClick={() => {
                window.location.href = "/create-agent/setup";
              }}
            >
              {lang === "ar" ? "إنشاء وكيل" : "Create agent"}
            </Button>
          </div>
        ) : (
          <form className="quick-form" onSubmit={save}>
            {kind !== "task" && (
              <>
                <Label>
                  {lang === "ar" ? "الاسم" : "Name"}
                  <Input
                    required
                    value={form.name}
                    onChange={(e) => setForm({ ...form, name: e.target.value })}
                  />
                </Label>
              </>
            )}
            {kind !== "contact" && (
              <Label>
                {lang === "ar" ? "العنوان" : "Title"}
                <Input
                  required
                  value={form.title}
                  onChange={(e) => setForm({ ...form, title: e.target.value })}
                />
              </Label>
            )}
            {kind === "contact" && (
              <>
                <Label>
                  {lang === "ar" ? "البريد" : "Email"}
                  <Input
                    type="email"
                    value={form.email}
                    onChange={(e) =>
                      setForm({ ...form, email: e.target.value })
                    }
                  />
                </Label>
                <Label>
                  {lang === "ar" ? "الجوال" : "Phone"}
                  <Input
                    value={form.phone}
                    onChange={(e) =>
                      setForm({ ...form, phone: e.target.value })
                    }
                  />
                </Label>
                <Label>
                  {lang === "ar" ? "الشركة" : "Company"}
                  <Input
                    value={form.company}
                    onChange={(e) =>
                      setForm({ ...form, company: e.target.value })
                    }
                  />
                </Label>
              </>
            )}
            {kind === "lead" && (
              <>
                <Label>
                  {lang === "ar" ? "الاهتمام" : "Interest"}
                  <Input
                    value={form.interest}
                    onChange={(e) =>
                      setForm({ ...form, interest: e.target.value })
                    }
                  />
                </Label>
                <Label>
                  {lang === "ar" ? "التقييم الأولي" : "Initial score"}
                  <Input
                    type="number"
                    min="0"
                    max="100"
                    value={form.score}
                    onChange={(e) =>
                      setForm({ ...form, score: e.target.value })
                    }
                  />
                </Label>
              </>
            )}
            {kind === "task" && (
              <>
                <Label>
                  {lang === "ar" ? "الأولوية" : "Priority"}
                  <NativeSelect
                    value={form.priority}
                    onChange={(e) =>
                      setForm({ ...form, priority: e.target.value })
                    }
                  >
                    <NativeSelectOption value="low">Low</NativeSelectOption>
                    <NativeSelectOption value="medium">
                      Medium
                    </NativeSelectOption>
                    <NativeSelectOption value="high">High</NativeSelectOption>
                    <NativeSelectOption value="critical">
                      Critical
                    </NativeSelectOption>
                  </NativeSelect>
                </Label>
                <Label>
                  {lang === "ar" ? "موعد الاستحقاق" : "Due date"}
                  <Input
                    type="datetime-local"
                    value={form.dueAt}
                    onChange={(e) =>
                      setForm({ ...form, dueAt: e.target.value })
                    }
                  />
                </Label>
              </>
            )}
            <Button disabled={busy}>
              {busy
                ? lang === "ar"
                  ? "جارٍ الحفظ"
                  : "Saving"
                : lang === "ar"
                  ? "حفظ"
                  : "Save"}
            </Button>
          </form>
        )}
      </DialogContent>
    </Dialog>
  );
}

function Notifications({
  open,
  setOpen,
  data,
  lang,
  post,
}: {
  open: boolean;
  setOpen: (x: boolean) => void;
  data: Data | null;
  lang: string;
  post: (x: object) => Promise<Row>;
}) {
  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetContent
        side={lang === "ar" ? "left" : "right"}
        className="ccmd-sheet"
        dir={lang === "ar" ? "rtl" : "ltr"}
      >
        <SheetHeader>
          <SheetTitle>
            {lang === "ar" ? "الإشعارات" : "Notifications"}
          </SheetTitle>
          <SheetDescription>
            {lang === "ar"
              ? "تنبيهات مساحة العمل والفوترة."
              : "Workspace and billing alerts."}
          </SheetDescription>
        </SheetHeader>
        <button
          className="mark-all"
          onClick={() => void post({ action: "mark_notification", all: true })}
        >
          {lang === "ar" ? "تعليم الكل كمقروء" : "Mark all as read"}
        </button>
        <div>
          {data?.notifications.length ? (
            data.notifications.map((x, i) => (
              <a
                href={String(x.href || "#")}
                className={!x.read_at ? "unread" : ""}
                key={String(x.id || i)}
                onClick={() => {
                  if (x.id)
                    void post({ action: "mark_notification", id: x.id });
                }}
              >
                <span>
                  <Bell />
                </span>
                <b>
                  {String(
                    lang === "ar"
                      ? x.title_ar || x.message_ar
                      : x.title_en || x.message_en,
                  )}
                  <small>
                    {String(lang === "ar" ? x.body_ar || "" : x.body_en || "")}
                  </small>
                </b>
              </a>
            ))
          ) : (
            <Empty
              icon={Bell}
              text={lang === "ar" ? "لا توجد إشعارات" : "No notifications"}
            />
          )}
        </div>
      </SheetContent>
    </Sheet>
  );
}

function AskNexora({
  open,
  setOpen,
  lang,
  post,
}: {
  open: boolean;
  setOpen: (x: boolean) => void;
  lang: string;
  post: (x: object, reload?: boolean) => Promise<Row>;
}) {
  const [question, setQuestion] = useState(""),
    [answer, setAnswer] = useState<Row | null>(null),
    [loading, setLoading] = useState(false);
  async function ask(e: FormEvent) {
    e.preventDefault();
    setLoading(true);
    try {
      setAnswer(await post({ action: "ask_nexora", question }, false));
    } finally {
      setLoading(false);
    }
  }
  const prompts =
    lang === "ar"
      ? [
          "ما أهم الأشياء التي تحتاج انتباهي اليوم؟",
          "كم استهلكنا من AI Credits؟",
          "هل توجد مهام متأخرة؟",
        ]
      : [
          "What needs my attention today?",
          "How many AI credits have we used?",
          "Are any tasks overdue?",
        ];
  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetContent
        side={lang === "ar" ? "left" : "right"}
        className="ccmd-sheet assistant"
        dir={lang === "ar" ? "rtl" : "ltr"}
      >
        <SheetHeader>
          <SheetTitle>
            <Sparkles />
            {lang === "ar" ? "اسأل NEXORA" : "Ask NEXORA"}
          </SheetTitle>
          <SheetDescription>
            {lang === "ar"
              ? "مساعد قراءة يعتمد على بيانات مساحة العمل وصلاحياتك الحالية."
              : "A read-only assistant grounded in workspace data and your current permissions."}
          </SheetDescription>
        </SheetHeader>
        <div className="ask-prompts">
          {prompts.map((x) => (
            <button key={x} onClick={() => setQuestion(x)}>
              {x}
            </button>
          ))}
        </div>
        {answer && (
          <div className="ask-answer">
            <Sparkles />
            <p>{String(lang === "ar" ? answer.answerAr : answer.answerEn)}</p>
            {Array.isArray(answer.links) &&
              answer.links.map((x: Row) => (
                <a key={String(x.href)} href={String(x.href)}>
                  {String(lang === "ar" ? x.labelAr : x.labelEn)}
                  <ArrowLeft />
                </a>
              ))}
          </div>
        )}
        <form onSubmit={ask}>
          <Textarea
            required
            value={question}
            onChange={(e) => setQuestion(e.target.value)}
            placeholder={
              lang === "ar"
                ? "اكتب سؤالك عن عمليات مساحة العمل…"
                : "Ask about workspace operations…"
            }
          />
          <Button disabled={loading}>
            {loading
              ? lang === "ar"
                ? "جارٍ القراءة…"
                : "Reading data…"
              : lang === "ar"
                ? "إرسال"
                : "Send"}
          </Button>
        </form>
      </SheetContent>
    </Sheet>
  );
}