"use client";

import { FormEvent, useCallback, useEffect, useMemo, useState } from "react";
import { AlertTriangle, ArrowLeft, ArrowRight, Bot, BookOpen, Check, CheckCircle2, Circle, Database, ExternalLink, FileText, FlaskConical, Loader2, LockKeyhole, MessageCircle, Save, Send, ShieldCheck, Sparkles, Upload, WandSparkles } from "lucide-react";

type Row=Record<string,unknown>;
type Data={error?:string;user:{name:string;email:string};workspace:Row;session:Row;templates:Row[];agents:Row[];knowledge:Row[];tests:Row[];entry:{mode:string;labelAr:string;labelEn:string};eligibility:{allowed:boolean;limit:number;reason?:string};industries:readonly (readonly string[])[];goals:readonly (readonly string[])[];channels:Array<{id:string;available:boolean;kind?:string}>};
type Draft={name:string;role:string;language:string;tone:string;welcomeMessage:string;instructions:string;unknownAnswerBehavior:"handoff"|"clarify"|"unavailable";confidenceThreshold:number;handoffRules:string[];actions:Array<{key:"search_knowledge"|"human_handoff"|"create_lead"|"create_ticket"|"send_notification";mode:"automatic"|"human_approval"|"disabled"}>;generationMode?:string};

const stepIds=["account","company","goal","agent","knowledge","test","channel","launch"] as const;
const labels={ar:{account:"الحساب",company:"الشركة",goal:"الهدف",agent:"الوكيل",knowledge:"المعرفة",test:"التجربة",channel:"القناة",launch:"الإطلاق"},en:{account:"Account",company:"Company",goal:"Goal",agent:"Agent",knowledge:"Knowledge",test:"Test",channel:"Channel",launch:"Launch"}};
const tx={
 ar:{back:"رجوع",next:"حفظ ومتابعة",save:"حفظ وخروج",loading:"جارٍ تحميل رحلة الإعداد…",retry:"إعادة المحاولة",coming:"قريبًا"},
 en:{back:"Back",next:"Save & continue",save:"Save & exit",loading:"Loading your setup journey…",retry:"Retry",coming:"Coming soon"},
};

export default function AgentSetup({isAr}:{isAr:boolean}){
 const lang=isAr?"ar":"en", t=tx[lang];
 const [data,setData]=useState<Data|null>(null),[loading,setLoading]=useState(true),[error,setError]=useState(""),[busy,setBusy]=useState(false),[step,setStep]=useState("company");
 const [company,setCompany]=useState({companyName:"",industry:"real-estate",companySize:"1-10",country:"SA",language:lang,timezone:"Asia/Riyadh",website:""});
 const [goal,setGoal]=useState("sales"),[templateId,setTemplateId]=useState<string|null>(null),[description,setDescription]=useState("");
 const [draft,setDraft]=useState<Draft|null>(null),[agentId,setAgentId]=useState<string|null>(null),[knowledge,setKnowledge]=useState({title:"",content:""}),[testMessage,setTestMessage]=useState("");
 const [messages,setMessages]=useState<Array<{role:"user"|"agent";content:string;debug?:string[]}>>([]),[channel,setChannel]=useState("webchat"),[launched,setLaunched]=useState(false),[notice,setNotice]=useState("");
 const load=useCallback(async()=>{setLoading(true);setError("");try{const r=await fetch("/api/onboarding",{cache:"no-store"});const j=await r.json() as Data;if(!r.ok)throw new Error(j.error||"load_failed");setData(j);setStep(String(j.session.current_step||"company"));setAgentId(j.session.agent_id?String(j.session.agent_id):null);setCompany(v=>({...v,companyName:String(j.workspace.name||""),industry:String(j.session.industry||j.workspace.industry||v.industry)}));const saved=JSON.parse(String(j.session.draft_json||"{}"));if(saved?.name)setDraft(saved);if(j.session.goal)setGoal(String(j.session.goal));if(j.session.template_id)setTemplateId(String(j.session.template_id));if(j.session.status==="completed")setLaunched(true)}catch(e){setError(e instanceof Error?e.message:"load_failed")}finally{setLoading(false)}},[]);
 useEffect(()=>{const id=setTimeout(()=>void load(),0);return()=>clearTimeout(id)},[load]);
 async function act(body:Row):Promise<Row>{setBusy(true);setError("");try{const r=await fetch("/api/onboarding",{method:"POST",headers:{"content-type":"application/json"},body:JSON.stringify({...body,sessionId:data?.session.id})});const j=await r.json() as Row;if(!r.ok){if(j.error==="plan_limit_reached")throw new Error(isAr?"لا توجد باقة أو تجربة مفعلة تسمح بإنشاء وكيل، أو وصلت إلى حد الوكلاء.":"No enabled plan or trial allows another agent, or your agent limit has been reached.");throw new Error(String(j.error||"action_failed"))}return j}catch(e){setError(e instanceof Error?e.message:"action_failed");throw e}finally{setBusy(false)}}
 const templates=useMemo(()=>data?.templates.filter(x=>(x.industry===company.industry||x.industry==="other")&&x.goal===goal)??[],[data,company.industry,goal]);
 const completed=useMemo(()=>{try{return new Set(JSON.parse(String(data?.session.completed_steps_json||"[]")) as string[])}catch{return new Set<string>()}},[data]);
 const progress=Math.max(1,stepIds.indexOf(step as typeof stepIds[number])+1)/stepIds.length*100;
 async function companySubmit(e:FormEvent){e.preventDefault();try{await act({action:"save_company",...company});setStep("goal");await load()}catch{}}
 async function goalSubmit(){try{await act({action:"save_goal",goal,templateId,description});const j=await act({action:"generate_draft",industry:company.industry,goal,templateId,description,language:company.language});setDraft(j.draft as Draft);setNotice(isAr?"تم إنشاء مسودة بقواعد القالب المحفوظة. راجعها قبل اعتمادها.":"A draft was built from saved template rules. Review it before accepting.");setStep("agent")}catch{}}
 async function createAgent(){if(!draft)return;try{const j=await act({action:"create_agent",...draft,description});setAgentId(String(j.agentId));setStep("knowledge");await load()}catch{}}
 async function addKnowledge(e:FormEvent){e.preventDefault();if(!agentId)return;try{await act({action:"add_knowledge",agentId,...knowledge,kind:"faq"});setKnowledge({title:"",content:""});setStep("test");await load()}catch{}}
 async function uploadFile(file:File){const form=new FormData();form.set("file",file);setBusy(true);setError("");try{const r=await fetch("/api/knowledge",{method:"POST",body:form});const j=await r.json() as Row;if(!r.ok)throw new Error(String(j.message||j.error));setNotice(isAr?"تم حفظ الملف بأمان، لكنه لن يستخدم في الإجابات حتى تتوفر خدمة الفهرسة وتكتمل معالجته.":"The file was stored securely, but it will not be used in answers until indexing is available and processing completes.");await load()}catch(e){setError(e instanceof Error?e.message:"upload_failed")}finally{setBusy(false)}}
 async function testAgent(e:FormEvent){e.preventDefault();if(!agentId||!testMessage.trim())return;const q=testMessage;setMessages(v=>[...v,{role:"user",content:q}]);setTestMessage("");try{const j=await act({action:"test_agent",agentId,message:q,scenario:"custom"});setMessages(v=>[...v,{role:"agent",content:String(j.response),debug:[`${isAr?"النية":"Intent"}: ${j.intent}`,`${isAr?"المصادر":"Sources"}: ${Array.isArray(j.sources) && j.sources.length ? j.sources.join(", ") : (isAr?"لا يوجد":"None")}`,`${isAr?"التحويل":"Handoff"}: ${j.handoffDecision}`,`${isAr?"الرصيد":"Credits"}: 0`]}]);setStep("channel");await load()}catch{}}
 async function launch(){if(!agentId)return;try{const j=await act({action:"launch_agent",agentId,channel,confirm:true});setLaunched(true);setStep("launch");setNotice(j.channelScope==="internal_test"?(isAr?"الوكيل نشط داخل بيئة اختبار Web Chat في NEXORA فقط؛ لم يتم ربط قناة خارجية.":"The agent is active only in NEXORA’s internal Web Chat test environment; no external channel is connected."):"")}catch{}}
 async function saveExit(){try{await act({action:"save_exit"});window.location.href="/dashboard"}catch{}}
 if(loading)return <main className="oa-setup" dir={isAr?"rtl":"ltr"}><div className="oa-success"><Loader2 className="oa-loader"/><p>{t.loading}</p></div></main>;
 if(error&&!data)return <main className="oa-setup" dir={isAr?"rtl":"ltr"}><div className="oa-success"><AlertTriangle/><h2>{isAr?"تعذر فتح رحلة الإعداد":"Setup could not be opened"}</h2><p>{error}</p><button className="oa-primary" onClick={()=>void load()}>{t.retry}</button></div></main>;
 if(!data)return null;
 const stepLabel=labels[lang][step as keyof typeof labels.ar]||step;
 const readiness=[{label:isAr?"تعليمات الوكيل محفوظة":"Instructions saved",ok:Boolean(agentId)},{label:isAr?"ضوابط التحويل محفوظة":"Handoff guardrails saved",ok:Boolean(agentId)},{label:isAr?"مصدر معرفة جاهز أو سياسة عدم المعرفة محددة":"Knowledge or fallback policy configured",ok:Boolean(agentId)},{label:isAr?"اكتمل اختبار واحد على الأقل":"At least one test completed",ok:data.tests.some(x=>x.agent_id===agentId)},{label:isAr?"Web Chat الداخلي محدد":"Internal Web Chat selected",ok:channel==="webchat"}];
 return <main className="oa-setup" dir={isAr?"rtl":"ltr"} lang={lang}>
  <header className="oa-setup-header"><div><a className="brand" href={isAr?"/":"/en/create-agent"}><span><Sparkles/></span><b>NEXORA AI</b></a><nav><a href={isAr?"/pricing":"/en/pricing"}>{isAr?"الباقات":"Plans"}</a><button type="button" onClick={()=>void saveExit()} disabled={busy}><Save/>{t.save}</button></nav></div></header>
  <div className="oa-progress-mobile"><div><b>{stepLabel}</b><span>{Math.round(progress)}%</span></div><progress max="100" value={progress}/></div>
  <div className="oa-setup-shell"><aside className="oa-progress-panel"><small>{isAr?"إعداد الوكيل":"Agent setup"}</small><h2>{data.workspace.name as string}</h2><p>{isAr?"يُحفظ تقدمك بعد كل خطوة مكتملة.":"Progress is saved after every completed step."}</p><div className="oa-progress-list">{stepIds.map((id,index)=><button key={id} type="button" className={`${id===step?"active":""} ${completed.has(id)||id==="account"?"done":""}`} onClick={()=>{if(completed.has(id)||id==="account"||id===step)setStep(id)}}><i>{completed.has(id)||id==="account"?<Check/>:index+1}</i>{labels[lang][id]}</button>)}</div></aside>
  <section className="oa-workspace">{error&&<div className="oa-alert error"><AlertTriangle/><span>{error} {error.includes("باقة")&&<a href={isAr?"/pricing":"/en/pricing"}>{isAr?"راجع الباقات":"Review plans"}</a>}</span></div>}{notice&&<div className="oa-alert"><ShieldCheck/><span>{notice}</span></div>}
   {step==="account"&&<StepHead no="01" title={isAr?"تم التعرف على حسابك":"Your account is ready"} text={isAr?`أنت مسجل باسم ${data.user.name}. تستخدم NEXORA تسجيل الدخول الآمن الحالي ولا تطلب كلمة مرور إضافية.`:`You are signed in as ${data.user.name}. NEXORA uses the existing secure sign-in and does not request another password.`}/>} 
   {step==="company"&&<><StepHead no="02" title={isAr?"لنجهز مساحة عملك":"Let’s set up your workspace"} text={isAr?"هذه البيانات تساعدنا على اقتراح قالب مناسب، ويمكن تعديلها لاحقًا.":"These details help us recommend a suitable template and can be changed later."}/><form className="oa-step-body" onSubmit={companySubmit}><div className="oa-form-grid"><Field label={isAr?"اسم الشركة":"Company name"}><input required minLength={2} value={company.companyName} onChange={e=>setCompany({...company,companyName:e.target.value})}/></Field><Field label={isAr?"القطاع":"Industry"}><select value={company.industry} onChange={e=>setCompany({...company,industry:e.target.value})}>{data.industries.map(i=><option value={i[0]} key={i[0]}>{i[isAr?1:2]}</option>)}</select></Field><Field label={isAr?"حجم الشركة":"Company size"}><select value={company.companySize} onChange={e=>setCompany({...company,companySize:e.target.value})}>{["1-10","11-50","51-200","201-1000","1000+"].map(x=><option key={x}>{x}</option>)}</select></Field><Field label={isAr?"الدولة":"Country"}><select value={company.country} onChange={e=>setCompany({...company,country:e.target.value})}><option value="SA">Saudi Arabia</option><option value="AE">United Arab Emirates</option><option value="EG">Egypt</option><option value="OTHER">Other</option></select></Field><Field label={isAr?"لغة العمل":"Primary language"}><select value={company.language} onChange={e=>setCompany({...company,language:e.target.value})}><option value="ar">العربية</option><option value="en">English</option></select></Field><Field label={isAr?"المنطقة الزمنية":"Timezone"}><select value={company.timezone} onChange={e=>setCompany({...company,timezone:e.target.value})}><option>Asia/Riyadh</option><option>Asia/Dubai</option><option>Africa/Cairo</option><option>UTC</option></select></Field><Field full label={isAr?"الموقع الإلكتروني — اختياري":"Website — optional"}><input type="url" value={company.website} onChange={e=>setCompany({...company,website:e.target.value})} placeholder="https://example.com"/></Field></div><Footer busy={busy} next={t.next}/></form></>}
   {step==="goal"&&<><StepHead no="03" title={isAr?"ما الذي تريد من وكيلك أن يفعله؟":"What should your agent do?"} text={isAr?"اختر النتيجة الأساسية. سنقترح قالبًا مناسبًا لقطاعك.":"Choose the primary outcome. We’ll recommend a template for your industry."}/><div className="oa-step-body"><div className="oa-choice-grid">{data.goals.map(g=><button type="button" className={`oa-choice ${goal===g[0]?"active":""}`} onClick={()=>{setGoal(g[0]);setTemplateId(null)}} key={g[0]}><strong>{g[isAr?1:2]}</strong><small>{goalDesc(g[0],isAr)}</small></button>)}</div>{templates.length>0&&<div className="oa-templates">{templates.map(x=><button type="button" className={`oa-template ${templateId===x.id?"active":""}`} onClick={()=>setTemplateId(String(x.id))} key={String(x.id)}><span>{isAr?"قالب قابل للتخصيص":"Customisable template"}</span><h3>{String(x[isAr?"name_ar":"name_en"])}</h3><p>{String(x[isAr?"description_ar":"description_en"])}</p></button>)}</div>}<Field full label={isAr?"صف لي الموظف الذي تحتاجه — اختياري":"Describe the employee you need — optional"}><textarea value={description} onChange={e=>setDescription(e.target.value)} placeholder={isAr?"أريد موظف مبيعات يستقبل العملاء ويسجل بياناتهم…":"I need a sales agent that welcomes prospects and captures their details…"}/><small>{isAr?"إن لم تكن خدمة توليد خارجية متصلة، تُبنى المسودة بقواعد القالب المحفوظة ويظهر ذلك بوضوح.":"When no external generation service is connected, the draft is built from saved template rules and labelled clearly."}</small></Field><Footer busy={busy} next={isAr?"إنشاء المسودة":"Build draft"} onBack={()=>setStep("company")} onNext={()=>void goalSubmit()}/></div></>}
   {step==="agent"&&draft&&<><StepHead no="04" title={isAr?"راجع هوية الوكيل وتعليماته":"Review identity and instructions"} text={isAr?"هذه مسودة لم تُنشر. عدّلها ثم اعتمدها لإنشاء الوكيل بحالة Draft.":"This draft is not published. Edit and accept it to create the agent in Draft state."}/><div className="oa-step-body"><div className="oa-generated"><div><WandSparkles/><strong>{isAr?"مسودة مولدة بقواعد القالب":"Draft built from template rules"}</strong></div><p>{isAr?"لا ندّعي اتصال AI إنتاجيًا: تمت مطابقة القطاع والهدف مع قالب قابل للإدارة، ثم حُفظت المسودة لمراجعتك.":"No production AI connection is claimed: industry and goal were matched to an admin-managed template and the draft was saved for your review."}</p></div><div className="oa-form-grid"><Field label={isAr?"اسم الوكيل":"Agent name"}><input value={draft.name} onChange={e=>setDraft({...draft,name:e.target.value})}/></Field><Field label={isAr?"الدور":"Role"}><input value={draft.role} onChange={e=>setDraft({...draft,role:e.target.value})}/></Field><Field label={isAr?"اللغة":"Language"}><select value={draft.language} onChange={e=>setDraft({...draft,language:e.target.value})}><option>العربية</option><option>English</option><option>العربية + English</option></select></Field><Field label={isAr?"النبرة":"Tone"}><select value={draft.tone} onChange={e=>setDraft({...draft,tone:e.target.value})}><option>{isAr?"احترافي وودود":"Professional and friendly"}</option><option>{isAr?"رسمي ومختصر":"Formal and concise"}</option><option>{isAr?"استشاري":"Consultative"}</option></select></Field><Field full label={isAr?"رسالة الترحيب":"Welcome message"}><input value={draft.welcomeMessage} onChange={e=>setDraft({...draft,welcomeMessage:e.target.value})}/></Field><Field full label={isAr?"تعليمات التشغيل":"Operating instructions"}><textarea value={draft.instructions} onChange={e=>setDraft({...draft,instructions:e.target.value})}/></Field><Field label={isAr?"عندما لا يعرف الإجابة":"When the answer is unknown"}><select value={draft.unknownAnswerBehavior} onChange={e=>setDraft({...draft,unknownAnswerBehavior:e.target.value as Draft["unknownAnswerBehavior"]})}><option value="handoff">{isAr?"حوّل إلى موظف":"Hand off to a human"}</option><option value="clarify">{isAr?"اطلب توضيحًا":"Ask for clarification"}</option><option value="unavailable">{isAr?"اذكر أن المعلومة غير متوفرة":"Say it is unavailable"}</option></select></Field><Field label={isAr?"حد الثقة للتحويل":"Handoff confidence threshold"}><input type="range" min="20" max="90" value={draft.confidenceThreshold} onChange={e=>setDraft({...draft,confidenceThreshold:Number(e.target.value)})}/><small>{draft.confidenceThreshold}%</small></Field></div><h3>{isAr?"الإجراءات والصلاحيات":"Actions and permissions"}</h3><div className="oa-actions-grid">{draft.actions.map((a,index)=><div className="oa-action-row" key={a.key}><span><strong>{actionLabel(a.key,isAr)}</strong><small>{a.key==="create_lead"?(isAr?"يتطلب موافقة بشرية افتراضيًا":"Human approval by default"):(isAr?"إجراء داخلي متاح":"Available internal action")}</small></span><select value={a.mode} onChange={e=>setDraft({...draft,actions:draft.actions.map((x,i)=>i===index?{...x,mode:e.target.value as typeof a.mode}:x)})}><option value="automatic">{isAr?"تلقائي":"Automatic"}</option><option value="human_approval">{isAr?"بموافقة":"Approval"}</option><option value="disabled">{isAr?"معطل":"Disabled"}</option></select></div>)}</div><Footer busy={busy} next={isAr?"اعتماد وإنشاء Draft":"Accept and create draft"} onBack={()=>setStep("goal")} onNext={()=>void createAgent()}/></div></>}
   {step==="knowledge"&&<><StepHead no="05" title={isAr?"علّم وكيلك عن شركتك":"Teach your agent about your company"} text={isAr?"النص وFAQ يصبحان جاهزين فورًا. الملفات تُحفظ بأمان وتبقى قيد المعالجة حتى تتوفر الفهرسة.":"Text and FAQs are ready immediately. Files are stored securely and remain pending until indexing is available."}/><div className="oa-step-body"><div className="oa-knowledge-box"><section><h3><BookOpen/> {isAr?"أضف سؤالًا وإجابة":"Add a question and answer"}</h3><form onSubmit={addKnowledge}><Field label={isAr?"السؤال أو العنوان":"Question or title"}><input required value={knowledge.title} onChange={e=>setKnowledge({...knowledge,title:e.target.value})}/></Field><Field label={isAr?"الإجابة المعتمدة":"Approved answer"}><textarea required value={knowledge.content} onChange={e=>setKnowledge({...knowledge,content:e.target.value})}/></Field><button className="oa-primary" disabled={busy||!agentId}><Database/>{isAr?"حفظ وربط بالوكيل":"Save and link to agent"}</button></form></section><section><h3><Upload/> {isAr?"رفع ملف":"Upload a file"}</h3><p>{isAr?"الصيغ المدعومة فعليًا: PDF وDOCX وTXT وCSV وXLSX، حتى 10MB.":"Supported formats: PDF, DOCX, TXT, CSV and XLSX, up to 10MB."}</p><label className="oa-secondary"><Upload/>{isAr?"اختر ملفًا":"Choose a file"}<input hidden type="file" accept=".pdf,.docx,.txt,.csv,.xlsx" onChange={e=>{const f=e.target.files?.[0];if(f)void uploadFile(f)}}/></label><div className="oa-knowledge-list">{data.knowledge.map(k=><div className="oa-knowledge-item" key={String(k.id)}><FileText/><span><strong>{String(k.name)}</strong><small className={k.status==="ready"?"oa-status-ready":"oa-status-pending"}>{k.status==="ready"?(isAr?"جاهز ومعتمد":"Ready and approved"):(isAr?"محفوظ — قيد المعالجة":"Stored — pending processing")}</small></span></div>)}</div></section></div><Footer busy={busy} next={isAr?"انتقل إلى الاختبار":"Continue to testing"} onBack={()=>setStep("agent")} onNext={()=>setStep("test")}/></div></>}
   {step==="test"&&<><StepHead no="06" title={isAr?"اختبر وكيلك قبل التشغيل":"Test your agent before launch"} text={isAr?"الاختبار يعمل على المعرفة النصية المحفوظة وقواعد التحويل. لا يستخدم نموذج AI خارجيًا غير متصل.":"Testing uses saved text knowledge and handoff rules. It does not pretend to call an unconnected external AI model."}/><div className="oa-step-body"><div className="oa-choice-grid">{[["ما الخدمات المتاحة؟","known"],["أريد التحدث مع موظف","human"],["هل لديكم معلومة غير موجودة؟","unknown"]].map(([q,s])=><button type="button" className="oa-choice" key={s} onClick={()=>setTestMessage(isAr?q:s==="human"?"I want to speak to a person":s==="known"?"What services are available?":"Do you have information that is not in the knowledge base?")}><strong>{isAr?q:s}</strong><small>{isAr?"سيناريو جاهز للاختبار":"Ready test scenario"}</small></button>)}</div><div className="oa-chat"><div className="oa-chat-head"><span><Bot/></span><div><strong>{draft?.name || (isAr?"وكيل NEXORA":"NEXORA Agent")}</strong><small>{isAr?"بيئة اختبار داخلية":"Internal test environment"}</small></div></div><div className="oa-messages">{messages.length?messages.map((m,i)=><div className={`oa-message ${m.role}`} key={i}><p>{m.content}</p>{m.debug&&<div className="oa-debug">{m.debug.map(x=><span key={x}>{x}</span>)}</div>}</div>):<div className="oa-message agent">{isAr?"اكتب رسالة أو اختر سيناريو. سأجيب من المعرفة المعتمدة أو أنفذ سياسة عدم المعرفة.":"Write a message or choose a scenario. I will answer from approved knowledge or apply the unknown-answer policy."}</div>}</div><form className="oa-chat-form" onSubmit={testAgent}><input aria-label={isAr?"رسالة الاختبار":"Test message"} value={testMessage} onChange={e=>setTestMessage(e.target.value)} placeholder={isAr?"اكتب رسالة عميل…":"Write a customer message…"}/><button className="oa-primary" disabled={busy||!testMessage.trim()}><Send/></button></form></div><Footer busy={busy} next={isAr?"القنوات والجاهزية":"Channels & readiness"} onBack={()=>setStep("knowledge")} onNext={()=>setStep("channel")}/></div></>}
   {step==="channel"&&<><StepHead no="07" title={isAr?"أين تريد تشغيل وكيلك؟":"Where should your agent run?"} text={isAr?"Web Chat الداخلي متاح للاختبار الفعلي داخل NEXORA. القنوات الخارجية تظهر قريبًا حتى يتم ربط مزودها رسميًا.":"Internal Web Chat is available for real testing inside NEXORA. External channels remain coming soon until an official provider is connected."}/><div className="oa-step-body"><div className="oa-channel-grid">{data.channels.map(c=><button type="button" disabled={!c.available} onClick={()=>setChannel(c.id)} className={`oa-channel ${!c.available?"coming":""} ${channel===c.id?"active":""}`} key={c.id}><MessageCircle/><strong>{channelLabel(c.id)}</strong><small>{c.available?(isAr?"متاح داخليًا":"Available internally"):t.coming}</small></button>)}</div><div className="oa-readiness"><section><h3>{isAr?"جاهزية الوكيل":"Agent readiness"}</h3><div className="oa-checklist">{readiness.map(x=><span className={x.ok?"yes":"no"} key={x.label}>{x.ok?<CheckCircle2/>:<Circle/>}{x.label}</span>)}</div></section><section><h3>{isAr?"حدود التشغيل الحالية":"Current launch scope"}</h3><div className="oa-alert"><LockKeyhole/><span>{isAr?"التشغيل يفعّل الوكيل في بيئة Web Chat الداخلية فقط. لا يتم إنشاء كود Widget أو اتصال WhatsApp وهمي.":"Launch activates the agent only in the internal Web Chat environment. No fake widget code or WhatsApp connection is created."}</span></div>{!data.eligibility.allowed&&<div className="oa-alert error"><AlertTriangle/><span>{isAr?"الباقة الحالية لا تسمح بإنشاء وكيل إضافي. راجع الأسعار أو فعّل الخطة المجانية/التجربة من الإدارة.":"The current plan does not allow another agent. Review pricing or enable the free plan/trial in admin."}</span></div>}</section></div><Footer busy={busy} next={isAr?"تشغيل في بيئة الاختبار":"Launch in test environment"} onBack={()=>setStep("test")} onNext={()=>void launch()}/></div></>}
   {step==="launch"&&<div className="oa-step-body oa-success"><span><CheckCircle2/></span><h2>{isAr?"وكيلك جاهز للعمل داخل بيئة الاختبار":"Your agent is ready in the test environment"}</h2><p>{notice|| (isAr?"يمكنك فتح لوحة الوكيل ومراجعة النشاط والاستخدام وإيقافه مؤقتًا.":"Open the agent dashboard to review activity and usage or pause it.")}</p><div className="oa-summary"><div><small>{isAr?"الوكيل":"Agent"}</small><strong>{draft?.name||String(data.agents.find(a=>a.id===agentId)?.name||"NEXORA Agent")}</strong></div><div><small>{isAr?"الحالة":"Status"}</small><strong>{launched?"Active":"Ready"}</strong></div><div><small>{isAr?"القناة":"Channel"}</small><strong>Web Chat · Internal</strong></div></div><div className="pf-actions"><a className="oa-primary" href="/dashboard"><ExternalLink/>{isAr?"فتح لوحة الوكيل":"Open agent dashboard"}</a><button className="oa-secondary" onClick={()=>setStep("test")}><FlaskConical/>{isAr?"اختبر الوكيل":"Test agent"}</button></div></div>}
  </section></div>
 </main>
}

function StepHead({no,title,text}:{no:string;title:string;text:string}){return <div className="oa-step-head"><span>{no}</span><h1>{title}</h1><p>{text}</p></div>}
function Field({label,children,full=false}:{label:string;children:React.ReactNode;full?:boolean}){return <label className={`oa-field ${full?"full":""}`}><span>{label}</span>{children}</label>}
function Footer({busy,next,onBack,onNext}:{busy:boolean;next:string;onBack?:()=>void;onNext?:()=>void}){return <div className="oa-step-footer">{onBack?<button type="button" className="oa-secondary" onClick={onBack}><ArrowRight/>{" "}</button>:<span/>}<button type={onNext?"button":"submit"} className="oa-primary" disabled={busy} onClick={onNext}>{busy?<Loader2 className="oa-loader"/>:<ArrowLeft/>}{next}</button></div>}
function goalDesc(id:string,ar:boolean){const m:Record<string,[string,string]>={"customer-service":["الرد على الأسئلة والاستفسارات.","Answer questions and enquiries."],sales:["استقبال وتأهيل العملاء المحتملين.","Capture and qualify leads."],bookings:["إدارة طلبات المواعيد والحجوزات.","Manage booking and appointment requests."],"follow-up":["متابعة Leads والعملاء.","Follow up with leads and customers."],reception:["فهم الطلب وتوجيهه.","Understand and route requests."],support:["الإجابة من المعرفة وتصعيد الحالات.","Answer from knowledge and escalate."],internal:["مساعدة الموظفين في الوصول للمعلومات.","Help employees find information."],custom:["حدد الدور والتعليمات بنفسك.","Define the role and instructions yourself."]};return m[id]?.[ar?0:1]||id}
function actionLabel(id:string,ar:boolean){const m:Record<string,[string,string]>={search_knowledge:["البحث في المعرفة","Search knowledge"],human_handoff:["التحويل إلى موظف","Human handoff"],create_lead:["إنشاء Lead","Create lead"],create_ticket:["إنشاء تذكرة","Create ticket"],send_notification:["إشعار داخلي","Internal notification"]};return m[id]?.[ar?0:1]||id}
function channelLabel(id:string){return {webchat:"Web Chat",whatsapp:"WhatsApp",instagram:"Instagram",facebook:"Facebook Messenger",email:"Email",telegram:"Telegram",voice:"Voice"}[id]||id}