// ── Customers: list + structured CRM profile ──────────────────

const SEGMENTS = [
  { id: 'all',  label: 'همه' },
  { id: 'followup', label: 'نیازمند پیگیری' },
  { id: 'VIP',  label: 'VIP' },
  { id: 'بالقوه', label: 'بالقوه' },
  { id: 'buyer', label: 'خریدار' },
  { id: 'غیرفعال', label: 'غیرفعال' },
];

// رنگ و نشانه‌ی حال‌وهوای مشتری (sentiment)
const SENT = {
  'مثبت': { c: '#1f8a5b', label: 'راضی' },
  'خنثی': { c: 'var(--ink-3)', label: 'خنثی' },
  'منفی': { c: '#d9534f', label: 'ناراضی' },
};
function SentDot({ s, withLabel = false }) {
  const m = SENT[s] || SENT['خنثی'];
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
      <span style={{ width: 8, height: 8, borderRadius: '50%', background: m.c, flexShrink: 0 }} />
      {withLabel && <span style={{ fontSize: 11.5, color: 'var(--ink-2)', fontWeight: 600 }}>{m.label}</span>}
    </span>
  );
}

// برچسب خودکارِ هوش مصنوعی — با آیکن جرقه از برچسب دستی متمایز است
function AutoTag({ children, tone = 'plain' }) {
  const border = tone === 'warn' ? '#d9534f' : 'var(--line-2)';
  const color = tone === 'warn' ? '#d9534f' : 'var(--ink-2)';
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 4,
      fontSize: 11, fontWeight: 500, color,
      border: '1px solid ' + border, borderRadius: 6,
      padding: '2px 7px 2px 6px', whiteSpace: 'nowrap',
    }}>
      <Icon name="bolt" size={11} sw={2} />{children}
    </span>
  );
}

function ScoreBar({ score, w = 46 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
      <div style={{ width: w, height: 5, borderRadius: 999, background: 'var(--surface-2)', overflow: 'hidden' }}>
        <div style={{ width: score + '%', height: '100%', background: 'var(--accent)', borderRadius: 999 }} />
      </div>
      <span style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--ink-2)', minWidth: 18 }}>{fa(score)}</span>
    </div>
  );
}

function CustomersList({ onOpen }) {
  const [seg, setSeg] = useState('all');
  const [q, setQ] = useState('');
  const [sort, setSort] = useState('score'); // score | value | recent
  const inSeg = (c, id) => id === 'all' ? true
    : id === 'followup' ? needsFollowup(c)
    : id === 'buyer' ? c.value > 0
    : c.tags.some(t => t.includes(id));
  let list = CUSTOMERS.filter(c => inSeg(c, seg));
  if (q.trim()) list = list.filter(c => c.name.includes(q));
  list = [...list].sort((a, b) => sort === 'value' ? b.value - a.value : b.score - a.score);

  const segCount = (id) => CUSTOMERS.filter(c => inSeg(c, id)).length;

  return (
    <div style={{ padding: '0 14px 16px' }}>
      <div style={{
        display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px',
        background: 'var(--field)', borderRadius: 12, border: '1px solid var(--line)',
        color: 'var(--ink-3)', marginBottom: 12,
      }}>
        <Icon name="search" size={18} />
        <input value={q} onChange={e => setQ(e.target.value)} placeholder="جستجوی مشتری…" style={{
          flex: 1, border: 'none', background: 'none', outline: 'none', font: 'inherit', fontSize: 14, color: 'var(--ink)',
        }} />
      </div>
      <div style={{ display: 'flex', gap: 8, overflowX: 'auto', paddingBottom: 4, marginBottom: 10 }} className="noscroll">
        {SEGMENTS.map(s => (
          <Chip key={s.id} active={seg === s.id} onClick={() => setSeg(s.id)} count={segCount(s.id)}>{s.label}</Chip>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', margin: '0 2px 8px' }}>
        <span style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{fa(list.length)} مشتری</span>
        <button onClick={() => setSort(s => s === 'score' ? 'value' : 'score')} style={{
          font: 'inherit', fontSize: 11.5, color: 'var(--ink-2)', background: 'var(--surface)',
          border: '1px solid var(--line)', borderRadius: 8, padding: '5px 10px', cursor: 'pointer',
          display: 'inline-flex', alignItems: 'center', gap: 5,
        }}>
          <Icon name="filter" size={13} />مرتب: {sort === 'score' ? 'امتیاز' : 'ارزش خرید'}
        </button>
      </div>

      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {list.map(c => (
          <div key={c.id} onClick={() => onOpen(c.id)} style={{
            display: 'flex', alignItems: 'center', gap: 12, padding: '12px 4px',
            borderBottom: '1px solid var(--line)', cursor: 'pointer',
          }}>
            <Avatar mono={c.mono} size={46} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <SentDot s={custAI(c).sentiment} />
                <span style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--ink)', whiteSpace: 'nowrap' }}>{c.name}</span>
                {c.tags.slice(0, 1).map(t => <Tag key={t}>{t}</Tag>)}
              </div>
              <div style={{ marginTop: 6 }}><ScoreBar score={c.score} /></div>
              {needsFollowup(c) && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 4, marginTop: 6, color: '#d9534f' }}>
                  <Icon name="clock" size={12} sw={2} />
                  <span style={{ fontSize: 11, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                    {custAI(c).next ? custAI(c).next.text : 'نیازمند پیگیری'}
                  </span>
                </div>
              )}
            </div>
            <div style={{ textAlign: 'left', flexShrink: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 700, color: 'var(--ink)' }}>
                {c.value ? faMoney(c.value) : '—'}
              </div>
              <div style={{ fontSize: 10.5, color: 'var(--ink-3)', marginTop: 2 }}>{c.last}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function MiniStat({ label, value }) {
  return (
    <div style={{ flex: 1, textAlign: 'center', padding: '12px 4px' }}>
      <div style={{ fontSize: 18, fontWeight: 800, color: 'var(--ink)', letterSpacing: '-.02em' }}>{value}</div>
      <div style={{ fontSize: 10.5, color: 'var(--ink-2)', marginTop: 3 }}>{label}</div>
    </div>
  );
}

const TL_ICON = { purchase: 'arrow-up-right', message: 'chat', tag: 'tag', note: 'note', join: 'plus' };

function CustomerProfile({ cu, onBack, onMessage }) {
  const [tab, setTab] = useState('overview');
  const [notes, setNotes] = useState([{ text: 'مشتری به تخفیف حجمی علاقه‌منده.', who: 'سمیرا', t: '۳ روز پیش' }]);
  const [note, setNote] = useState('');
  const [toast, setToast] = useState('');
  const [sheet, setSheet] = useState(null); // null | 'call' | 'tag' | 'remind'
  const [manualTags, setManualTags] = useState([]);
  const [tagInput, setTagInput] = useState('');
  const [reminder, setReminder] = useState(null);
  const stageName = FUNNEL[cu.stage].stage;
  const ai = custAI(cu);

  const showToast = (msg) => { setToast(msg); setTimeout(() => setToast(''), 2400); };
  const allTags = [...cu.tags, ...manualTags];
  const REMIND_OPTS = [
    ['۱ ساعت دیگر', 'یک ساعت دیگر'],
    ['فردا صبح', 'فردا صبح'],
    ['۳ روز دیگر', 'سه روز دیگر'],
    ['هفته‌ی بعد', 'هفته‌ی بعد'],
  ];

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', position: 'relative' }}>
      {toast && (
        <div style={{
          position: 'absolute', bottom: 22, left: '50%', transform: 'translateX(-50%)', zIndex: 50,
          background: 'var(--ink)', color: 'var(--bg)', fontSize: 12.5, fontWeight: 600,
          padding: '10px 18px', borderRadius: 999, boxShadow: '0 4px 16px rgba(0,0,0,0.22)', whiteSpace: 'nowrap',
        }}>{toast}</div>
      )}
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 12px', borderBottom: '1px solid var(--line)' }}>
        <button onClick={onBack} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--ink)', padding: 4, display: 'flex' }}>
          <Icon name="chevron-right" size={24} />
        </button>
        <span style={{ fontSize: 15, fontWeight: 600, color: 'var(--ink)' }}>پروفایل مشتری</span>
      </div>

      <div style={{ flex: 1, overflowY: 'auto', background: 'var(--bg)' }}>
        {/* identity */}
        <div style={{ padding: '20px 16px 16px', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', background: 'var(--surface)', borderBottom: '1px solid var(--line)' }}>
          <Avatar mono={cu.mono} size={68} />
          <div style={{ fontSize: 19, fontWeight: 800, color: 'var(--ink)', marginTop: 12 }}>{cu.name}</div>
          <div style={{ fontSize: 12.5, color: 'var(--ink-2)', marginTop: 3 }}>{cu.city} · عضو از {cu.since}</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
            <SentDot s={ai.sentiment} withLabel />
            <span style={{ width: 3, height: 3, borderRadius: '50%', background: 'var(--ink-3)' }} />
            <span style={{ fontSize: 11.5, color: 'var(--ink-2)', fontWeight: 600 }}>مرحله: {stageName}</span>
          </div>
          {/* برچسب‌های دستی (کاربر زده) */}
          <div style={{ display: 'flex', gap: 6, marginTop: 10, flexWrap: 'wrap', justifyContent: 'center' }}>
            {allTags.map(t => <Tag key={t}>{t}</Tag>)}
          </div>
          {/* lead score */}
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 16, width: '100%', maxWidth: 240 }}>
            <span style={{ fontSize: 11.5, color: 'var(--ink-2)', whiteSpace: 'nowrap' }}>امتیاز مشتری</span>
            <div style={{ flex: 1, height: 7, borderRadius: 999, background: 'var(--surface-2)', overflow: 'hidden' }}>
              <div style={{ width: cu.score + '%', height: '100%', background: 'var(--accent)', borderRadius: 999 }} />
            </div>
            <span style={{ fontSize: 14, fontWeight: 800, color: 'var(--ink)' }}>{fa(cu.score)}</span>
          </div>
        </div>

        {/* quick actions */}
        <div style={{ display: 'flex', gap: 8, padding: '12px 14px', background: 'var(--surface)', borderBottom: '1px solid var(--line)' }}>
          <button onClick={() => onMessage(cu.id)} style={{
            flex: 1, font: 'inherit', fontSize: 13, fontWeight: 600, cursor: 'pointer',
            background: 'var(--accent)', color: 'var(--accent-ink)', border: 'none',
            borderRadius: 'var(--r-sm)', padding: '11px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
          }}><Icon name="chat" size={17} />پیام</button>
          {[['phone','تماس','call'],['bell','یادآور','remind'],['tag','برچسب','tag']].map(([ic, lb, key]) => (
            <button key={lb} onClick={() => setSheet(s => s === key ? null : key)} style={{
              flex: 1, font: 'inherit', fontSize: 13, fontWeight: 500, cursor: 'pointer',
              background: sheet === key ? 'var(--surface-2)' : 'var(--surface)', color: 'var(--ink)',
              border: '1px solid ' + (sheet === key ? 'var(--ink-3)' : 'var(--line)'),
              borderRadius: 'var(--r-sm)', padding: '11px', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
            }}><Icon name={ic} size={16} />{lb}</button>
          ))}
        </div>

        {/* پنل تماس */}
        {sheet === 'call' && (
          <div style={{ padding: '14px', background: 'var(--surface)', borderBottom: '1px solid var(--line)' }}>
            <div style={{ fontSize: 12, color: 'var(--ink-2)', marginBottom: 10 }}>تماس با {cu.name}</div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: 'var(--field)', border: '1px solid var(--line)', borderRadius: 'var(--r-sm)', padding: '11px 13px', marginBottom: 10 }}>
              <span style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)', direction: 'ltr' }}>{cu.phone}</span>
              <Icon name="phone" size={16} sw={2} style={{ color: 'var(--ink-3)' }} />
            </div>
            <div style={{ display: 'flex', gap: 8 }}>
              <a href={'tel:' + cu.phone} onClick={() => { setSheet(null); showToast('در حال برقراری تماس…'); }} style={{
                flex: 1, textDecoration: 'none', textAlign: 'center', font: 'inherit', fontSize: 13, fontWeight: 600,
                background: 'var(--accent)', color: 'var(--accent-ink)', borderRadius: 'var(--r-sm)', padding: '11px',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 6,
              }}><Icon name="phone" size={16} sw={2} />تماس بگیر</a>
              <button onClick={() => { navigator.clipboard && navigator.clipboard.writeText(cu.phone); setSheet(null); showToast('شماره کپی شد'); }} style={{
                font: 'inherit', fontSize: 13, fontWeight: 500, cursor: 'pointer', background: 'var(--surface)',
                color: 'var(--ink)', border: '1px solid var(--line)', borderRadius: 'var(--r-sm)', padding: '0 16px',
              }}>کپی شماره</button>
            </div>
          </div>
        )}

        {/* پنل یادآور */}
        {sheet === 'remind' && (
          <div style={{ padding: '14px', background: 'var(--surface)', borderBottom: '1px solid var(--line)' }}>
            <div style={{ fontSize: 12, color: 'var(--ink-2)', marginBottom: 10 }}>یادآوری پیگیری برای {cu.name}</div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
              {REMIND_OPTS.map(([lb, full]) => (
                <button key={lb} onClick={() => { setReminder(full); setSheet(null); showToast('یادآور تنظیم شد: ' + full); }} style={{
                  font: 'inherit', fontSize: 12.5, fontWeight: 500, cursor: 'pointer', background: 'var(--field)',
                  color: 'var(--ink)', border: '1px solid var(--line)', borderRadius: 'var(--r-sm)', padding: '11px',
                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
                }}><Icon name="bell" size={14} />{lb}</button>
              ))}
            </div>
            {reminder && (
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 10, color: 'var(--ink-2)', fontSize: 11.5 }}>
                <Icon name="check" size={13} sw={2} style={{ color: 'var(--accent)' }} />
                یادآور فعلی: {reminder}
              </div>
            )}
          </div>
        )}

        {/* پنل برچسب */}
        {sheet === 'tag' && (
          <div style={{ padding: '14px', background: 'var(--surface)', borderBottom: '1px solid var(--line)' }}>
            <div style={{ fontSize: 12, color: 'var(--ink-2)', marginBottom: 10 }}>افزودن برچسب دستی</div>
            <div style={{ display: 'flex', gap: 8, marginBottom: 10 }}>
              <input value={tagInput} onChange={e => setTagInput(e.target.value)}
                onKeyDown={e => { if (e.key === 'Enter' && tagInput.trim()) { setManualTags(t => [...t, tagInput.trim()]); showToast('برچسب افزوده شد'); setTagInput(''); } }}
                placeholder="مثلاً: مشتری ویژه" style={{
                flex: 1, border: '1px solid var(--line)', background: 'var(--field)', borderRadius: 'var(--r-sm)',
                padding: '10px 13px', font: 'inherit', fontSize: 13, color: 'var(--ink)', outline: 'none',
              }} />
              <button onClick={() => { if (tagInput.trim()) { setManualTags(t => [...t, tagInput.trim()]); showToast('برچسب افزوده شد'); setTagInput(''); } }} style={{
                background: 'var(--accent)', color: 'var(--accent-ink)', border: 'none', borderRadius: 'var(--r-sm)',
                padding: '0 16px', font: 'inherit', fontSize: 13, fontWeight: 600, cursor: 'pointer',
              }}>افزودن</button>
            </div>
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap' }}>
              {['پیگیری ویژه', 'مشتری وفادار', 'حساس به قیمت', 'علاقه‌مند تخفیف'].map(t => (
                <button key={t} onClick={() => { setManualTags(p => p.includes(t) ? p : [...p, t]); showToast('برچسب افزوده شد'); }} style={{
                  font: 'inherit', fontSize: 11.5, cursor: 'pointer', background: 'var(--field)', color: 'var(--ink-2)',
                  border: '1px dashed var(--line-2)', borderRadius: 6, padding: '5px 10px',
                }}>+ {t}</button>
              ))}
            </div>
            {manualTags.length > 0 && (
              <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 12 }}>
                {manualTags.map((t, i) => (
                  <span key={i} style={{
                    display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11.5, fontWeight: 500,
                    color: 'var(--ink)', background: 'var(--surface-2)', borderRadius: 6, padding: '4px 8px',
                  }}>{t}
                    <button onClick={() => setManualTags(p => p.filter((_, j) => j !== i))} style={{
                      background: 'none', border: 'none', cursor: 'pointer', color: 'var(--ink-3)', padding: 0, display: 'flex',
                    }}><Icon name="x" size={12} sw={2.5} /></button>
                  </span>
                ))}
              </div>
            )}
          </div>
        )}

        {/* stats */}
        <div style={{ display: 'flex', background: 'var(--surface)', borderBottom: '1px solid var(--line)' }}>
          <MiniStat label="مجموع خرید (تومان)" value={cu.value ? faMoney(cu.value) : '—'} />
          <div style={{ width: 1, background: 'var(--line)' }} />
          <MiniStat label="مکالمات" value={fa(cu.convs)} />
          <div style={{ width: 1, background: 'var(--line)' }} />
          <MiniStat label="مرحله قیف" value={<span style={{ fontSize: 13.5 }}>{stageName}</span>} />
        </div>

        {/* خلاصه‌ی هوشمند + قدم بعدی + برچسب‌های خودکار */}
        <div style={{ padding: '14px', display: 'flex', flexDirection: 'column', gap: 12 }}>
          {/* AI summary */}
          {ai.summary && (
            <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--r)', padding: '13px 14px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 7 }}>
                <Icon name="bolt" size={14} sw={2} style={{ color: 'var(--accent)' }} />
                <span style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--ink-2)' }}>خلاصه‌ی هوشمند</span>
                {ai.conf > 0 && (
                  <span style={{ marginRight: 'auto', fontSize: 10.5, color: 'var(--ink-3)' }}>اطمینان {fa(ai.conf)}٪</span>
                )}
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.8 }}>{ai.summary}</div>
            </div>
          )}

          {/* Next action */}
          {ai.next && (
            <div style={{
              background: 'var(--surface)', borderRadius: 'var(--r)', padding: '13px 14px',
              border: '1px solid ' + (ai.next.overdue ? '#d9534f' : 'var(--line)'),
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 7 }}>
                <Icon name="clock" size={14} sw={2} style={{ color: ai.next.overdue ? '#d9534f' : 'var(--ink-2)' }} />
                <span style={{ fontSize: 11.5, fontWeight: 700, color: ai.next.overdue ? '#d9534f' : 'var(--ink-2)' }}>
                  قدم بعدی{ai.next.overdue ? ' · عقب‌افتاده' : ''}
                </span>
                <span style={{ marginRight: 'auto', fontSize: 10.5, color: 'var(--ink-3)' }}>موعد: {ai.next.due}</span>
              </div>
              <div style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.7, marginBottom: 10 }}>{ai.next.text}</div>
              <button style={{
                font: 'inherit', fontSize: 12.5, fontWeight: 600, cursor: 'pointer',
                background: 'var(--accent)', color: 'var(--accent-ink)', border: 'none',
                borderRadius: 'var(--r-sm)', padding: '8px 14px', display: 'inline-flex', alignItems: 'center', gap: 5,
              }}><Icon name="check" size={14} sw={2} />انجام شد</button>
            </div>
          )}

          {/* برچسب‌های خودکار دسته‌بندی‌شده */}
          {(ai.auto.interests.length > 0 || ai.auto.objections.length > 0 || ai.auto.source) && (
            <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--r)', padding: '13px 14px' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 10 }}>
                <Icon name="bolt" size={14} sw={2} style={{ color: 'var(--accent)' }} />
                <span style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--ink-2)' }}>برچسب‌های خودکار</span>
              </div>
              {ai.auto.interests.length > 0 && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', marginBottom: 8 }}>
                  <span style={{ fontSize: 11, color: 'var(--ink-3)', minWidth: 56 }}>علاقه‌مندی</span>
                  {ai.auto.interests.map(t => <AutoTag key={t}>{t}</AutoTag>)}
                </div>
              )}
              {ai.auto.objections.length > 0 && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap', marginBottom: 8 }}>
                  <span style={{ fontSize: 11, color: 'var(--ink-3)', minWidth: 56 }}>اعتراض/مانع</span>
                  {ai.auto.objections.map(t => <AutoTag key={t} tone="warn">{t}</AutoTag>)}
                </div>
              )}
              {ai.auto.source && (
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
                  <span style={{ fontSize: 11, color: 'var(--ink-3)', minWidth: 56 }}>منبع</span>
                  <AutoTag>{ai.auto.source}</AutoTag>
                </div>
              )}
              {ai.auto.evidence && (
                <div style={{ fontSize: 10.5, color: 'var(--ink-3)', marginTop: 10, lineHeight: 1.7 }}>
                  مبنا: {ai.auto.evidence}
                </div>
              )}
            </div>
          )}
        </div>

        {/* tabs */}
        <div style={{ display: 'flex', gap: 6, padding: '12px 14px 0' }}>
          {[['overview','تایم‌لاین'],['notes','یادداشت‌ها'],['info','اطلاعات']].map(([id, lb]) => (
            <button key={id} onClick={() => setTab(id)} style={{
              font: 'inherit', fontSize: 13, fontWeight: tab === id ? 700 : 500, cursor: 'pointer',
              background: 'none', border: 'none', padding: '6px 4px', color: tab === id ? 'var(--ink)' : 'var(--ink-3)',
              borderBottom: '2px solid ' + (tab === id ? 'var(--accent)' : 'transparent'),
            }}>{lb}</button>
          ))}
        </div>
        <div style={{ height: 1, background: 'var(--line)', marginTop: -1 }} />

        <div style={{ padding: '14px' }}>
          {tab === 'overview' && (
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {TIMELINE.map((e, i) => (
                <div key={i} style={{ display: 'flex', gap: 12 }}>
                  <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
                    <div style={{ width: 30, height: 30, borderRadius: '50%', border: '1px solid var(--line)', background: 'var(--surface)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--ink-2)', flexShrink: 0 }}>
                      <Icon name={TL_ICON[e.type]} size={15} />
                    </div>
                    {i < TIMELINE.length - 1 && <div style={{ width: 1, flex: 1, background: 'var(--line)', minHeight: 16 }} />}
                  </div>
                  <div style={{ paddingBottom: 18, flex: 1 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', gap: 8 }}>
                      <span style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink)' }}>{e.title}</span>
                      <span style={{ fontSize: 10.5, color: 'var(--ink-3)', whiteSpace: 'nowrap' }}>{e.t}</span>
                    </div>
                    <div style={{ fontSize: 12, color: 'var(--ink-2)', marginTop: 3, lineHeight: 1.6 }}>{e.detail}</div>
                  </div>
                </div>
              ))}
            </div>
          )}
          {tab === 'notes' && (
            <div>
              <div style={{ display: 'flex', gap: 8, marginBottom: 14 }}>
                <input value={note} onChange={e => setNote(e.target.value)} placeholder="یادداشت داخلی تیمی…" style={{
                  flex: 1, border: '1px solid var(--line)', background: 'var(--surface)', borderRadius: 'var(--r-sm)',
                  padding: '10px 13px', font: 'inherit', fontSize: 13, color: 'var(--ink)', outline: 'none',
                }} />
                <button onClick={() => { if (note.trim()) { setNotes(n => [{ text: note, who: 'تو', t: 'هم‌اکنون' }, ...n]); setNote(''); } }} style={{
                  background: 'var(--accent)', color: 'var(--accent-ink)', border: 'none', borderRadius: 'var(--r-sm)',
                  padding: '0 16px', font: 'inherit', fontSize: 13, fontWeight: 600, cursor: 'pointer',
                }}>افزودن</button>
              </div>
              {notes.map((n, i) => (
                <div key={i} style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--r-sm)', padding: '12px 14px', marginBottom: 10 }}>
                  <div style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.7 }}>{n.text}</div>
                  <div style={{ fontSize: 10.5, color: 'var(--ink-3)', marginTop: 6 }}>{n.who} · {n.t}</div>
                </div>
              ))}
            </div>
          )}
          {tab === 'info' && (
            <div style={{ background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--r)', overflow: 'hidden' }}>
              {[['شماره تماس', cu.phone],['شهر', cu.city],['عضو از', cu.since],['کانال', '@avin_shop'],['شناسه روبیکا', 'rubika.ir/' + cu.id]].map(([k, v], i) => (
                <div key={k} style={{ display: 'flex', justifyContent: 'space-between', padding: '13px 14px', borderTop: i ? '1px solid var(--line)' : 'none' }}>
                  <span style={{ fontSize: 13, color: 'var(--ink-2)' }}>{k}</span>
                  <span style={{ fontSize: 13, color: 'var(--ink)', fontWeight: 500, direction: 'ltr' }}>{v}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { CustomersList, CustomerProfile });