// DocumentsView.jsx — Document Analysis + Creation

function useEntrance(delay = 0) {
  const [ready, setReady] = React.useState(false);
  React.useEffect(() => { const t = setTimeout(() => setReady(true), delay + 30); return () => clearTimeout(t); }, []);
  return { opacity: ready ? 1 : 0, transform: ready ? 'none' : 'translateY(18px)', transition: `opacity 0.45s ease, transform 0.45s ease` };
}

const DOC_TYPES = [
  { id: 'employment', label: 'عقد عمل', icon: '👤' },
  { id: 'lease', label: 'عقد إيجار', icon: '🏢' },
  { id: 'nda', label: 'اتفاقية سرية', icon: '🔒' },
  { id: 'partnership', label: 'عقد شراكة', icon: '🤝' },
  { id: 'poa', label: 'توكيل رسمي', icon: '📋' },
  { id: 'service', label: 'عقد خدمات', icon: '⚙' },
];

const ANALYSIS_FINDINGS = [
  { level: 'error',   art: 'المادة ٤٥', text: 'بند الإنهاء المبكر يفتقر لآلية تعويض واضحة' },
  { level: 'error',   art: 'المادة ١٢', text: 'غياب آلية فض النزاعات المحددة' },
  { level: 'warning', art: 'المادة ٧',  text: 'مدة الإيجار (٧ سنوات) تتجاوز الحد المعتاد' },
  { level: 'warning', art: 'المادة ٢٣', text: 'بند التحكيم لا يحدد الجهة المختصة' },
  { level: 'success', art: 'المادة ٣',  text: 'شروط الضمان متوافقة مع اشتراطات النظام' },
  { level: 'success', art: 'المادة ١٩', text: 'التوقيع الرقمي معترف به وفق نظام التقنية' },
  { level: 'info',    art: '',           text: 'يُنصح بمراجعة بند الزيادة السنوية في الإيجار' },
];

const LEVEL_META = {
  error:   { dot: '#b53333', bg: '#f7e5e5', text: '#b53333', label: 'مخاطرة عالية' },
  warning: { dot: '#a05e1a', bg: '#fef3e2', text: '#a05e1a', label: 'يحتاج مراجعة' },
  success: { dot: '#2d7a4f', bg: '#e0f2ea', text: '#2d7a4f', label: 'متوافق' },
  info:    { dot: '#3898ec', bg: '#deeefb', text: '#3898ec', label: 'ملاحظة' },
};

function DocumentsView() {
  const [tab, setTab] = React.useState('analyze'); // 'analyze' | 'create'
  // Analysis state
  const [uploadState, setUploadState] = React.useState('idle'); // idle | analyzing | done
  const [progress, setProgress] = React.useState(0);
  // Creation state
  const [docType, setDocType] = React.useState(null);
  const [creating, setCreating] = React.useState(false);
  const [created, setCreated] = React.useState(false);
  const [form, setForm] = React.useState({ party1: '', party2: '', duration: '', notes: '' });
  const entrance = useEntrance();

  const startAnalysis = () => {
    setUploadState('analyzing');
    setProgress(0);
    const iv = setInterval(() => {
      setProgress(p => {
        if (p >= 100) { clearInterval(iv); setUploadState('done'); return 100; }
        return p + 4;
      });
    }, 90);
  };

  const handleCreate = async () => {
    if (!docType) return;
    setCreating(true);
    await new Promise(r => setTimeout(r, 1800));
    setCreating(false);
    setCreated(true);
  };

  const counts = {
    error: ANALYSIS_FINDINGS.filter(f => f.level === 'error').length,
    warning: ANALYSIS_FINDINGS.filter(f => f.level === 'warning').length,
    success: ANALYSIS_FINDINGS.filter(f => f.level === 'success').length,
  };

  return (
    <div style={{ direction: 'rtl', fontFamily: sanadFonts.arabic, background: sanadColors.bg, minHeight: '100%', padding: '48px 32px 80px', ...entrance }}>
      <div style={{ maxWidth: 860, margin: '0 auto' }}>

        {/* Header */}
        <div style={{ marginBottom: 32 }}>
          <SanadBadge color="brand">المستندات القانونية</SanadBadge>
          <h1 style={{ fontSize: 30, fontWeight: 700, color: sanadColors.textPrimary, margin: '12px 0 8px' }}>
            تحليل وإنشاء المستندات
          </h1>
          <p style={{ fontSize: 15, color: sanadColors.textSecondary }}>حلّل مستندك الحالي أو أنشئ مستنداً قانونياً جاهزاً</p>
        </div>

        {/* Tabs */}
        <div style={{ display: 'flex', background: sanadColors.bgSubtle, borderRadius: 10, padding: 4, marginBottom: 32, width: 'fit-content', gap: 4 }}>
          {[['analyze', '📂 تحليل مستند'], ['create', '✍ إنشاء مستند']].map(([val, label]) => (
            <button key={val} onClick={() => setTab(val)} style={{
              padding: '9px 28px', borderRadius: 8, border: 'none', cursor: 'pointer',
              background: tab === val ? sanadColors.bgElevated : 'transparent',
              color: tab === val ? sanadColors.textPrimary : sanadColors.textMuted,
              fontFamily: sanadFonts.arabic, fontSize: 14, fontWeight: tab === val ? 600 : 400,
              boxShadow: tab === val ? '0 0 0 1px rgba(20,20,19,0.10), 0 1px 4px rgba(20,20,19,0.06)' : 'none',
              transition: 'all 150ms ease',
            }}>{label}</button>
          ))}
        </div>

        {/* ── ANALYZE TAB ── */}
        {tab === 'analyze' && (
          <div>
            {uploadState === 'idle' && (
              <div
                onClick={startAnalysis}
                style={{
                  border: '2px dashed rgba(20,20,19,0.16)', borderRadius: 16,
                  padding: '72px 32px', textAlign: 'center', cursor: 'pointer',
                  background: sanadColors.bgElevated, transition: 'all 180ms ease',
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = sanadColors.brand; e.currentTarget.style.background = sanadColors.brandSubtle; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(20,20,19,0.16)'; e.currentTarget.style.background = sanadColors.bgElevated; }}
              >
                <div style={{ marginBottom: 16 }}>
                  <svg width="52" height="52" fill="none" stroke={sanadColors.brand} strokeWidth="1.5" viewBox="0 0 24 24" style={{ margin: '0 auto', display: 'block' }}>
                    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
                    <polyline points="17 8 12 3 7 8"/>
                    <line x1="12" y1="3" x2="12" y2="15"/>
                  </svg>
                </div>
                <div style={{ fontSize: 18, fontWeight: 600, color: sanadColors.textPrimary, marginBottom: 8 }}>
                  اسحب الملف هنا أو اضغط للرفع
                </div>
                <div style={{ fontSize: 14, color: sanadColors.textMuted, marginBottom: 24 }}>PDF, DOCX — حتى ٢٠ ميجابايت</div>
                <SanadButton>اختر ملفاً</SanadButton>
              </div>
            )}

            {uploadState === 'analyzing' && (
              <SanadCard style={{ padding: 32 }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
                  <div style={{ width: 44, height: 44, borderRadius: 10, background: sanadColors.brandSubtle, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <svg width="22" height="22" fill="none" stroke={sanadColors.brand} strokeWidth="2" viewBox="0 0 24 24">
                      <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
                      <polyline points="14 2 14 8 20 8"/>
                    </svg>
                  </div>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 600, color: sanadColors.textPrimary }}>عقد_إيجار_تجاري_٢٠٢٥.pdf</div>
                    <div style={{ fontSize: 13, color: sanadColors.textMuted }}>يتم التحليل بالذكاء الاصطناعي…</div>
                  </div>
                </div>
                <div style={{ background: sanadColors.bgSubtle, borderRadius: 9999, height: 6 }}>
                  <div style={{ height: '100%', borderRadius: 9999, background: sanadColors.brand, width: `${progress}%`, transition: 'width 90ms linear' }} />
                </div>
                <div style={{ fontSize: 12, color: sanadColors.textMuted, marginTop: 8, textAlign: 'center' }}>{progress}٪</div>
              </SanadCard>
            )}

            {uploadState === 'done' && (
              <div>
                {/* Summary cards */}
                <SanadCard style={{ padding: 24, marginBottom: 16 }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
                    <div style={{ fontSize: 16, fontWeight: 700, color: sanadColors.textPrimary }}>عقد إيجار تجاري — نتائج التحليل</div>
                    <SanadBadge color="warning">يحتاج مراجعة</SanadBadge>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 16 }}>
                    {[
                      { label: 'مخاطر عالية', count: counts.error, bg: '#f7e5e5', color: '#b53333' },
                      { label: 'بنود مثيرة للقلق', count: counts.warning, bg: '#fef3e2', color: '#a05e1a' },
                      { label: 'بنود سليمة', count: counts.success, bg: '#e0f2ea', color: '#2d7a4f' },
                    ].map((s, i) => (
                      <div key={i} style={{ background: s.bg, borderRadius: 12, padding: '16px 14px', textAlign: 'center' }}>
                        <div style={{ fontSize: 30, fontWeight: 700, color: s.color }}>{s.count}</div>
                        <div style={{ fontSize: 12, color: s.color, fontWeight: 500 }}>{s.label}</div>
                      </div>
                    ))}
                  </div>
                </SanadCard>

                {/* Findings */}
                <SanadCard style={{ padding: 24, marginBottom: 16 }}>
                  <div style={{ fontSize: 15, fontWeight: 600, color: sanadColors.textPrimary, marginBottom: 14 }}>النتائج التفصيلية</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                    {ANALYSIS_FINDINGS.map((f, i) => {
                      const m = LEVEL_META[f.level];
                      return (
                        <div key={i} style={{ display: 'flex', gap: 12, padding: '11px 14px', background: m.bg, borderRadius: 10, alignItems: 'flex-start' }}>
                          <div style={{ width: 8, height: 8, borderRadius: '50%', background: m.dot, marginTop: 5, flexShrink: 0 }} />
                          <div style={{ flex: 1 }}>
                            <span style={{ fontSize: 10, fontWeight: 700, color: m.text, display: 'block', marginBottom: 2, letterSpacing: '0.06em' }}>
                              {m.label}{f.art && ` · ${f.art}`}
                            </span>
                            <span style={{ fontSize: 14, color: sanadColors.textPrimary, lineHeight: 1.6 }}>{f.text}</span>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </SanadCard>

                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  <SanadButton>تحدث مع محامٍ حول هذا العقد</SanadButton>
                  <SanadButton variant="secondary">تحميل التقرير</SanadButton>
                  <SanadButton variant="ghost" onClick={() => { setUploadState('idle'); setProgress(0); }}>تحليل مستند آخر</SanadButton>
                </div>
              </div>
            )}
          </div>
        )}

        {/* ── CREATE TAB ── */}
        {tab === 'create' && (
          <div>
            {!created ? (
              <div>
                <SanadCard style={{ padding: 28, marginBottom: 20 }}>
                  <div style={{ fontSize: 15, fontWeight: 600, color: sanadColors.textPrimary, marginBottom: 16 }}>اختر نوع المستند</div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }}>
                    {DOC_TYPES.map(dt => (
                      <button
                        key={dt.id}
                        onClick={() => setDocType(dt.id)}
                        style={{
                          padding: '16px 12px', borderRadius: 12, border: 'none', cursor: 'pointer',
                          background: docType === dt.id ? sanadColors.brandSubtle : sanadColors.bgSubtle,
                          boxShadow: docType === dt.id ? `0 0 0 2px ${sanadColors.brand}` : 'none',
                          textAlign: 'center', fontFamily: sanadFonts.arabic,
                          transition: 'all 150ms ease',
                        }}
                      >
                        <div style={{ fontSize: 24, marginBottom: 8 }}>{dt.icon}</div>
                        <div style={{ fontSize: 13, fontWeight: docType === dt.id ? 600 : 400, color: docType === dt.id ? sanadColors.brand : sanadColors.textSecondary }}>{dt.label}</div>
                      </button>
                    ))}
                  </div>
                </SanadCard>

                {docType && (
                  <SanadCard style={{ padding: 28, marginBottom: 20 }}>
                    <div style={{ fontSize: 15, fontWeight: 600, color: sanadColors.textPrimary, marginBottom: 18 }}>تفاصيل المستند</div>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                      {[
                        { key: 'party1', label: 'الطرف الأول (الاسم / الجهة)', placeholder: 'مثال: شركة النخبة للتجارة' },
                        { key: 'party2', label: 'الطرف الثاني', placeholder: 'مثال: محمد أحمد الزهراني' },
                        { key: 'duration', label: 'المدة / التاريخ', placeholder: 'مثال: سنة واحدة من ١ يناير ٢٠٢٦' },
                      ].map(f => (
                        <div key={f.key}>
                          <div style={{ fontSize: 13, fontWeight: 500, color: sanadColors.textPrimary, marginBottom: 6 }}>{f.label}</div>
                          <input
                            value={form[f.key]}
                            onChange={e => setForm(prev => ({ ...prev, [f.key]: e.target.value }))}
                            placeholder={f.placeholder}
                            style={{
                              width: '100%', padding: '10px 14px', borderRadius: 8, border: 'none',
                              background: sanadColors.bg, boxShadow: '0 0 0 1px rgba(20,20,19,0.14)',
                              fontFamily: sanadFonts.arabic, fontSize: 14, color: sanadColors.textPrimary,
                              outline: 'none', direction: 'rtl',
                            }}
                          />
                        </div>
                      ))}
                      <div>
                        <div style={{ fontSize: 13, fontWeight: 500, color: sanadColors.textPrimary, marginBottom: 6 }}>ملاحظات إضافية (اختياري)</div>
                        <textarea
                          value={form.notes}
                          onChange={e => setForm(prev => ({ ...prev, notes: e.target.value }))}
                          placeholder="أي شروط أو متطلبات خاصة تريد إضافتها…"
                          rows={3}
                          style={{
                            width: '100%', padding: '10px 14px', borderRadius: 8, border: 'none',
                            background: sanadColors.bg, boxShadow: '0 0 0 1px rgba(20,20,19,0.14)',
                            fontFamily: sanadFonts.arabic, fontSize: 14, color: sanadColors.textPrimary,
                            outline: 'none', direction: 'rtl', resize: 'none',
                          }}
                        />
                      </div>
                    </div>
                  </SanadCard>
                )}

                <SanadButton
                  disabled={!docType || creating}
                  onClick={handleCreate}
                  style={{ padding: '12px 32px', fontSize: 16 }}
                  icon={creating ? null : <svg width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>}
                >
                  {creating ? 'جارٍ الإنشاء…' : 'أنشئ المستند'}
                </SanadButton>
              </div>
            ) : (
              <div>
                <SanadCard style={{ padding: 28, marginBottom: 16 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
                    <div style={{ width: 44, height: 44, borderRadius: 10, background: '#e0f2ea', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                      <svg width="22" height="22" fill="none" stroke="#2d7a4f" strokeWidth="2" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
                    </div>
                    <div>
                      <div style={{ fontSize: 16, fontWeight: 700, color: sanadColors.textPrimary }}>تم إنشاء المستند بنجاح</div>
                      <div style={{ fontSize: 13, color: sanadColors.textMuted }}>جاهز للمراجعة والتحميل</div>
                    </div>
                  </div>
                  <div style={{ background: sanadColors.bgSubtle, borderRadius: 12, padding: '20px', fontFamily: sanadFonts.arabic, fontSize: 14, color: sanadColors.textPrimary, lineHeight: 2 }}>
                    <div style={{ fontWeight: 700, fontSize: 16, textAlign: 'center', marginBottom: 12 }}>
                      {DOC_TYPES.find(d => d.id === docType)?.label}
                    </div>
                    <p>تم إبرام هذا العقد بين طرفين: <strong>{form.party1 || 'الطرف الأول'}</strong> (الطرف الأول) و<strong>{form.party2 || 'الطرف الثاني'}</strong> (الطرف الثاني)، وذلك للمدة المتفق عليها: {form.duration || 'حسب الاتفاق'}.

يلتزم الطرفان بكافة الشروط والأحكام المنصوص عليها في هذا العقد، وبما لا يتعارض مع أحكام الشريعة الإسلامية والأنظمة المعمول بها في المملكة العربية السعودية.</p>
                    <p style={{ color: sanadColors.textMuted, fontSize: 12, textAlign: 'center', marginBottom: 0 }}>... (يستمر النص القانوني الكامل في الملف المحمّل)</p>
                  </div>
                </SanadCard>
                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  <SanadButton icon={<svg width="15" height="15" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>}>
                    تحميل PDF
                  </SanadButton>
                  <SanadButton variant="secondary">تحميل Word</SanadButton>
                  <SanadButton variant="ghost" onClick={() => { setCreated(false); setDocType(null); setForm({ party1: '', party2: '', duration: '', notes: '' }); }}>
                    إنشاء مستند آخر
                  </SanadButton>
                </div>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { DocumentsView });