// consult.jsx — Level 3 deep module: Smart Legal Consultation.
// Three modes (text · live · avatar) + a live "Case Analysis" rail.
// Live AI via window.claude.complete; all human/recording/avatar bits are
// stubbed with `// TODO: connect to backend`.

const CL = (lang, o) => (o && (o[lang] || o.en)) || "";

const CONSULT_API = {
  createSession: "/api/consultations",
  selectScenario: "/api/consultations/:id/scenario",
  uploadAttachment: "/api/consultations/:id/attachments",
  startText: "/api/consultations/:id/text",
  startVideo: "/api/consultations/:id/video",
  startVoice: "/api/consultations/:id/voice",
  startAvatar: "/api/consultations/:id/avatar",
  startWebinar: "/api/consultations/:id/webinar",
};

function consultBackendEvent(name, payload) {
  if (typeof window === "undefined") return;
  window.dispatchEvent(new CustomEvent("shahdad:consult", {
    detail: { name, payload, endpoints: CONSULT_API }
  }));
}

// ---- Loose JSON parse (the model may wrap or prose-ify) --------------------
function parseLoose(raw) {
  if (!raw) return null;
  try { return JSON.parse(raw); } catch (e) {}
  const m = raw.match(/\{[\s\S]*\}/);
  if (m) { try { return JSON.parse(m[0]); } catch (e) {} }
  return { answer: raw };
}

const LEVELS = [
  { id: "simple", fa: "ساده", ar: "مبسّط", en: "Simple" },
  { id: "pro",    fa: "تخصصی", ar: "تخصصي", en: "Professional" },
  { id: "expert", fa: "حرفه‌ای", ar: "احترافي", en: "Expert" },
];

async function askLegal(question, level, lang) {
  const guide = {
    simple: lang === "fa" ? "به زبان بسیار ساده و همه‌فهم" : "in very simple, plain language",
    pro:    lang === "fa" ? "با دقت حقوقی مناسب یک وکیل" : "with the legal precision a lawyer expects",
    expert: lang === "fa" ? "در سطح تخصصی و عمیق با ظرافت‌های حقوقی" : "at a deep expert level with legal nuance",
  }[level] || "";
  const langName = lang === "fa" ? "Persian" : lang === "ar" ? "Arabic" : "English";
  // TODO: connect to backend — replace this direct model call with the firm's
  // retrieval-augmented legal endpoint (real statutes & precedents).
  const prompt =
    `You are SHAHDAD AI, an expert legal assistant for Iranian law. Answer the user's question ${guide}. ` +
    `Respond ONLY with a JSON object (no markdown fences) with keys: ` +
    `"answer" (string in ${langName}, 2-5 sentences), ` +
    `"topic" (short legal topic label in ${langName}), ` +
    `"facts" (array of 2-4 short extracted facts/assumptions in ${langName}), ` +
    `"riskScore" (integer 0-100), ` +
    `"strategy" (array of 2-4 short recommended steps in ${langName}), ` +
    `"statutes" (array of up to 3 relevant Iranian law articles as short strings in ${langName}), ` +
    `"precedents" (array of up to 2 similar ruling references as short strings in ${langName}). ` +
    `Question: ${question}`;
  const raw = await window.claude.complete(prompt);
  return parseLoose(raw);
}

// ===========================================================================
// Mode 1 — Text consultation (multi-level answers + live citations)
// ===========================================================================
const TextConsult = ({ lang, onAnalysis }) => {
  const intro = lang === "fa"
    ? "سلام. من دستیار حقوقی شهداد هستم. موضوع حقوقی‌تان را بنویسید تا راهنمایی‌تان کنم — پاسخ را می‌توانید در سه سطح ساده، تخصصی یا حرفه‌ای ببینید."
    : "Hi. I'm Shahdad's legal assistant. Describe your legal matter and I'll guide you — you can read each answer at three levels: simple, professional, or expert.";
  const [msgs, setMsgs] = React.useState([{ who: "ai", intro: true, text: intro }]);
  const [input, setInput] = React.useState(() => {
    const p = (typeof window !== "undefined" && window.__pendingAsk) || "";
    if (p) window.__pendingAsk = "";
    return p;
  });
  const [thinking, setThinking] = React.useState(false);
  const [openCite, setOpenCite] = React.useState({});
  const scrollRef = React.useRef(null);

  React.useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [msgs, thinking]);

  const pushAnalysis = (obj) => {
    if (!obj) return;
    onAnalysis({
      topic: obj.topic, facts: obj.facts, riskScore: obj.riskScore, strategy: obj.strategy,
    });
  };

  const send = async () => {
    if (!input.trim() || thinking) return;
    const q = input.trim();
    setInput("");
    setMsgs((m) => [...m, { who: "user", text: q }]);
    setThinking(true);
    AudioCtl.startAiPulse();
    try {
      const obj = await askLegal(q, "pro", lang);
      setMsgs((m) => [...m, { who: "ai", q, level: "pro", cache: { pro: obj } }]);
      pushAnalysis(obj);
      AudioCtl.chime();
    } catch (e) {
      setMsgs((m) => [...m, { who: "ai", text: lang === "fa" ? "خطا در دریافت پاسخ. دوباره تلاش کنید." : "Couldn't fetch a response. Please retry." }]);
    }
    AudioCtl.stopAiPulse();
    setThinking(false);
  };

  const switchLevel = async (idx, level) => {
    const msg = msgs[idx];
    if (!msg || !msg.q) return;
    if (msg.cache && msg.cache[level]) {
      setMsgs((m) => m.map((x, i) => i === idx ? { ...x, level } : x));
      pushAnalysis(msg.cache[level]);
      return;
    }
    setMsgs((m) => m.map((x, i) => i === idx ? { ...x, level, loadingLevel: true } : x));
    try {
      const obj = await askLegal(msg.q, level, lang);
      setMsgs((m) => m.map((x, i) => i === idx ? { ...x, level, loadingLevel: false, cache: { ...x.cache, [level]: obj } } : x));
      pushAnalysis(obj);
    } catch (e) {
      setMsgs((m) => m.map((x, i) => i === idx ? { ...x, loadingLevel: false } : x));
    }
  };

  return (
    <div className="ctext">
      <div className="chat-msgs ctext-msgs" ref={scrollRef}>
        {msgs.map((m, i) => {
          if (m.who === "user") return <div key={i} className="msg user">{m.text}</div>;
          if (m.intro || m.text) return <div key={i} className="msg ai">{m.text}</div>;
          const data = (m.cache && m.cache[m.level]) || {};
          const st = data.statutes || [];
          const pr = data.precedents || [];
          const co = openCite[i] || {};
          return (
            <div key={i} className="msg ai cans">
              <div className="cans-body">{m.loadingLevel ? <div className="typing"><i /><i /><i /></div> : data.answer}</div>
              <div className="cans-levels">
                <span className="cl-label">{lang === "fa" ? "سطح:" : lang === "ar" ? "المستوى:" : "Level:"}</span>
                {LEVELS.map((lv) => (
                  <button key={lv.id} className={"cl-pill" + (m.level === lv.id ? " on" : "")}
                    onClick={() => switchLevel(i, lv.id)}>{CL(lang, lv)}</button>
                ))}
              </div>
              {(st.length > 0 || pr.length > 0) &&
              <div className="cans-cites">
                {st.length > 0 &&
                <div className="cite-block">
                  <button className="cite-head" onClick={() => setOpenCite((o) => ({ ...o, [i]: { ...co, s: !co.s } }))}>
                    <Ic.scale size={13} /> {lang === "fa" ? "مواد قانونی مرتبط" : lang === "ar" ? "المواد القانونية" : "Relevant statutes"}
                    <span className="cite-count">{fmt(st.length, lang)}</span>
                    <Ic.chevL size={12} className={"cite-chev" + (co.s ? " open" : "")} />
                  </button>
                  {co.s && <ul className="cite-list">{st.map((s, k) => <li key={k}><Ic.doc size={12} /> {s}</li>)}</ul>}
                </div>}
                {pr.length > 0 &&
                <div className="cite-block">
                  <button className="cite-head" onClick={() => setOpenCite((o) => ({ ...o, [i]: { ...co, p: !co.p } }))}>
                    <Ic.gavel size={13} /> {lang === "fa" ? "آرای مشابه" : lang === "ar" ? "أحكام مشابهة" : "Similar rulings"}
                    <span className="cite-count">{fmt(pr.length, lang)}</span>
                    <Ic.chevL size={12} className={"cite-chev" + (co.p ? " open" : "")} />
                  </button>
                  {co.p && <ul className="cite-list">{pr.map((s, k) => <li key={k}><Ic.scroll size={12} /> {s}</li>)}</ul>}
                </div>}
              </div>}
            </div>
          );
        })}
        {thinking && <div className="msg ai"><div className="typing"><i /><i /><i /></div></div>}
      </div>
      <div className="chat-input">
        <button className="small" title="Voice"><Ic.micSmall size={16} /></button>
        <button className="small" title="Attach"><Ic.paperclip size={16} /></button>
        <input placeholder={lang === "fa" ? "موضوع حقوقی خود را بنویسید..." : lang === "ar" ? "اكتب موضوعك القانوني..." : "Describe your legal matter..."}
          value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") send(); }} />
        <button onClick={send}><Ic.send size={16} /></button>
      </div>
    </div>
  );
};

// ===========================================================================
// Mode 2 — Live online consultation (booking + sessions)
// ===========================================================================
const LAWYER_TYPES = [
  { id: "human",  iconKey: "user",  fa: "وکیل انسانی", ar: "محامٍ بشري", en: "Human lawyer", note: { fa: "تجربهٔ کامل انسانی", en: "Full human expertise" }, mult: 1 },
  { id: "hybrid", iconKey: "group", fa: "ترکیبی (AI + انسان)", ar: "هجين", en: "Hybrid (AI + human)", note: { fa: "سرعت AI با نظارت وکیل", en: "AI speed, lawyer oversight" }, mult: 0.7 },
  { id: "ai",     iconKey: "bot",   fa: "وکیل AI", ar: "محامي AI", en: "AI lawyer", note: { fa: "فوری و کم‌هزینه", en: "Instant and low-cost" }, mult: 0.25 },
];
const SLOT_DAYS = [
  { fa: "امروز", ar: "اليوم", en: "Today" },
  { fa: "فردا", ar: "غداً", en: "Tomorrow" },
  { fa: "شنبه", ar: "السبت", en: "Sat" },
  { fa: "یک‌شنبه", ar: "الأحد", en: "Sun" },
];
const SLOT_TIMES = ["09:00", "10:30", "14:00", "16:30", "18:00"];

const LiveConsult = ({ lang }) => {
  const [type, setType] = React.useState("human");
  const [lawyer, setLawyer] = React.useState(0);
  const [day, setDay] = React.useState(0);
  const [time, setTime] = React.useState("10:30");
  const [booked, setBooked] = React.useState(false);
  const [openSum, setOpenSum] = React.useState({});
  const dg = (n) => lang === "fa" ? toFa(n) : lang === "ar" ? toAr(n) : String(n);

  const tObj = LAWYER_TYPES.find((t) => t.id === type);
  const baseHr = type === "ai" ? 120 : LAWYERS[lawyer].hr;
  const price = Math.round(baseHr * tObj.mult);

  const book = () => {
    // TODO: connect to backend — create the booking, payment intent & calendar hold.
    AudioCtl.chime();
    setBooked(true);
    setTimeout(() => setBooked(false), 4000);
  };

  return (
    <div className="clive">
      <div className="clive-book">
        <div className="cl-step-label">{lang === "fa" ? "۱ · نوع مشاوره" : lang === "ar" ? "١ · نوع الاستشارة" : "1 · Consultation type"}</div>
        <div className="ltype-row">
          {LAWYER_TYPES.map((t) => {
            const TI = Ic[t.iconKey] || Ic.user;
            return (
              <button key={t.id} className={"ltype" + (type === t.id ? " on" : "")} onClick={() => { AudioCtl.click(); setType(t.id); }}>
                <div className="lt-ico"><TI size={18} /></div>
                <div className="lt-name">{CL(lang, t)}</div>
                <div className="lt-note">{CL(lang, t.note)}</div>
              </button>
            );
          })}
        </div>

        {type !== "ai" &&
        <React.Fragment>
          <div className="cl-step-label">{lang === "fa" ? "۲ · انتخاب وکیل" : lang === "ar" ? "٢ · اختر المحامي" : "2 · Choose a lawyer"}</div>
          <div className="lpick-row">
            {LAWYERS.map((p, i) => (
              <button key={i} className={"lpick" + (lawyer === i ? " on" : "")} onClick={() => { AudioCtl.click(); setLawyer(i); }}>
                <div className="av">{p.init}</div>
                <div className="lp-meta">
                  <div className="lp-name">{p.name[lang] || p.name.en} {p.verified && <Ic.shieldCheck size={12} className="verified" />}</div>
                  <div className="lp-sp">{p.sp[lang] || p.sp.en}</div>
                </div>
                <div className="lp-rate"><Ic.star size={11} color="#C9A96E" /> {fmt(p.rate, lang)}</div>
              </button>
            ))}
          </div>
        </React.Fragment>}

        <div className="cl-step-label">{lang === "fa" ? "۳ · زمان جلسه" : lang === "ar" ? "٣ · وقت الجلسة" : "3 · Pick a time"}</div>
        <div className="slot-days">
          {SLOT_DAYS.map((d, i) => (
            <button key={i} className={"slot" + (day === i ? " on" : "")} onClick={() => { AudioCtl.click(); setDay(i); }}>{CL(lang, d)}</button>
          ))}
        </div>
        <div className="slot-times">
          {SLOT_TIMES.map((tm) => (
            <button key={tm} className={"slot fa-num" + (time === tm ? " on" : "")} onClick={() => { AudioCtl.click(); setTime(tm); }}>{dg(tm)}</button>
          ))}
        </div>

        <div className="book-bar">
          <div className="book-price">
            <span className="bp-l">{lang === "fa" ? "هزینهٔ جلسه" : lang === "ar" ? "تكلفة الجلسة" : "Session fee"}</span>
            <span className="bp-n fa-num">{fmt(price, lang)}K <small>{lang === "fa" ? "تومان" : "IRR"}</small></span>
          </div>
          <button className="btn primary" onClick={book}><Ic.cal size={14} /> {lang === "fa" ? "رزرو جلسه" : lang === "ar" ? "احجز الجلسة" : "Book session"}</button>
        </div>
        {booked &&
        <div className="book-ok"><Ic.shieldCheck size={14} /> {lang === "fa" ? "جلسه با موفقیت رزرو شد. جزئیات برایتان ارسال می‌شود." : lang === "ar" ? "تم الحجز بنجاح." : "Session booked. Details are on the way."}</div>}
      </div>

      <div className="clive-sessions">
        <div className="cl-step-label">{lang === "fa" ? "جلسات من" : lang === "ar" ? "جلساتي" : "My sessions"}</div>
        {CONSULTS.map((c, i) => {
          const kindIc = c.kind === "video" ? "mic" : c.kind === "voice" ? "micSmall" : "chat";
          const KI = Ic[kindIc] || Ic.chat;
          const st = STATUS_PILL[c.status];
          const rec = c.kind !== "chat";
          return (
            <div key={i} className="sess-card">
              <div className="sess-top">
                <div className="sess-ico"><KI size={15} /></div>
                <div className="sess-meta">
                  <div className="sess-line"><b>{c.lawyer[lang] || c.lawyer.en}</b> · {c.topic[lang] || c.topic.en}</div>
                  <div className="sess-sub fa-num">{c.when[lang] || c.when.en} · {fmt(c.dur, lang)} {lang === "fa" ? "دقیقه" : "min"}</div>
                </div>
                <span className={"pill " + st.kind}>{st[lang] || st.en}</span>
              </div>
              <div className="sess-actions">
                {rec && <span className="rec-badge"><i></i> {lang === "fa" ? "ضبط موجود" : lang === "ar" ? "تسجيل متاح" : "Recording"}</span>}
                <button className="cl-link" onClick={() => setOpenSum((o) => ({ ...o, [i]: !o[i] }))}>
                  <Ic.bot size={12} /> {lang === "fa" ? "خلاصهٔ AI جلسه" : lang === "ar" ? "ملخص AI" : "AI summary"}
                  <Ic.chevL size={11} className={"cite-chev" + (openSum[i] ? " open" : "")} />
                </button>
              </div>
              {openSum[i] &&
              <div className="sess-summary">
                {/* TODO: connect to backend — real transcript-derived summary */}
                {lang === "fa"
                  ? "خلاصهٔ خودکار: موضوع بررسی شد، مدارک لازم تعیین و گام‌های بعدی مشخص شد. توصیه‌ها در پروندهٔ شما ذخیره شده‌اند."
                  : "Auto-summary: the matter was reviewed, required documents identified, and next steps agreed. Recommendations saved to your case."}
              </div>}
            </div>
          );
        })}
      </div>
    </div>
  );
};

// ===========================================================================
// Mode 3 — Avatar consultation (interactive virtual lawyer)
// ===========================================================================
const AvatarConsult = ({ lang }) => {
  const [state, setState] = React.useState("idle"); // idle | listening | speaking
  const [input, setInput] = React.useState("");
  const [lines, setLines] = React.useState([
    { who: "ai", text: lang === "fa" ? "سلام، من وکیل مجازی شهداد هستم. سوال‌تان را بپرسید." : "Hello, I'm Shahdad's virtual lawyer. Ask your question." },
  ]);
  const scrollRef = React.useRef(null);
  React.useEffect(() => { if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight; }, [lines, state]);

  const ask = async () => {
    if (!input.trim() || state === "speaking") return;
    const q = input.trim();
    setInput("");
    setLines((l) => [...l, { who: "user", text: q }]);
    setState("speaking");
    AudioCtl.startAiPulse();
    try {
      // TODO: connect to backend — stream voice + avatar animation; this is the text fallback.
      const reply = await window.claude.complete(
        `You are SHAHDAD AI's virtual lawyer for Iranian law. Reply in ${lang === "fa" ? "Persian" : "English"}, warm and concise, 2 sentences. User: ${q}`);
      setLines((l) => [...l, { who: "ai", text: reply || (lang === "fa" ? "اتصال محدود است." : "Connection limited.") }]);
      AudioCtl.chime();
    } catch (e) {
      setLines((l) => [...l, { who: "ai", text: lang === "fa" ? "خطا در پاسخ." : "Error." }]);
    }
    AudioCtl.stopAiPulse();
    setState("idle");
  };

  const stateLabel = state === "speaking"
    ? (lang === "fa" ? "در حال صحبت…" : lang === "ar" ? "يتحدث…" : "Speaking…")
    : state === "listening"
    ? (lang === "fa" ? "در حال شنیدن…" : lang === "ar" ? "يستمع…" : "Listening…")
    : (lang === "fa" ? "آماده" : lang === "ar" ? "جاهز" : "Ready");

  return (
    <div className="cavatar">
      <div className={"av-stage st-" + state}>
        <div className="av-rings"><i></i><i></i><i></i></div>
        <div className="av-portrait" role="img" aria-label="virtual lawyer portrait placeholder">
          <Ic.user size={64} />
          <span className="av-ph-tag">AVATAR · پرترهٔ وکیل مجازی</span>
        </div>
        {state === "speaking" && <div className="av-wave"><i></i><i></i><i></i><i></i><i></i></div>}
        <div className="av-name">{lang === "fa" ? "وکیل مجازی شهداد" : lang === "ar" ? "محامي شهداد الافتراضي" : "Shahdad Virtual Lawyer"}</div>
        <div className={"av-state"}>{stateLabel}</div>
      </div>

      <div className="av-side">
        <div className="cl-step-label">{lang === "fa" ? "ترنسکریپت" : lang === "ar" ? "النص" : "Transcript"}</div>
        <div className="av-transcript" ref={scrollRef}>
          {lines.map((l, i) => (
            <div key={i} className={"av-line " + l.who}>
              <span className="av-who">{l.who === "ai" ? (lang === "fa" ? "وکیل" : "Lawyer") : (lang === "fa" ? "شما" : "You")}</span>
              <span className="av-text">{l.text}</span>
            </div>
          ))}
        </div>
        <div className="av-controls">
          <button className={"av-mic" + (state === "listening" ? " on" : "")}
            onClick={() => { AudioCtl.click(); setState((s) => s === "listening" ? "idle" : "listening"); }}
            title="Microphone"><Ic.micSmall size={18} /></button>
          <input placeholder={lang === "fa" ? "یا تایپ کنید…" : lang === "ar" ? "أو اكتب…" : "Or type…"}
            value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") ask(); }} />
          <button className="av-send" onClick={ask}><Ic.send size={16} /></button>
        </div>
      </div>
    </div>
  );
};

// ===========================================================================
// Case Analysis rail (shared) — the 5 sub-modules, fed live by the AI
// ===========================================================================
const CaseRail = ({ lang, analysis }) => {
  const dg = (n) => lang === "fa" ? toFa(n) : lang === "ar" ? toAr(n) : String(n);
  const rs = analysis && typeof analysis.riskScore === "number" ? Math.max(0, Math.min(100, analysis.riskScore)) : null;
  const rcol = rs == null ? "" : rs > 66 ? "danger" : rs > 33 ? "warn" : "ok";
  return (
    <div className="case-rail">
      <div className="cr-head"><Ic.chip size={14} /> {lang === "fa" ? "تحلیل پرونده" : lang === "ar" ? "تحليل القضية" : "Case analysis"} <span className="cr-ai">AI</span></div>
      {!analysis &&
      <div className="cr-empty">{lang === "fa" ? "با شروع گفتگو، تحلیل پرونده اینجا ظاهر می‌شود — موضوع، اطلاعات، ریسک و استراتژی." : lang === "ar" ? "ابدأ المحادثة لرؤية التحليل هنا." : "Start the conversation to see topic, facts, risk and strategy here."}</div>}
      {analysis &&
      <React.Fragment>
        {analysis.topic &&
        <div className="cr-sec">
          <div className="cr-label">{lang === "fa" ? "موضوع حقوقی" : lang === "ar" ? "الموضوع" : "Legal topic"}</div>
          <span className="cr-topic"><Ic.scale size={12} /> {analysis.topic}</span>
        </div>}
        {analysis.facts && analysis.facts.length > 0 &&
        <div className="cr-sec">
          <div className="cr-label">{lang === "fa" ? "اطلاعات استخراج‌شده" : lang === "ar" ? "المعلومات المستخرجة" : "Extracted facts"}</div>
          <ul className="cr-facts">{analysis.facts.map((f, i) => <li key={i}><Ic.chevL size={11} /> {f}</li>)}</ul>
        </div>}
        {rs != null &&
        <div className="cr-sec">
          <div className="cr-label">{lang === "fa" ? "نمرهٔ ریسک" : lang === "ar" ? "درجة الخطر" : "Risk score"}</div>
          <div className="cr-risk">
            <div className="cr-bar"><div className={"cr-bar-fill " + rcol} style={{ width: rs + "%" }}></div></div>
            <span className={"pill " + (rcol === "danger" ? "danger" : rcol === "warn" ? "warn" : "ok")}>{fmt(rs, lang)}</span>
          </div>
        </div>}
        {analysis.strategy && analysis.strategy.length > 0 &&
        <div className="cr-sec">
          <div className="cr-label">{lang === "fa" ? "استراتژی پیشنهادی" : lang === "ar" ? "الاستراتيجية" : "Suggested strategy"}</div>
          <ol className="cr-strat">{analysis.strategy.map((s, i) => <li key={i}><span className="cr-step fa-num">{dg(i + 1)}</span> {s}</li>)}</ol>
        </div>}
        <div className="cr-sec">
          <div className="cr-label">{lang === "fa" ? "اسناد مرتبط" : lang === "ar" ? "مستندات" : "Related documents"}</div>
          <div className="cr-docs">
            {/* TODO: connect to backend — surface real matched documents */}
            <button className="cr-doc"><Ic.doc size={12} /> {lang === "fa" ? "نمونهٔ دادخواست مرتبط" : "Relevant petition template"}</button>
            <button className="cr-doc"><Ic.scroll size={12} /> {lang === "fa" ? "خلاصهٔ مواد قانونی" : "Statute brief"}</button>
          </div>
        </div>
      </React.Fragment>}
    </div>
  );
};

// ===========================================================================
const MODES = [
  { id: "text",   iconKey: "chat", fa: "متنی", ar: "نصي", en: "Text" },
  { id: "live",   iconKey: "cal",  fa: "آنلاین زنده", ar: "مباشر", en: "Live online" },
  { id: "avatar", iconKey: "bot",  fa: "آواتاری", ar: "أفاتار", en: "Avatar" },
];

const CONSULT_ENTRY_CARDS = [
  {
    id: "text",
    iconKey: "chat",
    fa: "مشاوره متنی",
    ar: "استشارة نصية",
    en: "Text consultation",
    desc: { fa: "پرسش و پاسخ امن و مستند با دستیار حقوقی", ar: "أسئلة وأجوبة قانونية موثقة", en: "Secure documented Q&A with the legal assistant" },
    endpoint: "startText"
  },
  {
    id: "video",
    iconKey: "mic",
    fa: "مشاوره تصویری",
    ar: "استشارة مرئية",
    en: "Video consultation",
    desc: { fa: "جلسه تصویری با وکیل یا کارشناس حقوقی", ar: "جلسة مرئية مع محام أو خبير", en: "Video session with a lawyer or expert" },
    endpoint: "startVideo"
  },
  {
    id: "voice",
    iconKey: "micSmall",
    fa: "مشاوره صوتی",
    ar: "استشارة صوتية",
    en: "Voice consultation",
    desc: { fa: "گفت‌وگوی صوتی سبک، سریع و قابل ضبط", ar: "مكالمة صوتية سريعة وقابلة للتسجيل", en: "Fast voice session with recording support" },
    endpoint: "startVoice"
  },
  {
    id: "avatar",
    iconKey: "bot",
    fa: "مشاوره آواتار",
    ar: "استشارة أفاتار",
    en: "Avatar consultation",
    desc: { fa: "وکیل مجازی با تعامل گفتاری و متنی", ar: "محام افتراضي بتفاعل صوتي ونصي", en: "Virtual lawyer with voice and text interaction" },
    endpoint: "startAvatar"
  },
  {
    id: "webinar",
    iconKey: "cap",
    fa: "مشاوره وبینار",
    ar: "استشارة ويبينار",
    en: "Webinar consultation",
    desc: { fa: "جلسات گروهی، آموزشی و پرسش و پاسخ تخصصی", ar: "جلسات جماعية وتعليمية متخصصة", en: "Group learning sessions and expert Q&A" },
    endpoint: "startWebinar"
  },
];

const ConsultEntryScene = ({ lang, onSelect, selectedType }) => {
  return (
    <div className="consult-entry" data-consult-api-ready="true">
      <div className="consult-entry-hero">
        <h3>{lang === "fa" ? "به سامانه مشاوره حقوقی خوش آمدید" : lang === "ar" ? "مرحباً بك في نظام الاستشارة القانونية" : "Welcome to legal consultation"}</h3>
        <p>{lang === "fa" ? "نوع مشاوره را انتخاب کنید تا مسیر مناسب برای پرونده، پرسش یا جلسه شما آماده شود." : lang === "ar" ? "اختر نوع الاستشارة حتى نجهز المسار المناسب لقضيتك أو سؤالك." : "Choose the consultation path so Shahdad can prepare the right flow for your matter."}</p>
      </div>

      <div className="consult-entry-grid">
        {CONSULT_ENTRY_CARDS.map((card) => {
          const Icon = Ic[card.iconKey] || Ic.chat;
          const selected = selectedType === card.id;
          return (
            <button
              key={card.id}
              className={"consult-entry-card" + (selected ? " selected" : "")}
              data-consult-type={card.id}
              data-api-endpoint={CONSULT_API[card.endpoint]}
              onClick={() => onSelect(card)}
            >
              <span className="cec-icon"><Icon size={25} /></span>
              <span className="cec-title">{CL(lang, card)}</span>
              <span className="cec-desc">{CL(lang, card.desc)}</span>
              <span className="cec-cta">{selected ? (lang === "fa" ? "انتخاب شد" : lang === "ar" ? "تم الاختيار" : "Selected") : (lang === "fa" ? "انتخاب" : lang === "ar" ? "اختيار" : "Select")}</span>
            </button>
          );
        })}
      </div>

    </div>
  );
};

const ConsultTextScene = ({ lang, onBack }) => {
  const [draft, setDraft] = React.useState("");
  const [messages, setMessages] = React.useState([]);
  const sceneAction = (action, payload = {}) => {
    consultBackendEvent("consult.text.action", { endpoint: CONSULT_API.startText, action, ...payload });
  };

  const sendText = () => {
    const text = draft.trim();
    if (!text) return;
    setDraft("");
    setMessages((items) => [
      ...items,
      { who: "user", text }
    ]);
    consultBackendEvent("consult.text.message", {
      endpoint: CONSULT_API.startText,
      body: { message: text }
    });
  };

  const caseRows = [
    { label: "پرونده", value: "در انتظار ایجاد" },
    { label: "وضعیت", value: "آماده شروع" },
    { label: "اتصال", value: "مدل شهداد" },
    { label: "شناسه", value: "پس از ثبت" },
  ];
  const tools = [
    { iconKey: "search", title: "جستجوی قوانین", desc: "مواد مرتبط با موضوع" },
    { iconKey: "doc", title: "نمونه قراردادها", desc: "الگوهای قابل استفاده" },
    { iconKey: "scale", title: "تحلیل ریسک", desc: "ریسک و مسیر اقدام" },
    { iconKey: "paperclip", title: "ضمیمه پرونده", desc: "فایل و مستندات" },
  ];

  return (
    <div className="consult-text-scene" data-consult-scene="text" data-api-endpoint={CONSULT_API.startText}>
      <aside className="ct-panel ct-case">
        <button className="ct-back" onClick={onBack}><Ic.chevR size={14} /> بازگشت</button>
        <div className="ct-panel-title">اطلاعات پرونده</div>
        <div className="ct-case-list">
          {caseRows.map((row) => (
            <div className="ct-case-row" key={row.label}>
              <span>{row.label}</span>
              <b>{row.value}</b>
            </div>
          ))}
        </div>
        <button className="ct-case-action" onClick={() => sceneAction("case.details")}>جزئیات پرونده</button>
        <div className="ct-doc-box">
          <span>اسناد ضمیمه شده</span>
          <button onClick={() => sceneAction("attachment.add")}><Ic.paperclip size={13} /> افزودن سند</button>
        </div>
      </aside>

      <main className="ct-chat-card">
        <div className="ct-chat-head">
          <div>
            <h3>مشاوره متنی شهداد</h3>
            <span>گفت وگوی امن روی مدل حقوقی شهداد</span>
          </div>
          <span className="ct-status"><i /> آماده اتصال</span>
        </div>
        <div className="ct-message-list">
          {messages.length === 0 &&
          <div className="ct-empty">
            <Ic.chat size={26} />
            <b>گفتگو هنوز شروع نشده</b>
            <span>پس از ارسال پیام، متن به سرویس مشاوره متنی بک‌اند ارسال می‌شود.</span>
          </div>}
          {messages.map((msg, index) => (
            <div key={index} className={"ct-bubble " + msg.who}>{msg.text}</div>
          ))}
        </div>
        <div className="ct-inputbar">
          <button title="ضمیمه"><Ic.paperclip size={17} /></button>
          <input
            value={draft}
            onChange={(e) => setDraft(e.target.value)}
            onKeyDown={(e) => { if (e.key === "Enter") sendText(); }}
            placeholder="سوال یا توضیح پرونده را بنویسید..."
          />
          <button className="ct-send" onClick={sendText} title="ارسال"><Ic.send size={17} /></button>
        </div>
      </main>

      <aside className="ct-panel ct-tools">
        <div className="ct-panel-title">ابزارهای کمکی</div>
        <div className="ct-tool-list">
          {tools.map((tool) => {
            const ToolIcon = Ic[tool.iconKey] || Ic.doc;
            return (
              <button key={tool.title} className="ct-tool" data-tool={tool.title} onClick={() => sceneAction("tool.open", { tool: tool.title })}>
                <span><ToolIcon size={15} /></span>
                <b>{tool.title}</b>
                <small>{tool.desc}</small>
                <Ic.chevL size={12} />
              </button>
            );
          })}
        </div>
        <button className="ct-specialist" onClick={() => sceneAction("lawyer.connect")}>اتصال به وکیل</button>
      </aside>
    </div>
  );
};

const ConsultVideoScene = ({ lang, onBack }) => {
  const [muted, setMuted] = React.useState(false);
  const [cameraOn, setCameraOn] = React.useState(true);
  const [chatOpen, setChatOpen] = React.useState(true);
  const sessionRows = [
    { label: "موضوع", value: "در انتظار پرونده" },
    { label: "وکیل", value: "پس از اتصال" },
    { label: "زمان شروع", value: "پس از رزرو" },
    { label: "وضعیت", value: "آماده ورود" },
  ];
  const chat = [];

  const toggle = (name, value) => {
    consultBackendEvent("consult.video.control", {
      endpoint: CONSULT_API.startVideo,
      control: name,
      value
    });
  };

  return (
    <div className="consult-video-scene" data-consult-scene="video" data-api-endpoint={CONSULT_API.startVideo}>
      <aside className="cv-panel cv-session">
        <button className="ct-back" onClick={onBack}><Ic.chevR size={14} /> بازگشت</button>
        <div className="ct-panel-title">اطلاعات جلسه</div>
        <div className="cv-session-list">
          {sessionRows.map((row) => (
            <div className="ct-case-row" key={row.label}>
              <span>{row.label}</span>
              <b>{row.value}</b>
            </div>
          ))}
        </div>
        <button className="cv-end" onClick={() => toggle("end", true)}>پایان جلسه</button>
        <div className="cv-note">
          <b>یادداشت های جلسه</b>
          <span>بعد از اتصال وکیل، یادداشت‌ها و فایل‌های جلسه از بک‌اند نمایش داده می‌شوند.</span>
        </div>
        <button className="ct-case-action" onClick={() => toggle("notes.save", true)}>ذخیره یادداشت</button>
      </aside>

      <main className="cv-stage">
        <div className="cv-video-frame">
          <div className="cv-live-badge">زنده</div>
          <div className="cv-lawyer">
            <div className="cv-lawyer-bg" />
            <div className="cv-lawyer-avatar">
              <Ic.user size={76} />
            </div>
            <div className="cv-nameplate">
              <b>وکیل جلسه</b>
              <span>پس از اتصال نمایش داده می‌شود</span>
            </div>
          </div>
          <div className="cv-self-preview">
            <Ic.user size={28} />
            <span>شما</span>
          </div>
        </div>

        <div className="cv-controls">
          <button
            className={muted ? "off" : ""}
            onClick={() => { const next = !muted; setMuted(next); toggle("microphone", !next); }}
            title={muted ? "میکروفن خاموش" : "میکروفن روشن"}
            data-tip={muted ? "روشن کردن میکروفن" : "بی‌صدا کردن"}
          >
            <Ic.micSmall size={18} />
          </button>
          <button
            className={cameraOn ? "" : "off"}
            onClick={() => { const next = !cameraOn; setCameraOn(next); toggle("camera", next); }}
            title={cameraOn ? "دوربین روشن" : "دوربین خاموش"}
            data-tip={cameraOn ? "خاموش کردن دوربین" : "روشن کردن دوربین"}
          >
            <Ic.video size={18} />
          </button>
          <button title="اشتراک سند" data-tip="اشتراک سند" onClick={() => toggle("document.share", true)}><Ic.paperclip size={18} /></button>
          <button title="افراد حاضر" data-tip="افراد حاضر" onClick={() => toggle("participants.open", true)}><Ic.group size={18} /></button>
          <button className="danger" title="پایان تماس" data-tip="پایان تماس" onClick={() => toggle("end", true)}><Ic.phone size={18} /></button>
        </div>
      </main>

      {chatOpen &&
      <aside className="cv-panel cv-chat">
        <div className="cv-chat-head">
          <div className="ct-panel-title">چت جلسه</div>
          <button onClick={() => setChatOpen(false)}><Ic.close size={14} /></button>
        </div>
        <div className="cv-chat-list">
          {chat.length === 0 && <div className="cv-empty">چت جلسه پس از اتصال نمایش داده می‌شود.</div>}
          {chat.map((item, index) => (
            <div key={index} className={"cv-msg " + item.who}>
              <span>{item.who === "user" ? "شما" : "وکیل"}</span>
              {item.text}
            </div>
          ))}
        </div>
        <div className="cv-chat-input">
          <input placeholder="پیام کوتاه..." />
          <button><Ic.send size={15} /></button>
        </div>
      </aside>}
    </div>
  );
};

const ConsultVoiceScene = ({ lang, onBack }) => {
  const [muted, setMuted] = React.useState(false);
  const [memo, setMemo] = React.useState("");
  const notes = [
    "موضوع تماس: پس از ثبت پرونده",
    "مدت جلسه: پس از اتصال",
    "ضبط جلسه: آماده فعال‌سازی",
    "خلاصه AI: پس از پایان تماس",
  ];
  return (
    <div className="consult-voice-scene" data-consult-scene="voice" data-api-endpoint={CONSULT_API.startVoice}>
      <aside className="cv-panel">
        <button className="ct-back" onClick={onBack}><Ic.chevR size={14} /> بازگشت</button>
        <div className="ct-panel-title">اطلاعات تماس</div>
        <div className="cv-session-list">
          {notes.map((item) => <div className="voice-note" key={item}>{item}</div>)}
        </div>
        <button className="cv-end">پایان تماس</button>
      </aside>

      <main className="voice-stage">
        <div className="voice-orbit">
          <div className="voice-avatar"><Ic.user size={54} /></div>
          <div className="voice-wave"><i /><i /><i /><i /><i /><i /><i /></div>
          <h3>وکیل صوتی</h3>
          <span>مشاوره صوتی فعال</span>
          <strong>۱۵:۲۴</strong>
        </div>
        <div className="voice-controls">
          <button
            className={muted ? "off" : ""}
            data-tip={muted ? "روشن کردن میکروفن" : "بی‌صدا کردن"}
            onClick={() => {
              const next = !muted;
              setMuted(next);
              consultBackendEvent("consult.voice.control", { endpoint: CONSULT_API.startVoice, control: "microphone", value: !next });
            }}
          ><Ic.micSmall size={19} /></button>
          <button data-tip="ضبط جلسه" onClick={() => consultBackendEvent("consult.voice.control", { endpoint: CONSULT_API.startVoice, control: "record" })}><Ic.doc size={19} /></button>
          <button data-tip="بلندگو"><Ic.speaker size={19} /></button>
          <button className="danger" data-tip="پایان تماس"><Ic.phone size={19} /></button>
        </div>
      </main>

      <aside className="cv-panel">
        <div className="ct-panel-title">یادداشت شخصی</div>
        <textarea className="voice-memo-input" value={memo} onChange={(e) => setMemo(e.target.value)} placeholder="یادداشت تماس را بنویسید..." />
        <button className="ct-case-action" onClick={() => consultBackendEvent("consult.voice.memo", { endpoint: CONSULT_API.startVoice, memo })}>ذخیره یادداشت</button>
        <div className="voice-record"><i /> ضبط در حال انجام</div>
      </aside>
    </div>
  );
};

const ConsultAvatarScene = ({ lang, onBack }) => {
  const [tone, setTone] = React.useState("رسمی");
  const [depth, setDepth] = React.useState("متوسط");
  const transcript = [];
  return (
    <div className="consult-avatar-scene" data-consult-scene="avatar" data-api-endpoint={CONSULT_API.startAvatar}>
      <aside className="cv-panel">
        <button className="ct-back" onClick={onBack}><Ic.chevR size={14} /> بازگشت</button>
        <div className="ct-panel-title">تنظیمات آواتار</div>
        <div className="avatar-control">
          <span>لحن پاسخ</span>
          <div>{["رسمی", "ساده", "فنی"].map((x) => <button key={x} className={tone === x ? "on" : ""} onClick={() => setTone(x)}>{x}</button>)}</div>
        </div>
        <div className="avatar-control">
          <span>سطح توضیح</span>
          <div>{["کوتاه", "متوسط", "کامل"].map((x) => <button key={x} className={depth === x ? "on" : ""} onClick={() => setDepth(x)}>{x}</button>)}</div>
        </div>
        <label className="avatar-setting"><span>زبان</span><b>فارسی</b></label>
        <button className="ct-case-action">پذیرش تنظیمات</button>
      </aside>

      <main className="avatar-stage">
        <div className="avatar-figure">
          <span className="avatar-halo" />
          <span className="avatar-ring r1" />
          <span className="avatar-ring r2" />
          <div className="avatar-face"><Ic.bot size={64} /></div>
          <div className="avatar-suit" />
          <div className="avatar-caption">
            <h3>وکیل مجازی شهداد</h3>
            <span>در حال گوش دادن</span>
          </div>
        </div>
        <div className="avatar-input">
          <input placeholder="سوال خود را بپرسید..." />
          <button><Ic.micSmall size={18} /></button>
          <button><Ic.send size={18} /></button>
        </div>
      </main>

      <aside className="cv-panel">
        <div className="ct-panel-title">رونوشت گفتگو</div>
        <div className="avatar-transcript">
          {transcript.length === 0 && <div className="cv-empty">رونوشت گفتگو پس از شروع آواتار نمایش داده می‌شود.</div>}
          {transcript.map((line, index) => (
            <div key={index} className={"avatar-line " + line.who}>
              <span>{line.who === "user" ? "شما" : "آواتار"}</span>
              {line.text}
            </div>
          ))}
        </div>
      </aside>
    </div>
  );
};

const ConsultWebinarScene = ({ lang, onBack }) => {
  const attendees = [];
  return (
    <div className="consult-webinar-scene" data-consult-scene="webinar" data-api-endpoint={CONSULT_API.startWebinar}>
      <aside className="cv-panel">
        <button className="ct-back" onClick={onBack}><Ic.chevR size={14} /> بازگشت</button>
        <div className="ct-panel-title">اطلاعات وبینار</div>
        <div className="ct-case-row"><span>عنوان</span><b>از بک‌اند</b></div>
        <div className="ct-case-row"><span>مدرس</span><b>پس از اتصال</b></div>
        <div className="ct-case-row"><span>حاضرین</span><b>در انتظار</b></div>
        <button className="ct-case-action">دانلود منابع</button>
      </aside>

      <main className="webinar-stage">
        <div className="webinar-slide">
          <div className="webinar-empty-slide">
            <Ic.cap size={68} />
            <h3>اسلاید وبینار آماده دریافت است</h3>
            <span>محتوای ارائه از بک‌اند بارگذاری می‌شود.</span>
          </div>
        </div>
        <div className="webinar-controls">
          <button data-tip="میکروفن"><Ic.micSmall size={18} /></button>
          <button data-tip="گفتگوی وبینار"><Ic.chat size={18} /></button>
          <button data-tip="حاضرین"><Ic.group size={18} /></button>
          <button data-tip="تنظیمات"><Ic.settings size={18} /></button>
          <button className="danger" data-tip="خروج از وبینار">خروج از وبینار</button>
        </div>
      </main>

      <aside className="cv-panel">
        <div className="ct-panel-title">حاضرین و پرسش ها</div>
        <div className="webinar-attendees">
          {attendees.length === 0 && <div className="cv-empty">فهرست حاضرین پس از اتصال نمایش داده می‌شود.</div>}
          {attendees.map((name) => <span key={name}><Ic.user size={13} /> {name}</span>)}
        </div>
        <div className="webinar-question">
          <b>پرسش فعال</b>
          <p>در انتظار پرسش‌های کاربران.</p>
        </div>
        <button className="ct-case-action">ارسال سوال</button>
      </aside>
    </div>
  );
};

const ConsultDeepView = ({ lang }) => {
  const [scene, setScene] = React.useState("entry");
  const [selectedType, setSelectedType] = React.useState(null);
  const [mode, setMode] = React.useState("text");
  const [analysis, setAnalysis] = React.useState(null);
  const selectEntry = (card) => {
    setSelectedType(card.id);
    consultBackendEvent("consult.type.selected", {
      type: card.id,
      endpoint: CONSULT_API[card.endpoint],
      nextScene: card.id
    });
    if (card.id === "text") {
      consultBackendEvent("consult.scene.opened", {
        scene: "text",
        endpoint: CONSULT_API.startText
      });
      setScene("text");
    }
    if (card.id === "video") {
      consultBackendEvent("consult.scene.opened", {
        scene: "video",
        endpoint: CONSULT_API.startVideo
      });
      setScene("video");
    }
    if (card.id === "voice") {
      consultBackendEvent("consult.scene.opened", { scene: "voice", endpoint: CONSULT_API.startVoice });
      setScene("voice");
    }
    if (card.id === "avatar") {
      consultBackendEvent("consult.scene.opened", { scene: "avatar", endpoint: CONSULT_API.startAvatar });
      setScene("avatar");
    }
    if (card.id === "webinar") {
      consultBackendEvent("consult.scene.opened", { scene: "webinar", endpoint: CONSULT_API.startWebinar });
      setScene("webinar");
    }
  };
  return (
    <div className="consult">
      {scene === "entry" && <ConsultEntryScene lang={lang} onSelect={selectEntry} selectedType={selectedType} />}
      {scene === "text" && <ConsultTextScene lang={lang} onBack={() => setScene("entry")} />}
      {scene === "video" && <ConsultVideoScene lang={lang} onBack={() => setScene("entry")} />}
      {scene === "voice" && <ConsultVoiceScene lang={lang} onBack={() => setScene("entry")} />}
      {scene === "avatar" && <ConsultAvatarScene lang={lang} onBack={() => setScene("entry")} />}
      {scene === "webinar" && <ConsultWebinarScene lang={lang} onBack={() => setScene("entry")} />}
      {scene !== "entry" &&
      scene !== "text" &&
      scene !== "video" &&
      scene !== "voice" &&
      scene !== "avatar" &&
      scene !== "webinar" &&
      <React.Fragment>
      <button className="consult-back" onClick={() => { AudioCtl.click(); setScene("entry"); }}>
        <Ic.chevR size={14} /> {lang === "fa" ? "بازگشت به انتخاب مشاوره" : lang === "ar" ? "العودة لاختيار الاستشارة" : "Back to consultation types"}
      </button>
      <div className="cmode">
        {MODES.map((m) => {
          const MI = Ic[m.iconKey] || Ic.chat;
          return (
            <button key={m.id} className={"cmode-btn" + (mode === m.id ? " on" : "")} onClick={() => { AudioCtl.click(); setMode(m.id); }}>
              <MI size={15} /> {CL(lang, m)}
            </button>
          );
        })}
      </div>
      <div className="consult-layout">
        <div className="consult-main">
          {mode === "text" && <TextConsult lang={lang} onAnalysis={setAnalysis} />}
          {mode === "live" && <LiveConsult lang={lang} />}
          {mode === "avatar" && <AvatarConsult lang={lang} />}
        </div>
        <CaseRail lang={lang} analysis={analysis} />
      </div>
      </React.Fragment>}
    </div>
  );
};

// Wire into the module system (replace the shallow consult/reqConsult views).
if (typeof MODULES !== "undefined") {
  const meta = { fa: "مشاوره حقوقی هوشمند", ar: "الاستشارة القانونية الذكية", en: "Smart Legal Consultation" };
  const sub = { fa: "متنی · تصویری · صوتی · آواتار · وبینار", ar: "نصي · مرئي · صوتي · أفاتار · ويبينار", en: "Text · Video · Voice · Avatar · Webinar" };
  MODULES.consult = { iconKey: "chat", t: meta, s: sub, View: ConsultDeepView };
  MODULES.reqConsult = { iconKey: "chat", t: meta, s: sub, View: ConsultDeepView };
}

window.ConsultDeepView = ConsultDeepView;
window.CONSULT_API = CONSULT_API;
window.SHAHDAD_CONSULT_API = CONSULT_API;