const MLLearning = () => {
  const { Icon, Button, useToast, Empty, Skeleton } = window.SB_UI;
  const { fa } = window.SB_DATA;
  const toast = useToast();
  const [loading, setLoading] = useState(true);
  const [training, setTraining] = useState(false);
  const [importing, setImporting] = useState(false);
  const [status, setStatus] = useState(null);
  const [candidates, setCandidates] = useState([]);
  const [intents, setIntents] = useState([]);
  const [manualEdits, setManualEdits] = useState({});
  const [manualSaving, setManualSaving] = useState(null);
  const [importHistory, setImportHistory] = useState([]);
  const [lastImport, setLastImport] = useState(null);
  const [maxConfidence, setMaxConfidence] = useState(60);
  const [includeKnown, setIncludeKnown] = useState(false);
  const fileRef = useRef(null);

  const load = () => {
    setLoading(true);
    Promise.all([
      window.api('/mlmetamarket/status').catch(() => ({ success: false })),
      window.api(`/mlmetamarket/learning/candidates?limit=40&maxConfidence=${maxConfidence}&includeKnown=${includeKnown ? 1 : 0}`).catch(() => ({ candidates: [] })),
      window.api('/mlmetamarket/learning/import-history?limit=20').catch(() => ({ history: [] })),
      window.api('/mlmetamarket/learning/intents').catch(() => ({ intents: [] })),
    ]).then(([st, cand, hist, ints]) => {
      setStatus(st);
      setCandidates(cand.candidates || []);
      setImportHistory(hist.history || []);
      setIntents(ints.intents || []);
    }).finally(() => setLoading(false));
  };

  useEffect(() => { load(); }, []);

  const train = async () => {
    setTraining(true);
    try {
      const r = await window.api('/mlmetamarket/train', { method: 'POST' });
      if (!r.success) throw new Error(r.error || 'آموزش انجام نشد');
      setStatus({ success: true, trained: true, ...r });
      toast('مدل با نمونه‌های جدید آموزش دید', 'success');
      load();
    } catch (e) {
      toast(e.message || 'آموزش انجام نشد', 'error');
    } finally {
      setTraining(false);
    }
  };

  const downloadTemplate = async () => {
    try {
      const res = await fetch(`${window.API_BASE}/mlmetamarket/learning/review-template?limit=1000`);
      if (!res.ok) throw new Error('دانلود اکسل انجام نشد');
      const blob = await res.blob();
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'mlmarket_review_template.xls';
      document.body.appendChild(a);
      a.click();
      a.remove();
      URL.revokeObjectURL(url);
      toast('فایل اکسل آماده دانلود شد', 'success');
    } catch (e) {
      toast(e.message || 'دانلود اکسل انجام نشد', 'error');
      window.open(`${window.API_BASE}/mlmetamarket/learning/review-template?limit=1000`, '_blank');
    }
  };

  const aiPrompt = `این فایل اکسل برای آموزش و اصلاح یک ربات فروش فارسی است.

لطفا فقط ستون‌های خالی/اصلاحی را پر کن و ستون‌های شناسه مثل ردیف، platform_id و conversation_id را تغییر نده.

برای هر ردیف:
1. پیام کاربر و جواب فعلی ربات را بخوان.
2. اگر intent فعلی درست است، در ستون status بنویس: approve
3. اگر intent غلط است، intent درست را در ستون correct_intent بنویس.
4. اگر intent جدید لازم است، در ستون new_intent یک نام انگلیسی snake_case بده، مثل:
payment_question
course_price_question
consultation_request
class_method_question
5. اگر new_intent دادی، ستون new_group و keywords را هم پر کن.
6. اگر جواب ربات بد، ناقص یا نامرتبط است، ستون better_reply را با یک جواب فارسی کوتاه، طبیعی و آماده ارسال در چت پر کن.
7. اگر ردیفی نیاز به تغییر ندارد، فقط status را approve بگذار.
8. اگر مطمئن نیستی، status را skip بگذار و در notes دلیلش را بنویس.

لحن جواب‌ها:
فارسی، کوتاه، محترمانه، فروش‌محور، بدون توضیح اضافه، مناسب چت.

خروجی را در همان فایل اکسل برگردان و ساختار ستون‌ها را تغییر نده.`;

  const copyAiPrompt = async () => {
    try {
      await navigator.clipboard.writeText(aiPrompt);
      toast('پرامپت کپی شد', 'success');
    } catch {
      toast('کپی نشد؛ متن را دستی انتخاب کن', 'error');
    }
  };

  const groupedIntents = useMemo(() => {
    const groups = {};
    intents.forEach(x => {
      const g = x.group || 'other';
      groups[g] ||= [];
      groups[g].push(x);
    });
    return groups;
  }, [intents]);

  const manualIntent = (row, idx) => manualEdits[idx] || row.suggested_intent || '';

  const saveManual = async (row, idx) => {
    const intent = manualIntent(row, idx);
    if (!intent || intent === 'unknown') {
      toast('برای تغییر دستی اول intent درست را انتخاب کن', 'error');
      return;
    }
    setManualSaving(idx);
    try {
      const r = await window.api('/mlmetamarket/learning/feedback', {
        method: 'POST',
        body: { text: row.text, intent, source: 'manual_review_panel', note: `confidence=${row.confidence}` },
      });
      if (!r.success) throw new Error(r.error || 'ثبت دستی انجام نشد');
      setCandidates(list => list.filter((_, i) => i !== idx));
      toast('تغییر دستی ثبت شد؛ برای اثرگذاری آموزش مدل را بزن', 'success');
    } catch (e) {
      toast(e.message || 'ثبت دستی انجام نشد', 'error');
    } finally {
      setManualSaving(null);
    }
  };

  const importReviewFile = async (file) => {
    if (!file) return;
    setImporting(true);
    try {
      const form = new FormData();
      form.append('file', file);
      const res = await fetch(`${window.API_BASE}/mlmetamarket/learning/review-import`, {
        method: 'POST',
        body: form,
      });
      const r = await res.json();
      if (r.history) {
        setLastImport(r.history);
        setImportHistory(list => [r.history, ...list].slice(0, 20));
      }
      if (!r.success) throw new Error(r.error || 'وارد کردن فایل انجام نشد');
      toast(`فایل خوانده شد: ${fa(r.learned_intents || 0)} intent و ${fa(r.learned_replies || 0)} جواب ثبت شد`, 'success');
      load();
    } catch (e) {
      toast(e.message || 'وارد کردن فایل انجام نشد', 'error');
    } finally {
      setImporting(false);
      if (fileRef.current) fileRef.current.value = '';
    }
  };

const confidenceColor = (n) => n >= 70 ? '#34D399' : n >= 45 ? '#FBBF24' : '#F87171';
  const classifier = status?.classifier || {};

  return (
    <div style={{ padding: '20px 24px', maxWidth: 1180, margin: '0 auto' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18, flexWrap: 'wrap' }}>
        <div style={{ width: 46, height: 46, borderRadius: 8, background: 'rgba(99,102,241,.14)', border: '1px solid rgba(99,102,241,.28)', display: 'grid', placeItems: 'center' }}>
          <Icon name="brain-circuit" size={22} color="#A5B4FC" />
        </div>
        <div style={{ flex: 1, minWidth: 240 }}>
          <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--text)' }}>یادگیری ام‌ال مارکت</div>
          <div style={{ fontSize: 12, color: 'var(--text-3)', marginTop: 3 }}>صف بررسی خطاهای intent، اصلاح ناظر، و آموزش مجدد مدل سبک</div>
        </div>
        <Button kind="ghost" icon="refresh-cw" onClick={load} disabled={loading}>تازه‌سازی</Button>
        <Button kind="secondary" icon="download" onClick={downloadTemplate}>اکسل آموزش</Button>
        <Button kind="secondary" icon="upload" onClick={() => fileRef.current?.click()} loading={importing}>برگرداندن اکسل</Button>
        <input
          ref={fileRef}
          type="file"
          accept=".xls,.html,.csv,.tsv,.txt"
          style={{ display: 'none' }}
          onChange={e => importReviewFile(e.target.files?.[0])}
        />
        <Button kind="primary" icon="play" onClick={train} loading={training}>آموزش مدل</Button>
      </div>

      <div className="grid grid-4" style={{ marginBottom: 18 }}>
        <Metric icon="activity" label="وضعیت مدل" value={status?.trained ? 'آموزش‌دیده' : 'نامشخص'} color={status?.trained ? '#34D399' : '#FBBF24'} />
        <Metric icon="database" label="نمونه‌های classifier" value={classifier.examples ? fa(classifier.examples) : '۰'} color="#60A5FA" />
        <Metric icon="type" label="واژگان" value={classifier.vocabulary ? fa(classifier.vocabulary) : '۰'} color="#A78BFA" />
        <Metric icon="inbox" label="در انتظار بررسی" value={loading ? '...' : fa(candidates.length)} color="#FB923C" />
      </div>

      <details className="card" open style={{ marginBottom: 18 }}>
        <summary style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 10 }}>
          <Icon name="copy" size={17} color="#A5B4FC" />
          <span className="bold">پرامپت آماده برای AI</span>
        </summary>
        <div style={{ marginTop: 12 }}>
          <textarea
            className="input"
            readOnly
            value={aiPrompt}
            style={{ width: '100%', minHeight: 210, lineHeight: 1.8, direction: 'rtl', resize: 'vertical' }}
            onFocus={e => e.target.select()}
          />
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: 10 }}>
            <Button kind="secondary" icon="copy" onClick={copyAiPrompt}>کپی پرامپت</Button>
          </div>
        </div>
      </details>

      <div className="card" style={{ marginBottom: 18, borderColor: 'rgba(96,165,250,.25)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
          <Icon name="history" size={18} color="#60A5FA" />
          <div style={{ flex: 1, minWidth: 220 }}>
            <div className="bold">تاریخچه آپلود اکسل</div>
            <div className="text-xs text-3 mt-4">
              {importHistory.length
                ? `آخرین فایل: ${importHistory[0].filename || '-'} | ${fa(importHistory[0].learned_intents || 0)} intent و ${fa(importHistory[0].learned_replies || 0)} جواب یاد گرفت`
                : 'هنوز اکسل برگشتی آپلود نشده؛ بعد از آپلود، نتیجه یادگیری همین‌جا و در جدول پایین ثبت می‌شود.'}
            </div>
          </div>
          <span className="badge ready">{fa(importHistory.length)} بار آپلود</span>
        </div>
      </div>

      <div className="card" style={{ marginBottom: 18 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap' }}>
          <div style={{ flex: 1, minWidth: 260 }}>
            <div className="bold" style={{ fontSize: 14 }}>فیلتر صف یادگیری</div>
            <div className="text-xs text-3 mt-4">پیام‌هایی که اطمینان پایین‌تری دارند، برای بررسی ناظر نمایش داده می‌شوند.</div>
          </div>
          <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--text-2)' }}>
            سقف اطمینان
            <input className="input" type="number" min="1" max="100" value={maxConfidence} onChange={e => setMaxConfidence(e.target.value)} style={{ width: 82 }} />
          </label>
          <label style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 12, color: 'var(--text-2)' }}>
            <input type="checkbox" checked={includeKnown} onChange={e => setIncludeKnown(e.target.checked)} />
            نمایش همه حدس‌ها
          </label>
          <Button kind="secondary" icon="filter" onClick={load}>اعمال</Button>
        </div>
      </div>

      <div className="grid grid-2" style={{ alignItems: 'start' }}>
        <section>
          <div className="section-h">
            <h2>صف بررسی</h2>
            <div className="h-sub">{fa(candidates.length)} پیام</div>
          </div>

          <div className="col gap-12">
            {loading && [1, 2, 3].map(i => <Skeleton key={i} h={104} />)}
            {!loading && candidates.length === 0 && <div className="card"><Empty icon="check-check" title="صف خالی است" sub="فعلاً مورد مشکوکی برای بررسی پیدا نشد." /></div>}
            {!loading && candidates.map((row, idx) => (
              <div key={`${row.conversation_id}-${idx}`} className="card" style={{ padding: 14 }}>
                <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 13, color: 'var(--text)', lineHeight: 1.8 }}>{row.text}</div>
                    <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 8 }}>
                      <span className="badge sold">کانال: {row.platform || '-'}</span>
                      <span className="badge warm">حدس: {row.suggested_intent || 'unknown'}</span>
                      <span className="badge" style={{ background: `${confidenceColor(row.confidence)}22`, color: confidenceColor(row.confidence) }}>اطمینان {fa(row.confidence || 0)}٪</span>
                    </div>
                  </div>
                </div>
                <div className="text-xs text-3 mt-12">
                  برای اصلاح این موردها، «اکسل آموزش» را بگیر و فایل تکمیل‌شده را با «برگرداندن اکسل» آپلود کن.
                </div>
                <details style={{ marginTop: 10 }}>
                  <summary className="text-xs" style={{ cursor: 'pointer', color: '#A5B4FC', fontWeight: 700 }}>تغییر دستی جداگانه</summary>
                  <div style={{ display: 'flex', gap: 8, marginTop: 10, alignItems: 'center' }}>
                    <select className="select" value={manualIntent(row, idx)} onChange={e => setManualEdits(p => ({ ...p, [idx]: e.target.value }))} style={{ flex: 1 }}>
                      <option value="">انتخاب intent</option>
                      {Object.entries(groupedIntents).map(([group, list]) => (
                        <optgroup key={group} label={group}>
                          {list.map(x => <option key={x.intent} value={x.intent}>{x.intent}</option>)}
                        </optgroup>
                      ))}
                    </select>
                    <Button kind="secondary" icon="check" onClick={() => saveManual(row, idx)} loading={manualSaving === idx}>ثبت دستی</Button>
                  </div>
                </details>
              </div>
            ))}
          </div>
        </section>

        <section>
          <details open>
            <summary className="section-h" style={{ cursor: 'pointer' }}>
              <h2>تاییدها و تاریخچه اکسل</h2>
              <div className="h-sub">{fa(importHistory.length)} بار</div>
            </summary>
            {lastImport && (
              <div className="card" style={{ marginBottom: 12, borderColor: 'rgba(52,211,153,.35)', background: 'rgba(52,211,153,.08)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <Icon name="check-circle-2" size={18} color="#34D399" />
                <div>
                  <div className="bold" style={{ color: '#34D399' }}>یاد گرفت</div>
                  <div className="text-xs text-3 mt-4">
                    {fa(lastImport.learned_intents || 0)} intent و {fa(lastImport.learned_replies || 0)} جواب از فایل {lastImport.filename || '-'} ثبت شد.
                  </div>
                </div>
              </div>
            </div>
            )}
            <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
            <table className="table">
              <thead>
                <tr>
                  <th>زمان</th>
                  <th>فایل</th>
                  <th>یاد گرفت</th>
                </tr>
              </thead>
              <tbody>
                {importHistory.map((item, i) => (
                  <tr key={i}>
                    <td className="mono" style={{ color: 'var(--text-3)' }}>{new Date(item.created_at).toLocaleString('fa-IR')}</td>
                    <td style={{ maxWidth: 220, whiteSpace: 'normal', lineHeight: 1.7 }}>{item.filename || '-'}</td>
                    <td>
                      <span className="badge ready">{fa(item.learned_intents || 0)} intent</span>
                      <span className="badge warm" style={{ marginRight: 6 }}>{fa(item.learned_replies || 0)} جواب</span>
                    </td>
                  </tr>
                ))}
                {!importHistory.length && (
                  <tr><td colSpan="3" className="text-3" style={{ textAlign: 'center', padding: 24 }}>هنوز اکسل برگشتی آپلود نشده</td></tr>
                )}
              </tbody>
            </table>
            </div>
          </details>
        </section>
      </div>
    </div>
  );
};

const Metric = ({ icon, label, value, color }) => {
  const { Icon } = window.SB_UI;
  return (
    <div className="card" style={{ padding: 14 }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 34, height: 34, borderRadius: 8, background: `${color}18`, border: `1px solid ${color}35`, display: 'grid', placeItems: 'center' }}>
          <Icon name={icon} size={16} color={color} />
        </div>
        <div>
          <div style={{ fontSize: 11, color: 'var(--text-3)' }}>{label}</div>
          <div style={{ fontSize: 15, fontWeight: 800, color }}>{value}</div>
        </div>
      </div>
    </div>
  );
};

window.MLLearning = MLLearning;