"use client";

import { FormEvent, useCallback, useEffect, useMemo, useState } from "react";
import {
  Activity, ArrowDownLeft, ArrowUpRight, BarChart3, Bell, BookOpen, Bot, Box,
  Check, CheckCircle2, ChevronLeft, CircleGauge, Clock3, CreditCard, ExternalLink, FileText,
  Headphones, Home, Inbox, LifeBuoy, Link2, ListFilter, ContactRound,
  Mail, MessageCircle, MessageSquare, MoreHorizontal, Pencil, Plus, Search, Send,
  Settings, ShieldCheck, Smartphone, Sparkles, Store, TestTube2, Upload, Users,
  WandSparkles, Workflow, X, Zap,
} from "lucide-react";
import { toast } from "sonner";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select";
import { Progress } from "@/components/ui/progress";
import {
  Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle,
} from "@/components/ui/sheet";
import {
  Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent,
  SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton,
  SidebarMenuItem, SidebarProvider, SidebarSeparator, SidebarTrigger,
} from "@/components/ui/sidebar";
import { Skeleton } from "@/components/ui/skeleton";
import { Slider } from "@/components/ui/slider";
import { Switch } from "@/components/ui/switch";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Textarea } from "@/components/ui/textarea";
import { Toaster } from "@/components/ui/sonner";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

type Agent = { id: string; name: string; role: string; description: string; instructions: string; tone: string; language: string; welcome_message: string; handoff_threshold: number; status: "active" | "paused" | "training"; channel: string; autonomy: number; knowledge_count: number; created_at: string };
type WorkflowRecord = { id: string; name: string; trigger_name: string; action_name: string; status: "active" | "paused"; runs: number; created_at: string };
type Conversation = { id: string; customer_name: string; channel: string; preview: string; state: "open" | "handoff" | "resolved"; priority: "normal" | "high" | "urgent"; assigned_to: string; customer_phone: string; customer_email: string; last_intent: string; satisfaction: number; unread_count: number; updated_at: string };
type ConversationMessage = { id: string; conversation_id: string; sender_type: "customer" | "agent" | "human"; sender_name: string; content: string; created_at: string };
type TeamMember = { id: string; name: string; email: string; role: string; status: string; created_at: string };
type PlatformMetrics = { totalConversations: number; openConversations: number; resolvedConversations: number; handoffConversations: number; resolutionRate: number; automationRate: number; totalMessages: number; activeTeam: number };
type KnowledgeSource = { id: string; name: string; source_type: "file" | "link"; source_url?: string; mime_type?: string; size_bytes: number; status: string; created_at: string };
type ChannelRecord = { id: string; provider: string; name: string; status: string; config_label: string; created_at: string };
type SimulationMessage = { id: string; agent_id: string; role: "user" | "assistant"; content: string; intent?: string; created_at: string };
type AuditLog = { id: string; action: string; target_label: string; created_at: string };
type PlatformData = { workspace: { id: string; name: string; industry: string; plan: string }; agents: Agent[]; workflows: WorkflowRecord[]; conversations: Conversation[]; messages: ConversationMessage[]; team: TeamMember[]; knowledge: KnowledgeSource[]; channels: ChannelRecord[]; simulations: SimulationMessage[]; auditLogs: AuditLog[]; metrics: PlatformMetrics };
type ViewId = "overview" | "inbox" | "agents" | "workflows" | "knowledge" | "channels" | "team" | "analytics" | "settings";

const navItems = [
  { id: "inbox" as const, label: "صندوق المحادثات", icon: Inbox },
  { id: "agents" as const, label: "وكلاء الذكاء", icon: Bot },
  { id: "workflows" as const, label: "الأتمتة", icon: Workflow },
  { id: "knowledge" as const, label: "مصادر المعرفة", icon: BookOpen },
  { id: "channels" as const, label: "القنوات", icon: MessageSquare },
  { id: "team" as const, label: "الفريق والصلاحيات", icon: Users },
  { id: "analytics" as const, label: "التحليلات", icon: BarChart3 },
  { id: "settings" as const, label: "الإعدادات", icon: Settings },
];

const labels: Record<ViewId, { title: string; subtitle: string }> = {
  overview: { title: "نظرة عامة", subtitle: "ملخص أداء الوكلاء والعمليات اليوم" },
  inbox: { title: "صندوق المحادثات", subtitle: "كل القنوات في مساحة عمل واحدة" },
  agents: { title: "وكلاء الذكاء الاصطناعي", subtitle: "أنشئ الوكلاء ودرّبهم وتحكم بصلاحياتهم" },
  workflows: { title: "الأتمتة", subtitle: "حوّل المحادثات إلى إجراءات منجزة" },
  knowledge: { title: "مصادر المعرفة", subtitle: "المعلومات التي يعتمد عليها وكلاؤك في الإجابة" },
  channels: { title: "القنوات", subtitle: "جهّز قنوات التواصل للربط عند توفر بيانات المزود" },
  team: { title: "الفريق والصلاحيات", subtitle: "أعضاء مساحة العمل وأدوار الوصول" },
  analytics: { title: "التحليلات", subtitle: "قياس الأداء والجودة والتحويل عبر القنوات" },
  settings: { title: "الإعدادات", subtitle: "بيانات مساحة العمل والقنوات والصلاحيات" },
};

export default function DashboardApp({ user, initialView }: { user: { displayName: string; email: string }; initialView?: string }) {
  const safeInitialView = (["inbox","agents","workflows","knowledge","channels","team","analytics","settings"] as ViewId[]).includes(initialView as ViewId) ? initialView as ViewId : "agents";
  const [view, setView] = useState<ViewId>(safeInitialView);
  const [data, setData] = useState<PlatformData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [search, setSearch] = useState("");
  const [agentSheet, setAgentSheet] = useState(false);
  const [selectedAgent, setSelectedAgent] = useState<Agent | null>(null);
  const [workflowDialog, setWorkflowDialog] = useState(false);
  const [selectedConversation, setSelectedConversation] = useState<string | null>(null);

  const loadData = useCallback(async () => {
    setLoading(true); setError("");
    try {
      const response = await fetch("/api/platform", { cache: "no-store" });
      if (!response.ok) throw new Error("load_failed");
      const result = await response.json() as PlatformData;
      setData(result);
      setSelectedConversation((current) => current ?? result.conversations[0]?.id ?? null);
    } catch {
      setError("تعذر تحميل مساحة العمل الآن. تحقق من الاتصال ثم حاول مجددًا.");
    } finally { setLoading(false); }
  }, []);

  useEffect(() => { void loadData(); }, [loadData]);

  const selected = data?.conversations.find((item) => item.id === selectedConversation) ?? data?.conversations[0];
  const activeAgents = data?.agents.filter((agent) => agent.status === "active").length ?? 0;
  const filteredAgents = useMemo(() => data?.agents.filter((agent) => `${agent.name} ${agent.role} ${agent.channel}`.includes(search)) ?? [], [data, search]);

  async function post(body: object) {
    const response = await fetch("/api/platform", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) });
    if (!response.ok) { const result = await response.json().catch(() => ({})) as { error?: string }; throw new Error(result.error ?? "تعذر حفظ التغيير"); }
    await loadData();
  }

  async function toggleAgent(agent: Agent, checked: boolean) {
    try { await post({ action: "toggle_agent", id: agent.id, status: checked ? "active" : "paused" }); toast.success(checked ? "تم تشغيل الوكيل" : "تم إيقاف الوكيل مؤقتًا"); }
    catch (err) { toast.error(err instanceof Error ? err.message : "تعذر تحديث الوكيل"); }
  }

  const initials = user.displayName.split(" ").slice(0, 2).map((part) => part[0]).join("").toUpperCase() || "N";

  return <SidebarProvider defaultOpen style={{ "--sidebar-width": "17rem" } as React.CSSProperties}>
    <Toaster position="top-center" richColors dir="rtl" />
    <Sidebar side="right" collapsible="icon" className="nexora-sidebar">
      <SidebarHeader className="dash-sidebar-head">
        <a href="/" className="dash-brand"><span><Sparkles /></span><b>NEXORA <i>AI</i></b></a>
        <div className="workspace-chip"><span className="workspace-icon"><Box /></span><div><strong>{data?.workspace.name ?? "مساحة العمل"}</strong><small>{data?.workspace.plan ?? "جاري التحميل"}</small></div><ChevronLeft /></div>
      </SidebarHeader>
      <SidebarSeparator />
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupLabel>مساحة العمل</SidebarGroupLabel>
          <SidebarGroupContent><SidebarMenu>{navItems.slice(0, 8).map((item) => <SidebarMenuItem key={item.id}><SidebarMenuButton isActive={view === item.id} tooltip={item.label} onClick={() => setView(item.id)}><item.icon /><span>{item.label}</span>{item.id === "inbox" && <em className="sidebar-count">{data?.metrics.openConversations ?? 0}</em>}</SidebarMenuButton></SidebarMenuItem>)}</SidebarMenu></SidebarGroupContent>
        </SidebarGroup>
        <SidebarGroup>
          <SidebarGroupLabel>الإدارة</SidebarGroupLabel>
          <SidebarGroupContent><SidebarMenu><SidebarMenuItem><SidebarMenuButton tooltip="مركز التواصل والعملاء" onClick={() => { window.location.href = "/dashboard/contact-center"; }}><ContactRound /><span>مركز التواصل والعملاء</span></SidebarMenuButton></SidebarMenuItem><SidebarMenuItem><SidebarMenuButton tooltip="الاشتراك والفوترة" onClick={() => { window.location.href = "/dashboard/billing"; }}><CreditCard /><span>الاشتراك والفوترة</span></SidebarMenuButton></SidebarMenuItem><SidebarMenuItem><SidebarMenuButton isActive={view === "settings"} tooltip="الإعدادات" onClick={() => setView("settings")}><Settings /><span>الإعدادات</span></SidebarMenuButton></SidebarMenuItem></SidebarMenu></SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
      <SidebarFooter className="dash-sidebar-footer">
        <button className="support-button"><LifeBuoy /><span>مركز المساعدة</span></button>
        <div className="account-card"><span className="user-avatar">{initials}</span><div><strong>{user.displayName}</strong><small>{user.email}</small></div><MoreHorizontal /></div>
      </SidebarFooter>
    </Sidebar>

    <SidebarInset className="dashboard-main">
      <header className="dashboard-header">
        <div className="header-title"><SidebarTrigger className="dash-trigger" /><div><h1>{labels[view].title}</h1><p>{labels[view].subtitle}</p></div></div>
        <div className="dashboard-actions"><div className="dash-search"><Search /><Input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="بحث سريع..." /></div><button className="header-icon" aria-label="الإشعارات"><Bell /><i /></button>{(view === "agents" || view === "overview") && <Button className="dash-primary" onClick={() => { window.location.href = "/create-agent/setup"; }}><Plus /> وكيل جديد</Button>}</div>
      </header>

      <div className="dashboard-content">
        {loading ? <DashboardSkeleton /> : error ? <ErrorState message={error} retry={loadData} /> : data && <>
          {view === "overview" && <Overview data={data} activeAgents={activeAgents} goTo={setView} />}
          {view === "inbox" && <InboxView conversations={data.conversations} messages={data.messages} team={data.team} selected={selected} select={setSelectedConversation} post={post} />}
          {view === "agents" && <AgentsView agents={filteredAgents} toggle={toggleAgent} create={() => { window.location.href = "/create-agent/setup"; }} edit={(agent) => { setSelectedAgent(agent); setAgentSheet(true); }} />}
          {view === "workflows" && <WorkflowsView workflows={data.workflows} create={() => setWorkflowDialog(true)} />}
          {view === "knowledge" && <KnowledgeView sources={data.knowledge} reload={loadData} post={post} />}
          {view === "channels" && <ChannelsView channels={data.channels} post={post} />}
          {view === "team" && <TeamView members={data.team} post={post} />}
          {view === "analytics" && <AnalyticsView data={data} />}
          {view === "settings" && <SettingsView workspace={data.workspace} auditLogs={data.auditLogs} />}
        </>}
      </div>
    </SidebarInset>

    <AgentStudio open={agentSheet} onOpenChange={(open) => { setAgentSheet(open); if (!open) setSelectedAgent(null); }} save={post} agent={selectedAgent} simulations={data?.simulations ?? []} />
    <CreateWorkflowDialog open={workflowDialog} onOpenChange={setWorkflowDialog} save={post} />
  </SidebarProvider>;
}

function DashboardSkeleton() {
  return <div className="dash-skeleton"><div className="overview-metrics">{[1,2,3,4].map((i) => <Skeleton key={i} className="h-32 rounded-2xl" />)}</div><Skeleton className="h-[380px] rounded-2xl" /></div>;
}

function ErrorState({ message, retry }: { message: string; retry: () => void }) {
  return <div className="dash-error"><Activity /><h2>تعذر فتح مساحة العمل</h2><p>{message}</p><Button onClick={retry}>إعادة المحاولة</Button></div>;
}

function Overview({ data, activeAgents, goTo }: { data: PlatformData; activeAgents: number; goTo: (id: ViewId) => void }) {
  const metrics = [
    { label: "إجمالي المحادثات", value: data.metrics.totalConversations.toLocaleString("ar-SA"), change: `${data.metrics.openConversations} نشطة`, icon: MessageCircle, tone: "violet" },
    { label: "الردود المؤتمتة", value: `${data.metrics.automationRate}%`, change: `${data.metrics.totalMessages} رسالة`, icon: Zap, tone: "mint" },
    { label: "تم تحويلها لموظف", value: data.metrics.handoffConversations.toLocaleString("ar-SA"), change: `${data.metrics.activeTeam} أعضاء`, icon: Users, tone: "blue" },
    { label: "معدل الإغلاق", value: `${data.metrics.resolutionRate}%`, change: `${data.metrics.resolvedConversations} مغلقة`, icon: CheckCircle2, tone: "amber" },
  ];
  return <div className="overview-view">
    <div className="overview-welcome"><div><span className="dash-eyebrow"><Sparkles /> مركز العمليات</span><h2>أهلًا، هذه أهم نتائج اليوم.</h2><p>{activeAgents} وكلاء يعملون الآن وينفذون المهام عبر قنواتك.</p></div><div className="live-ops"><i /><strong>النظام يعمل بكفاءة</strong><span>آخر فحص قبل دقيقة</span></div></div>
    <div className="overview-metrics">{metrics.map((metric) => <article className="dash-metric" key={metric.label}><span className={`metric-icon ${metric.tone}`}><metric.icon /></span><div><small>{metric.label}</small><strong>{metric.value}</strong></div><em><ArrowUpRight />{metric.change}</em></article>)}</div>
    <div className="overview-grid">
      <article className="dash-card performance-card"><div className="dash-card-head"><div><h3>المحادثات المنجزة</h3><p>الأداء خلال آخر 7 أيام</p></div><NativeSelect defaultValue="7"><NativeSelectOption value="7">7 أيام</NativeSelectOption><NativeSelectOption value="30">30 يومًا</NativeSelectOption></NativeSelect></div><div className="dash-chart">{[48,62,56,74,67,91,82].map((height,index) => <div key={index}><span className="chart-value">{[742,885,801,994,921,1248,1134][index]}</span><i style={{ height: `${height}%` }} /><small>{["السبت","الأحد","الاثنين","الثلاثاء","الأربعاء","الخميس","الجمعة"][index]}</small></div>)}</div></article>
      <article className="dash-card channel-card"><div className="dash-card-head"><div><h3>القنوات</h3><p>توزيع المحادثات</p></div><button><MoreHorizontal /></button></div><div className="channel-donut"><div className="donut"><span><strong>1,248</strong><small>إجمالي</small></span></div><div className="channel-legend"><span><i className="whatsapp" />واتساب <b>58%</b></span><span><i className="instagram" />إنستغرام <b>24%</b></span><span><i className="web" />الموقع <b>12%</b></span><span><i className="email" />البريد <b>6%</b></span></div></div></article>
    </div>
    <div className="overview-bottom">
      <article className="dash-card"><div className="dash-card-head"><div><h3>الوكلاء النشطون</h3><p>أداء كل وكيل اليوم</p></div><button className="text-action" onClick={() => goTo("agents")}>عرض الكل <ChevronLeft /></button></div><div className="agent-summary-list">{data.agents.slice(0,3).map((agent) => <div key={agent.id}><span className="summary-agent-icon"><Bot /></span><div><strong>{agent.name}</strong><small>{agent.channel} · {agent.knowledge_count} مصدر</small></div><Progress value={agent.autonomy} /><b>{agent.autonomy}%</b></div>)}</div></article>
      <article className="dash-card"><div className="dash-card-head"><div><h3>آخر المحادثات</h3><p>تحتاج إلى متابعة</p></div><button className="text-action" onClick={() => goTo("inbox")}>فتح الصندوق <ChevronLeft /></button></div><div className="recent-conversations">{data.conversations.slice(0,3).map((conversation,index) => <button key={conversation.id} onClick={() => goTo("inbox")}><span className={`conversation-avatar avatar-${index + 1}`}>{conversation.customer_name[0]}</span><div><strong>{conversation.customer_name}</strong><small>{conversation.preview}</small></div>{conversation.unread_count > 0 && <em>{conversation.unread_count}</em>}</button>)}</div></article>
    </div>
  </div>;
}

function InboxView({ conversations, messages, team, selected, select, post }: { conversations: Conversation[]; messages: ConversationMessage[]; team: TeamMember[]; selected?: Conversation; select: (id: string) => void; post: (body: object) => Promise<void> }) {
  const [reply, setReply] = useState("");
  const [filter, setFilter] = useState<"all" | "unread" | "handoff">("all");
  const [query, setQuery] = useState("");
  const [creating, setCreating] = useState(false);
  const [customerName, setCustomerName] = useState("");
  const [customerChannel, setCustomerChannel] = useState("واتساب");
  const [customerPhone, setCustomerPhone] = useState("");
  const [initialMessage, setInitialMessage] = useState("");
  const visible = conversations.filter((item) => (filter === "unread" ? item.unread_count > 0 : filter === "handoff" ? item.state === "handoff" : true) && `${item.customer_name} ${item.preview}`.includes(query));
  const selectedMessages = selected ? messages.filter((message) => message.conversation_id === selected.id) : [];
  async function send(event: FormEvent) {
    event.preventDefault(); if (!selected || !reply.trim()) return;
    try { await post({ action: "send_message", conversationId: selected.id, content: reply }); setReply(""); toast.success("تم إرسال الرد وحفظه"); }
    catch (error) { toast.error(error instanceof Error ? error.message : "تعذر إرسال الرد"); }
  }
  async function updateConversation(state: Conversation["state"], extras: object = {}) {
    if (!selected) return;
    try { await post({ action: "update_conversation", id: selected.id, state, ...extras }); toast.success("تم تحديث المحادثة"); }
    catch (error) { toast.error(error instanceof Error ? error.message : "تعذر تحديث المحادثة"); }
  }
  async function createConversation(event: FormEvent) {
    event.preventDefault();
    try { await post({ action: "create_conversation", customerName, channel: customerChannel, customerPhone, initialMessage }); toast.success("تم إنشاء المحادثة"); setCreating(false); setCustomerName(""); setCustomerPhone(""); setInitialMessage(""); }
    catch (error) { toast.error(error instanceof Error ? error.message : "تعذر إنشاء المحادثة"); }
  }
  return <><div className="inbox-layout">
    <aside className="conversation-list"><div className="inbox-tools"><div className="inbox-search"><Search /><Input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="ابحث في المحادثات" /></div><Button variant="outline" size="icon" aria-label="محادثة جديدة" onClick={() => setCreating(true)}><Plus /></Button></div><div className="inbox-filters"><button className={filter === "all" ? "active" : ""} onClick={() => setFilter("all")}>الكل <b>{conversations.length}</b></button><button className={filter === "unread" ? "active" : ""} onClick={() => setFilter("unread")}>غير مقروءة</button><button className={filter === "handoff" ? "active" : ""} onClick={() => setFilter("handoff")}>محولة</button></div><div className="conversation-scroll">{visible.map((item,index) => <button className={selected?.id === item.id ? "active" : ""} key={item.id} onClick={() => select(item.id)}><span className={`conversation-avatar avatar-${(index%3)+1}`}>{item.customer_name[0]}</span><div><strong>{item.customer_name}</strong><span>{item.preview}</span><small>{item.channel} · {item.state === "resolved" ? "مغلقة" : item.state === "handoff" ? "محولة" : "مفتوحة"}</small></div><time>{new Date(item.updated_at).toLocaleDateString("ar-SA")}</time>{item.unread_count > 0 && <em>{item.unread_count}</em>}</button>)}</div></aside>
    <section className="conversation-room">{selected ? <><header><div><span className="conversation-avatar avatar-1">{selected.customer_name[0]}</span><div><strong>{selected.customer_name}</strong><small><i /> {selected.state === "resolved" ? "مغلقة" : "نشطة"} · {selected.channel}</small></div></div><div className="conversation-actions"><NativeSelect value={selected.assigned_to} onChange={(e) => void updateConversation(selected.state, { assignedTo: e.target.value })}><NativeSelectOption value="">غير معينة</NativeSelectOption>{team.map((member) => <NativeSelectOption key={member.id} value={member.name}>{member.name}</NativeSelectOption>)}</NativeSelect><Button variant="outline" size="sm" onClick={() => void updateConversation("handoff")}><Users /> تحويل</Button><Button variant="outline" size="sm" onClick={() => void updateConversation(selected.state === "resolved" ? "open" : "resolved")}><Check /> {selected.state === "resolved" ? "إعادة فتح" : "إغلاق"}</Button></div></header><div className="room-messages"><span className="message-date">سجل المحادثة</span>{selectedMessages.map((message) => <div className={`room-message ${message.sender_type === "customer" ? "customer" : "agent"} ${message.sender_type === "human" ? "human" : ""}`} key={message.id}><p>{message.content}</p><time>{new Date(message.created_at).toLocaleString("ar-SA")} · {message.sender_name}</time></div>)}</div><form className="reply-box" onSubmit={send}><Textarea value={reply} onChange={(e) => setReply(e.target.value)} placeholder="اكتب ردًا للعميل..." /><div><span>{selected.assigned_to ? `معينة إلى ${selected.assigned_to}` : "رد بشري محفوظ"}</span><Button className="dash-primary" type="submit"><Send /> إرسال</Button></div></form></> : <div className="no-selection"><MessageCircle /><p>اختر محادثة لعرض تفاصيلها</p></div>}</section>
    <aside className="customer-panel"><div className="customer-profile"><span className="conversation-avatar avatar-1">{selected?.customer_name[0] ?? "ع"}</span><h3>{selected?.customer_name ?? "العميل"}</h3><p>{selected?.channel ?? "القناة"}</p></div><div className="customer-section"><strong>بيانات العميل</strong><span><small>رقم الجوال</small><b>{selected?.customer_phone || "غير مسجل"}</b></span><span><small>البريد</small><b>{selected?.customer_email || "غير مسجل"}</b></span><span><small>المسؤول</small><Badge variant="secondary">{selected?.assigned_to || "غير معينة"}</Badge></span></div><div className="customer-section"><strong>الأولوية</strong><NativeSelect value={selected?.priority ?? "normal"} onChange={(e) => selected && void updateConversation(selected.state, { priority: e.target.value })}><NativeSelectOption value="normal">عادية</NativeSelectOption><NativeSelectOption value="high">عالية</NativeSelectOption><NativeSelectOption value="urgent">عاجلة</NativeSelectOption></NativeSelect></div><div className="customer-section"><strong>ملخص الحالة</strong><p>{selected ? `المحادثة ${selected.state === "resolved" ? "مغلقة" : selected.state === "handoff" ? "محولة لموظف" : "مفتوحة"}، وبها ${selectedMessages.length} رسائل محفوظة.` : "اختر محادثة"}</p></div></aside>
  </div><Dialog open={creating} onOpenChange={setCreating}><DialogContent dir="rtl"><DialogHeader><DialogTitle>إنشاء محادثة</DialogTitle><DialogDescription>أضف عميلًا ورسالة أولى لتبدأ المتابعة من الصندوق.</DialogDescription></DialogHeader><form className="new-conversation-form" onSubmit={createConversation}><label>اسم العميل<Input required minLength={2} value={customerName} onChange={(e) => setCustomerName(e.target.value)} /></label><div className="studio-two"><label>القناة<NativeSelect value={customerChannel} onChange={(e) => setCustomerChannel(e.target.value)}><NativeSelectOption>واتساب</NativeSelectOption><NativeSelectOption>إنستغرام</NativeSelectOption><NativeSelectOption>تيليجرام</NativeSelectOption><NativeSelectOption>ماسنجر</NativeSelectOption><NativeSelectOption>الموقع</NativeSelectOption><NativeSelectOption>البريد</NativeSelectOption></NativeSelect></label><label>رقم التواصل<Input value={customerPhone} onChange={(e) => setCustomerPhone(e.target.value)} placeholder="+966" /></label></div><label>الرسالة الأولى<Textarea required minLength={2} value={initialMessage} onChange={(e) => setInitialMessage(e.target.value)} /></label><div className="dialog-actions"><Button type="button" variant="outline" onClick={() => setCreating(false)}>إلغاء</Button><Button className="dash-primary" type="submit">إنشاء المحادثة</Button></div></form></DialogContent></Dialog></>;
}

function AgentsView({ agents, toggle, create, edit }: { agents: Agent[]; toggle: (agent: Agent, checked: boolean) => void; create: () => void; edit: (agent: Agent) => void }) {
  return <div className="agents-view"><div className="view-toolbar"><div><Badge variant="secondary">{agents.length} وكلاء</Badge><span>حرّر هوية الوكيل وتعليماته واختبر الرد قبل التشغيل.</span></div><Button className="dash-primary" onClick={create}><Plus /> إنشاء وكيل</Button></div><div className="dash-card table-card"><Table><TableHeader><TableRow><TableHead>الوكيل</TableHead><TableHead>المهمة</TableHead><TableHead>القناة</TableHead><TableHead>المعرفة</TableHead><TableHead>الاستقلالية</TableHead><TableHead>الحالة</TableHead><TableHead /></TableRow></TableHeader><TableBody>{agents.map((agent) => <TableRow key={agent.id}><TableCell><div className="table-agent"><span><Bot /></span><strong>{agent.name}</strong></div></TableCell><TableCell className="role-cell">{agent.role}</TableCell><TableCell><Badge variant="outline">{agent.channel}</Badge></TableCell><TableCell>{agent.knowledge_count} مصدر</TableCell><TableCell><div className="autonomy-cell"><Progress value={agent.autonomy} /><b>{agent.autonomy}%</b></div></TableCell><TableCell><div className="status-switch"><Switch checked={agent.status === "active"} onCheckedChange={(checked) => void toggle(agent, checked)} /><span className={agent.status}>{agent.status === "active" ? "يعمل" : agent.status === "training" ? "يتدرب" : "متوقف"}</span></div></TableCell><TableCell><Button variant="ghost" size="icon" aria-label="تحرير الوكيل" onClick={() => edit(agent)}><Pencil /></Button></TableCell></TableRow>)}</TableBody></Table></div></div>;
}

function WorkflowsView({ workflows, create }: { workflows: WorkflowRecord[]; create: () => void }) {
  return <div className="workflows-view"><div className="view-toolbar"><div><Badge variant="secondary">{workflows.length} مسارات</Badge><span>المسارات النشطة تنفذ العمل تلقائيًا.</span></div><Button className="dash-primary" onClick={create}><Plus /> مسار جديد</Button></div><div className="workflow-grid">{workflows.map((flow,index) => <article className="workflow-card" key={flow.id}><div className="workflow-card-head"><span className={`workflow-icon flow-${index+1}`}><Workflow /></span><div><h3>{flow.name}</h3><Badge variant={flow.status === "active" ? "default" : "secondary"}>{flow.status === "active" ? "نشط" : "متوقف"}</Badge></div><Button variant="ghost" size="icon"><MoreHorizontal /></Button></div><div className="flow-line"><div><small>عند</small><strong><Zap /> {flow.trigger_name}</strong></div><ChevronLeft /><div><small>نفّذ</small><strong><CheckCircle2 /> {flow.action_name}</strong></div></div><footer><span>تم التنفيذ <b>{flow.runs.toLocaleString("ar-SA")}</b> مرة</span><button>فتح المسار <ExternalLink /></button></footer></article>)}</div><article className="automation-banner"><div><WandSparkles /><span><strong>اقترح مسارًا بالذكاء الاصطناعي</strong><small>اكتب العملية بلغتك، وسيحوّلها NEXORA إلى خطوات قابلة للتنفيذ.</small></span></div><Button variant="outline" onClick={create}>ابدأ من وصف</Button></article></div>;
}

function KnowledgeView({ sources, reload, post }: { sources: KnowledgeSource[]; reload: () => Promise<void>; post: (body: object) => Promise<void> }) {
  const [uploading, setUploading] = useState(false);
  const [linkOpen, setLinkOpen] = useState(false);
  const [linkName, setLinkName] = useState("");
  const [linkUrl, setLinkUrl] = useState("");
  async function upload(file?: File) {
    if (!file) return;
    setUploading(true);
    try {
      const body = new FormData(); body.append("file", file);
      const response = await fetch("/api/knowledge", { method: "POST", body });
      const result = await response.json().catch(() => ({})) as { error?: string };
      if (!response.ok) throw new Error(result.error ?? "تعذر رفع الملف");
      toast.success("تم رفع الملف وإضافته إلى المعرفة");
      await reload();
    } catch (error) { toast.error(error instanceof Error ? error.message : "تعذر رفع الملف"); }
    finally { setUploading(false); }
  }
  async function addLink(event: FormEvent) {
    event.preventDefault();
    try { await post({ action: "add_knowledge_link", name: linkName, url: linkUrl }); toast.success("تمت إضافة الرابط"); setLinkOpen(false); setLinkName(""); setLinkUrl(""); }
    catch (error) { toast.error(error instanceof Error ? error.message : "تعذر إضافة الرابط"); }
  }
  const totalMb = sources.reduce((sum, source) => sum + source.size_bytes, 0) / 1024 / 1024;
  return <div className="knowledge-view"><div className="knowledge-hero"><div><span><BookOpen /></span><div><h2>أضف معرفة منشأتك</h2><p>ارفع الملفات أو أضف الروابط ليستخدمها الوكيل في بناء إجاباته.</p></div></div><div><Button variant="outline" onClick={() => setLinkOpen(true)}><Link2 /> إضافة رابط</Button><Button className="dash-primary upload-button" disabled={uploading}><Upload /> {uploading ? "جارٍ الرفع..." : "رفع ملف"}<input aria-label="رفع ملف معرفة" type="file" accept=".pdf,.docx,.txt,.csv,.xlsx" disabled={uploading} onChange={(event) => { void upload(event.target.files?.[0]); event.currentTarget.value = ""; }} /></Button></div></div><div className="knowledge-stats"><div><strong>{sources.length}</strong><span>مصادر متصلة</span></div><div><strong>{totalMb.toFixed(1)} MB</strong><span>ملفات محفوظة</span></div><div><strong>{sources.length ? "100%" : "0%"}</strong><span>جاهزية المصادر</span></div></div><div className="dash-card source-list"><div className="dash-card-head"><div><h3>مصادر المعرفة</h3><p>البيانات محفوظة داخل مساحة العمل</p></div><Badge variant="secondary">{sources.filter((item) => item.status === "ready").length} جاهز</Badge></div>{sources.length ? sources.map((source) => <div className="source-row" key={source.id}><span>{source.source_type === "link" ? <Link2 /> : <FileText />}</span><div><strong>{source.name}</strong><small>{source.source_type === "link" ? source.source_url : `${source.mime_type?.split("/").pop()?.toUpperCase() ?? "FILE"} · ${formatBytes(source.size_bytes)}`}</small></div><Progress value={source.status === "ready" ? 100 : 60} /><Badge variant="secondary">{source.status === "ready" ? "جاهز" : "قيد المعالجة"}</Badge><Button variant="ghost" size="icon"><MoreHorizontal /></Button></div>) : <div className="knowledge-empty"><BookOpen /><strong>لا توجد مصادر بعد</strong><span>ابدأ برفع دليل خدماتك أو إضافة رابط موقعك.</span></div>}</div><Dialog open={linkOpen} onOpenChange={setLinkOpen}><DialogContent dir="rtl"><DialogHeader><DialogTitle>إضافة رابط معرفة</DialogTitle><DialogDescription>أضف رابط صفحة السياسات أو الأسئلة الشائعة أو الخدمات.</DialogDescription></DialogHeader><form className="link-form" onSubmit={addLink}><label>اسم المصدر<Input required value={linkName} onChange={(e) => setLinkName(e.target.value)} placeholder="مثال: الأسئلة الشائعة" /></label><label>الرابط<Input required type="url" value={linkUrl} onChange={(e) => setLinkUrl(e.target.value)} placeholder="https://example.com/help" /></label><div className="dialog-actions"><Button type="button" variant="outline" onClick={() => setLinkOpen(false)}>إلغاء</Button><Button className="dash-primary" type="submit">إضافة المصدر</Button></div></form></DialogContent></Dialog></div>;
}

function formatBytes(bytes: number) {
  if (!bytes) return "رابط";
  if (bytes < 1024 * 1024) return `${Math.max(1, Math.round(bytes / 1024))} KB`;
  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
}

function ChannelsView({ channels, post }: { channels: ChannelRecord[]; post: (body: object) => Promise<void> }) {
  const catalog = [
    { provider: "whatsapp", name: "واتساب للأعمال", icon: MessageCircle, note: "الرسائل والقوالب وخدمة العملاء" },
    { provider: "instagram", name: "إنستغرام وماسنجر", icon: MessageSquare, note: "التعليقات والرسائل المباشرة" },
    { provider: "telegram", name: "تيليجرام", icon: Send, note: "بوت مخصص للمحادثات والتنبيهات" },
    { provider: "webchat", name: "محادثة الموقع", icon: Smartphone, note: "ودجت جاهز لموقع شركتك" },
    { provider: "email", name: "البريد الإلكتروني", icon: Mail, note: "استقبال التذاكر وإرسال الردود" },
  ] as const;
  async function setup(provider: typeof catalog[number]["provider"], name: string) {
    try { await post({ action: "setup_channel", provider, name }); toast.success("تم تجهيز القناة لاستكمال الربط لاحقًا"); }
    catch (error) { toast.error(error instanceof Error ? error.message : "تعذر تجهيز القناة"); }
  }
  return <div className="channels-view"><div className="channels-notice"><ShieldCheck /><div><strong>مرحلة التجهيز بدون ربط خارجي</strong><span>نحفظ إعداد القناة فقط. لن تُرسل أي رسالة ولن يُطلب مفتاح مزود الآن.</span></div></div><div className="channels-grid">{catalog.map((item) => { const saved = channels.find((channel) => channel.provider === item.provider); return <article className="channel-setup-card" key={item.provider}><span className="channel-provider-icon"><item.icon /></span><div><h3>{item.name}</h3><p>{item.note}</p></div><Badge variant={saved ? "secondary" : "outline"}>{saved ? saved.config_label : "غير مهيأة"}</Badge><Button variant={saved ? "outline" : "default"} onClick={() => void setup(item.provider, item.name)}>{saved ? "تحديث الإعداد" : "تهيئة القناة"}</Button></article>; })}</div></div>;
}

function TeamView({ members, post }: { members: TeamMember[]; post: (body: object) => Promise<void> }) {
  const [open, setOpen] = useState(false); const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [role, setRole] = useState("موظف خدمة عملاء");
  async function add(event: FormEvent) {
    event.preventDefault();
    try { await post({ action: "add_team_member", name, email, role }); toast.success("تمت إضافة عضو الفريق"); setOpen(false); setName(""); setEmail(""); }
    catch (error) { toast.error(error instanceof Error ? error.message : "تعذر إضافة العضو"); }
  }
  const permissions: Record<string,string> = { "مدير عام": "كامل الصلاحيات", "مشرف محادثات": "إدارة المحادثات والوكلاء", "موظف خدمة عملاء": "الرد والتحويل", "محلل": "التقارير فقط", "مشاهد": "عرض فقط" };
  return <div className="team-view"><div className="view-toolbar"><div><Badge variant="secondary">{members.length} أعضاء</Badge><span>الأدوار تحدد ما يستطيع كل عضو عرضه أو تعديله.</span></div><Button className="dash-primary" onClick={() => setOpen(true)}><Plus /> إضافة عضو</Button></div><div className="dash-card table-card"><Table><TableHeader><TableRow><TableHead>العضو</TableHead><TableHead>البريد</TableHead><TableHead>الدور</TableHead><TableHead>الصلاحية</TableHead><TableHead>الحالة</TableHead></TableRow></TableHeader><TableBody>{members.map((member) => <TableRow key={member.id}><TableCell><div className="table-agent"><span><Users /></span><strong>{member.name}</strong></div></TableCell><TableCell dir="ltr">{member.email}</TableCell><TableCell><Badge variant="outline">{member.role}</Badge></TableCell><TableCell className="role-cell">{permissions[member.role] ?? "صلاحية مخصصة"}</TableCell><TableCell><Badge variant="secondary">{member.status === "active" ? "نشط" : "موقوف"}</Badge></TableCell></TableRow>)}</TableBody></Table></div><div className="role-matrix"><h3>مصفوفة الصلاحيات</h3><div>{Object.entries(permissions).map(([roleName, permission]) => <span key={roleName}><strong>{roleName}</strong><small>{permission}</small></span>)}</div></div><Dialog open={open} onOpenChange={setOpen}><DialogContent dir="rtl"><DialogHeader><DialogTitle>إضافة عضو فريق</DialogTitle><DialogDescription>أدخل بيانات العضو وحدد دوره داخل مساحة العمل.</DialogDescription></DialogHeader><form className="new-conversation-form" onSubmit={add}><label>الاسم<Input required minLength={2} value={name} onChange={(e) => setName(e.target.value)} /></label><label>البريد الإلكتروني<Input required type="email" value={email} onChange={(e) => setEmail(e.target.value)} /></label><label>الدور<NativeSelect value={role} onChange={(e) => setRole(e.target.value)}><NativeSelectOption>مدير عام</NativeSelectOption><NativeSelectOption>مشرف محادثات</NativeSelectOption><NativeSelectOption>موظف خدمة عملاء</NativeSelectOption><NativeSelectOption>محلل</NativeSelectOption><NativeSelectOption>مشاهد</NativeSelectOption></NativeSelect></label><div className="dialog-actions"><Button type="button" variant="outline" onClick={() => setOpen(false)}>إلغاء</Button><Button className="dash-primary" type="submit">إضافة العضو</Button></div></form></DialogContent></Dialog></div>;
}

function AnalyticsView({ data }: { data: PlatformData }) {
  const states = [
    { label: "مفتوحة", count: data.conversations.filter((item) => item.state === "open").length, color: "#5b60f4" },
    { label: "محولة لموظف", count: data.metrics.handoffConversations, color: "#f1ad4a" },
    { label: "مغلقة", count: data.metrics.resolvedConversations, color: "#28bea0" },
  ];
  const channels = Array.from(new Set(data.conversations.map((item) => item.channel))).map((channel) => ({ channel, count: data.conversations.filter((item) => item.channel === channel).length })).sort((a,b) => b.count - a.count);
  const maximum = Math.max(1, ...channels.map((item) => item.count));
  return <div className="analytics-view"><div className="analytics-top"><div><small>إجمالي المحادثات</small><strong>{data.metrics.totalConversations.toLocaleString("ar-SA")}</strong><span><MessageCircle /> بيانات فعلية محفوظة</span></div><div><small>معدل الإغلاق</small><strong>{data.metrics.resolutionRate}%</strong><span><CheckCircle2 /> {data.metrics.resolvedConversations} محادثات مغلقة</span></div><div><small>التحويل لموظف</small><strong>{data.metrics.handoffConversations}</strong><span className="down"><Users /> {data.metrics.activeTeam} أعضاء نشطين</span></div></div><div className="analytics-grid"><article className="dash-card analytics-main"><div className="dash-card-head"><div><h3>حالة المحادثات</h3><p>تتحدث مباشرة عند تغيير الحالة</p></div><Badge variant="secondary">{data.metrics.totalMessages} رسالة</Badge></div><div className="state-analytics">{states.map((state) => <div key={state.label}><div><span>{state.label}</span><b>{state.count}</b></div><i><em style={{ width: `${data.metrics.totalConversations ? (state.count / data.metrics.totalConversations) * 100 : 0}%`, background: state.color }} /></i></div>)}</div></article><article className="dash-card intent-card"><div className="dash-card-head"><div><h3>القنوات المستخدمة</h3><p>حسب عدد المحادثات</p></div></div>{channels.length ? channels.map((item) => <div className="intent-row" key={item.channel}><div><span>{item.channel}</span><b>{item.count}</b></div><Progress value={(item.count / maximum) * 100} /></div>) : <div className="simulation-empty">لا توجد محادثات بعد.</div>}</article></div></div>;
}

function SettingsView({ workspace, auditLogs }: { workspace: PlatformData["workspace"]; auditLogs: AuditLog[] }) {
  return <div className="settings-view"><section className="dash-card settings-card"><div className="settings-heading"><h3>بيانات مساحة العمل</h3><p>تظهر هذه البيانات لأعضاء فريقك وفي التقارير.</p></div><div className="settings-form"><label>اسم مساحة العمل<Input defaultValue={workspace.name} /></label><label>القطاع<NativeSelect defaultValue={workspace.industry}><NativeSelectOption>{workspace.industry}</NativeSelectOption><NativeSelectOption>التجارة الإلكترونية</NativeSelectOption><NativeSelectOption>الرعاية الصحية</NativeSelectOption><NativeSelectOption>العقارات</NativeSelectOption><NativeSelectOption>التعليم</NativeSelectOption><NativeSelectOption>السيارات</NativeSelectOption><NativeSelectOption>السفر والسياحة</NativeSelectOption></NativeSelect></label><label>المنطقة الزمنية<NativeSelect defaultValue="riyadh"><NativeSelectOption value="riyadh">الرياض (UTC+3)</NativeSelectOption></NativeSelect></label><Button className="dash-primary">حفظ التغييرات</Button></div></section><section className="dash-card settings-card"><div className="settings-heading"><h3>ضوابط الوكلاء</h3><p>إعدادات عامة تنطبق على جميع القطاعات.</p></div><div className="setting-toggle"><div><strong>التحويل التلقائي للموظف</strong><span>حوّل الحالة عند انخفاض الثقة عن الحد المحدد.</span></div><Switch defaultChecked /></div><div className="setting-toggle"><div><strong>مراجعة الردود الحساسة</strong><span>اطلب موافقة بشرية قبل المدفوعات أو الشكاوى.</span></div><Switch defaultChecked /></div><div className="setting-toggle"><div><strong>حفظ سجل القرارات</strong><span>سجل المصادر والإجراءات المستخدمة في كل محادثة.</span></div><Switch defaultChecked /></div></section><section className="dash-card audit-card"><div className="settings-heading"><h3>سجل التدقيق</h3><p>آخر التغييرات المحفوظة في مساحة العمل.</p></div><div className="audit-list">{auditLogs.length ? auditLogs.map((log) => <div key={log.id}><span><ShieldCheck /></span><div><strong>{log.action}</strong><small>{log.target_label}</small></div><time>{new Date(log.created_at).toLocaleDateString("ar-SA")}</time></div>) : <p className="audit-empty">سيظهر هنا سجل إنشاء الوكلاء وتهيئة القنوات ورفع الملفات.</p>}</div></section><section className="dash-card security-card"><ShieldCheck /><div><h3>الأمان والصلاحيات</h3><p>حسابك محمي، وكل إجراءات الوكلاء محفوظة في سجل التدقيق.</p></div><Badge variant="secondary">حماية مفعلة</Badge></section></div>;
}

function AgentStudio({ open, onOpenChange, save, agent, simulations }: { open: boolean; onOpenChange: (open: boolean) => void; save: (body: object) => Promise<void>; agent: Agent | null; simulations: SimulationMessage[] }) {
  const [name,setName]=useState(""); const [role,setRole]=useState(""); const [description,setDescription]=useState(""); const [instructions,setInstructions]=useState(""); const [tone,setTone]=useState("ودود واحترافي"); const [language,setLanguage]=useState("العربية"); const [welcomeMessage,setWelcomeMessage]=useState("أهلًا بك، كيف يمكنني مساعدتك؟"); const [channel,setChannel]=useState("واتساب"); const [autonomy,setAutonomy]=useState([70]); const [handoff,setHandoff]=useState([45]); const [saving,setSaving]=useState(false); const [testMessage,setTestMessage]=useState(""); const [testing,setTesting]=useState(false);
  useEffect(() => {
    if (!open) return;
    setName(agent?.name ?? ""); setRole(agent?.role ?? ""); setDescription(agent?.description ?? ""); setInstructions(agent?.instructions ?? ""); setTone(agent?.tone ?? "ودود واحترافي"); setLanguage(agent?.language ?? "العربية"); setWelcomeMessage(agent?.welcome_message ?? "أهلًا بك، كيف يمكنني مساعدتك؟"); setChannel(agent?.channel ?? "واتساب"); setAutonomy([agent?.autonomy ?? 70]); setHandoff([agent?.handoff_threshold ?? 45]); setTestMessage("");
  }, [agent, open]);
  async function submit(event: FormEvent) {
    event.preventDefault(); setSaving(true);
    try {
      await save({ action: agent ? "update_agent" : "create_agent", ...(agent ? { id: agent.id } : {}), name, role, description, instructions, tone, language, welcomeMessage, handoffThreshold: handoff[0], channel, autonomy: autonomy[0] });
      toast.success(agent ? "تم حفظ إعدادات الوكيل" : "تم إنشاء الوكيل وبدأت مرحلة التدريب"); onOpenChange(false);
    } catch(err) { toast.error(err instanceof Error ? err.message : "تعذر حفظ الوكيل"); } finally { setSaving(false); }
  }
  async function test(event: FormEvent) {
    event.preventDefault(); if (!agent || !testMessage.trim()) return; setTesting(true);
    try { await save({ action: "simulate_message", agentId: agent.id, message: testMessage }); setTestMessage(""); toast.success("تم اختبار الرسالة وحفظ النتيجة"); }
    catch (error) { toast.error(error instanceof Error ? error.message : "تعذر تشغيل المحاكاة"); } finally { setTesting(false); }
  }
  const history = agent ? simulations.filter((message) => message.agent_id === agent.id) : [];
  return <Sheet open={open} onOpenChange={onOpenChange}><SheetContent side="left" className="create-sheet agent-studio" dir="rtl"><SheetHeader><span className="sheet-icon"><Bot /></span><SheetTitle>{agent ? `استوديو ${agent.name}` : "إنشاء وكيل جديد"}</SheetTitle><SheetDescription>صمّم الهوية والتعليمات والضوابط ثم اختبر السلوك قبل التشغيل.</SheetDescription></SheetHeader><Tabs defaultValue="identity" dir="rtl" className="studio-tabs"><TabsList><TabsTrigger value="identity">الهوية</TabsTrigger><TabsTrigger value="instructions">التعليمات</TabsTrigger><TabsTrigger value="controls">الضوابط</TabsTrigger><TabsTrigger value="test">الاختبار</TabsTrigger></TabsList><TabsContent value="identity"><form id="agent-form" onSubmit={submit} className="agent-form"><label>اسم الوكيل<Input required minLength={2} value={name} onChange={(e)=>setName(e.target.value)} placeholder="مثال: وكيل المبيعات" /></label><label>مهمته الأساسية<Textarea required minLength={3} value={role} onChange={(e)=>setRole(e.target.value)} placeholder="مثال: تأهيل العملاء ومتابعة الطلبات" /></label><label>وصف مختصر<Textarea value={description} onChange={(e)=>setDescription(e.target.value)} placeholder="صف نطاق عمل الوكيل والنتيجة المطلوبة" /></label><div className="studio-two"><label>لغة الرد<NativeSelect value={language} onChange={(e)=>setLanguage(e.target.value)}><NativeSelectOption>العربية</NativeSelectOption><NativeSelectOption>الإنجليزية</NativeSelectOption><NativeSelectOption>عربي وإنجليزي</NativeSelectOption></NativeSelect></label><label>النبرة<NativeSelect value={tone} onChange={(e)=>setTone(e.target.value)}><NativeSelectOption>ودود واحترافي</NativeSelectOption><NativeSelectOption>رسمي ومختصر</NativeSelectOption><NativeSelectOption>بيعي ومقنع</NativeSelectOption><NativeSelectOption>متعاطف وهادئ</NativeSelectOption></NativeSelect></label></div></form></TabsContent><TabsContent value="instructions"><div className="agent-form"><label>تعليمات التشغيل<Textarea className="instruction-area" value={instructions} onChange={(e)=>setInstructions(e.target.value)} placeholder="مثال: ابدأ بفهم القطاع، لا تعد العميل بما لا تملكه، واطلب رقم الطلب قبل المتابعة..." /></label><label>رسالة الترحيب<Textarea value={welcomeMessage} onChange={(e)=>setWelcomeMessage(e.target.value)} /></label><div className="permission-note"><BookOpen /><span><strong>المعرفة متاحة لكل القطاعات</strong><small>اربط ملفات الخدمات والسياسات من مركز المعرفة.</small></span></div></div></TabsContent><TabsContent value="controls"><div className="agent-form"><label>القناة<NativeSelect value={channel} onChange={(e)=>setChannel(e.target.value)}><NativeSelectOption>واتساب</NativeSelectOption><NativeSelectOption>إنستغرام</NativeSelectOption><NativeSelectOption>تيليجرام</NativeSelectOption><NativeSelectOption>ماسنجر</NativeSelectOption><NativeSelectOption>الموقع</NativeSelectOption><NativeSelectOption>البريد</NativeSelectOption><NativeSelectOption>كل القنوات</NativeSelectOption></NativeSelect></label><div className="autonomy-control"><div><strong>مستوى الاستقلالية</strong><span>{autonomy[0]}%</span></div><Slider value={autonomy} onValueChange={setAutonomy} min={20} max={100} step={5} /><small>يرفع الاستقلالية في الإجراءات غير الحساسة.</small></div><div className="autonomy-control"><div><strong>التحويل إلى موظف عند ثقة أقل من</strong><span>{handoff[0]}%</span></div><Slider value={handoff} onValueChange={setHandoff} min={10} max={90} step={5} /><small>الشكاوى والمدفوعات تبقى بحاجة إلى موافقة بشرية.</small></div></div></TabsContent><TabsContent value="test"><div className="simulator"><div className="simulator-label"><TestTube2 /><span><strong>محاكاة ذكية بدون ربط خارجي</strong><small>اختبار قواعد النوايا والحماية، وليس اتصالًا بنموذج خارجي.</small></span></div>{agent ? <><div className="simulator-chat">{history.length ? history.map((message) => <div className={message.role === "user" ? "simulation-message user" : "simulation-message assistant"} key={message.id}><p>{message.content}</p>{message.intent && <small>{message.intent}</small>}</div>) : <div className="simulation-empty">اكتب رسالة عميل لاختبار الوكيل.</div>}</div><form onSubmit={test} className="simulator-input"><Input value={testMessage} onChange={(e) => setTestMessage(e.target.value)} placeholder="مثال: أريد حجز موعد معاينة" /><Button className="dash-primary" type="submit" disabled={testing}>{testing ? "..." : <Send />}</Button></form></> : <div className="simulation-empty">احفظ الوكيل أولًا، ثم افتحه من الجدول لتشغيل الاختبار.</div>}</div></TabsContent></Tabs><SheetFooter><Button type="button" variant="outline" onClick={()=>onOpenChange(false)}>إلغاء</Button><Button form="agent-form" type="submit" className="dash-primary" disabled={saving}>{saving ? "جاري الحفظ..." : agent ? "حفظ التغييرات" : "إنشاء وبدء التدريب"}</Button></SheetFooter></SheetContent></Sheet>;
}

function CreateWorkflowDialog({ open, onOpenChange, save }: { open:boolean; onOpenChange:(open:boolean)=>void; save:(body:object)=>Promise<void> }) {
  const [name,setName]=useState("");const [trigger,setTrigger]=useState("");const [action,setAction]=useState("");const [saving,setSaving]=useState(false);
  async function submit(event:FormEvent){event.preventDefault();setSaving(true);try{await save({action:"create_workflow",name,triggerName:trigger,actionName:action});toast.success("تم تشغيل مسار الأتمتة");setName("");setTrigger("");setAction("");onOpenChange(false)}catch(err){toast.error(err instanceof Error?err.message:"تعذر إنشاء المسار")}finally{setSaving(false)}}
  return <Dialog open={open} onOpenChange={onOpenChange}><DialogContent className="workflow-dialog" dir="rtl"><DialogHeader><DialogTitle>إنشاء مسار أتمتة</DialogTitle><DialogDescription>اربط ما يقوله العميل بالإجراء الذي يجب تنفيذه.</DialogDescription></DialogHeader><form onSubmit={submit}><label>اسم المسار<Input required minLength={3} value={name} onChange={(e)=>setName(e.target.value)} placeholder="مثال: متابعة الطلب" /></label><div className="workflow-form-flow"><label><span><Zap /> عند حدوث</span><Input required minLength={3} value={trigger} onChange={(e)=>setTrigger(e.target.value)} placeholder="سؤال العميل عن طلبه" /></label><ChevronLeft /><label><span><CheckCircle2 /> نفّذ</span><Input required minLength={3} value={action} onChange={(e)=>setAction(e.target.value)} placeholder="جلب الحالة وإرسالها" /></label></div><div className="dialog-actions"><Button type="button" variant="outline" onClick={()=>onOpenChange(false)}>إلغاء</Button><Button className="dash-primary" type="submit" disabled={saving}>{saving?"جاري الحفظ...":"حفظ وتشغيل"}</Button></div></form></DialogContent></Dialog>;
}