// ===========================================================
// Tài liệu hướng dẫn sử dụng — mở từ menu avatar (Topbar)
// Full screen, cột trái là mục lục, cột phải là nội dung cuộn.
// ===========================================================

const GUIDE_SECTIONS = [
  {
    id: 'start', icon: 'user', title: 'Bắt đầu & Đăng nhập',
    items: [
      ['Tài khoản', 'Do Admin cấp trong Cài đặt → Người dùng & Phân quyền. Nhân viên đăng nhập bằng SỐ ĐIỆN THOẠI, Admin dùng email.'],
      ['Quên mật khẩu', 'Bấm "Quên mật khẩu?" ở màn đăng nhập, hoặc liên hệ Admin để cấp lại.'],
      ['Vai trò & quyền', 'Menu và tính năng hiển thị theo quyền của vị trí bạn — không thấy mục nào tức là vị trí của bạn không dùng mục đó.'],
    ],
  },
  {
    id: 'dashboard', icon: 'dashboard', title: 'Tổng quan (Dashboard)',
    items: [
      ['Số liệu theo vai trò', 'Nhân viên thấy số của MÌNH (doanh số, khách phụ trách, follow-up); Admin thấy toàn hệ thống.'],
      ['Việc hôm nay', 'Bảng "Khách cần chăm sóc" xếp theo hạn — click một dòng để mở hồ sơ khách, bấm nút điện thoại để ghi kết quả liên hệ ngay.'],
    ],
  },
  {
    id: 'customers', icon: 'users', title: 'Khách hàng',
    items: [
      ['Tìm kiếm', 'Gõ tên (không cần dấu), số điện thoại hoặc mã khách. Bộ lọc nhanh: Chưa có lịch hẹn / Cần follow-up / Nguy cơ / VIP.'],
      ['Thêm khách', 'Nút "Thêm khách hàng" — điền tên + SĐT là đủ tạo; loại khách chọn được nhiều (loại tick đầu là loại chính).'],
      ['Import hàng loạt', 'Nút "Nhập từ file" nhận CSV/Excel. Bấm "Tải file mẫu" để lấy đúng định dạng cột; hệ thống tự bắt trùng số điện thoại.'],
      ['Hồ sơ 360°', 'Click tên khách để mở: thông tin, lịch sử đơn, ghi chú, lịch hẹn — tất cả trong một màn hình.'],
      ['Sửa nhanh tại bảng', 'Nhấp thẳng vào ô Phụ trách / Ghi chú trong bảng để sửa mà không cần mở hồ sơ.'],
    ],
  },
  {
    id: 'orders', icon: 'receipt', title: 'Ghi nhận đơn hàng',
    items: [
      ['Hai cách nhập', 'Cách 1 — TRA CỨU: gõ mã đơn Sapo/POS rồi bấm "Tra cứu & tự điền", hệ thống tự kéo về sản phẩm, số lượng, chiết khấu, kênh, thời gian. Cách 2 — TỰ ĐIỀN: tìm sản phẩm theo tên/SKU và click thêm từng món.'],
      ['Chiết khấu', 'Mỗi dòng chỉnh được chiết khấu theo % hoặc số tiền; các nút 5/10/15/20/30% để chọn nhanh.'],
      ['Sửa tổng', 'Nếu tổng trên Sapo/POS khác (do khuyến mãi), bấm "Sửa tổng" ở thanh dưới cùng để nhập đúng số thực tế.'],
      ['Sau khi lưu', 'Đơn ghi vào lịch sử mua của khách; LTV, số đơn và "Mua cuối" cập nhật ngay.'],
    ],
  },
  {
    id: 'followup', icon: 'calendar', title: 'Lịch Follow-up',
    items: [
      ['Đặt lịch', 'Từ hồ sơ khách bấm "Đặt lịch": chọn lý do, ngày giờ và kênh liên hệ (kênh có ★ là kênh khách ưa thích).'],
      ['Theo dõi', 'Tab "Lịch Follow-up" ở màn Khách hàng gom mọi lịch hẹn theo ngày; lịch đến hạn tự hiện ở Tổng quan.'],
      ['Xử lý', 'Ghi kết quả liên hệ xong có thể chốt "Đã xong" hoặc "Hoãn" — lý do và kết quả đều lưu vào hồ sơ khách.'],
    ],
  },
  {
    id: 'reports', icon: 'chart', title: 'Báo cáo',
    items: [
      ['Phạm vi', 'Chỉ tài khoản Admin thấy mục Báo cáo (quy tắc 03/09/2026 — Giám đốc và mọi vị trí khác không xem).'],
      ['Nội dung', 'Doanh thu theo kỳ (7N/30N/90N/YTD) · theo kênh · top sản phẩm · cơ cấu khách theo hạng · tình trạng follow-up · hiệu suất từng nhân viên (bấm dòng để xem chi tiết). Toàn bộ tính từ dữ liệu ghi trong CRM.'],
    ],
  },
  {
    id: 'settings', icon: 'settings', title: 'Cài đặt & Phân quyền (Admin)',
    items: [
      ['Tạo tài khoản', 'Cài đặt → Người dùng & Phân quyền → "Thêm người dùng": nhập tên, email HOẶC số điện thoại, vai trò và mật khẩu.'],
      ['Sửa tài khoản', 'Bấm nút sửa ở mỗi dòng để đổi tên, vai trò, khoá/mở hoặc cấp lại mật khẩu.'],
      ['Ma trận quyền', 'Bảng "Vai trò & Phân quyền" (ngay dưới danh sách người dùng): tick quyền cho nhóm Nhân viên chăm sóc khách / Marketing; Admin luôn đủ quyền; riêng quyền Báo cáo & Cài đặt cố định chỉ Admin, không cấp được. Lưu là áp dụng ngay.'],
    ],
  },
  {
    id: 'tips', icon: 'zap', title: 'Phím tắt & mẹo',
    items: [
      ['⌘K / Ctrl+K', 'Tìm mọi thứ: khách, đối tác, sản phẩm, trang — gõ vài chữ là ra, không cần đúng dấu.'],
      ['Esc', 'Đóng hộp thoại / hồ sơ đang mở.'],
      ['Tìm theo SĐT', 'Gõ 3 số cuối điện thoại cũng tìm được khách.'],
      ['Nút mờ "sẽ hoạt động ở bản chính thức"', 'Là tính năng chờ kết nối hệ thống thật (SSO, xuất Excel, gửi email...) — sẽ mở ở bản chính thức.'],
    ],
  },
];

function GuideModal({ onClose }) {
  const [active, setActive] = useState(GUIDE_SECTIONS[0].id);
  const bodyRef = useRef(null);

  const jumpTo = (id) => {
    setActive(id);
    const el = bodyRef.current && bodyRef.current.querySelector('#guide-' + id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <div className="drawer-overlay" onClick={onClose}>
      <div onClick={(e) => e.stopPropagation()}
        style={{background:'var(--bg-page)',width:'100vw',height:'100vh',display:'flex',flexDirection:'column',overflow:'hidden',animation:'slidein 0.28s var(--ease-out)'}}>
        {/* Header */}
        <div style={{padding:'var(--space-3) var(--space-6)',background:'var(--vs-dark-blue)',color:'#fff',display:'flex',gap:'var(--space-3)',alignItems:'center',flexShrink:0}}>
          <div style={{width:36,height:36,borderRadius:'50%',background:'var(--vs-light-blue)',color:'var(--vs-dark-blue)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
            <Icon name="fileText" size={18}/>
          </div>
          <div style={{flex:1,minWidth:0}}>
            <h2 style={{margin:0,fontFamily:'var(--font-display)',fontSize:18,fontWeight:700,color:'#fff'}}>Tài liệu hướng dẫn sử dụng</h2>
            <div className="text-xs" style={{color:'rgba(255,255,255,0.7)',marginTop:1}}>TVS CRM — Hệ thống quản lý khách hàng The Vitamin Shoppe Việt Nam</div>
          </div>
          <button className="close" onClick={onClose}>
            <Icon name="close" size={18}/>
          </button>
        </div>

        {/* Body: mục lục trái + nội dung phải (phone: mục lục thành dải cuộn ngang phía trên — styles.css) */}
        <div className="guide-body" style={{display:'flex',flex:1,overflow:'hidden',minHeight:0}}>
          {/* Mục lục */}
          <div className="guide-toc" style={{width:250,flexShrink:0,borderRight:'1px solid var(--border-1)',background:'var(--bg-soft)',overflow:'auto',padding:'var(--space-3)'}}>
            {GUIDE_SECTIONS.map(sec => (
              <button key={sec.id} onClick={() => jumpTo(sec.id)}
                style={{display:'flex',width:'100%',alignItems:'center',gap:10,padding:'9px 12px',border:'none',cursor:'pointer',textAlign:'left',borderRadius:'var(--radius-sm)',marginBottom:2,
                  background: active === sec.id ? 'var(--vs-dark-blue)' : 'none',
                  color: active === sec.id ? '#fff' : 'var(--fg-2)'}}>
                <Icon name={sec.icon} size={15} style={{flexShrink:0,color: active === sec.id ? 'var(--vs-light-blue)' : 'var(--fg-muted)'}}/>
                <span className="text-sm" style={{fontWeight: active === sec.id ? 700 : 500}}>{sec.title}</span>
              </button>
            ))}
          </div>

          {/* Nội dung */}
          <div ref={bodyRef} style={{flex:1,overflow:'auto',padding:'var(--space-5) var(--space-6)'}}>
            {GUIDE_SECTIONS.map(sec => (
              <div key={sec.id} id={'guide-' + sec.id} style={{marginBottom:'var(--space-6)',scrollMarginTop:12}}>
                <div className="row gap-2 mb-3">
                  <div style={{width:30,height:30,borderRadius:'var(--radius-sm)',background:'rgba(65,182,230,0.14)',color:'var(--vs-dark-blue)',display:'flex',alignItems:'center',justifyContent:'center'}}>
                    <Icon name={sec.icon} size={15}/>
                  </div>
                  <h3 style={{margin:0,fontFamily:'var(--font-display)',fontSize:18,fontWeight:700,color:'var(--fg-1)'}}>{sec.title}</h3>
                </div>
                <div className="card" style={{padding:0}}>
                  {sec.items.map(([label, text], i) => (
                    <div key={label} className="guide-item" style={{display:'flex',gap:14,padding:'12px 16px',borderBottom: i < sec.items.length - 1 ? '1px solid var(--border-1)' : 'none'}}>
                      <div className="text-sm strong guide-item-label" style={{width:150,flexShrink:0,color:'var(--vs-dark-blue)'}}>{label}</div>
                      <div className="text-sm fg-2" style={{flex:1,lineHeight:1.55}}>{text}</div>
                    </div>
                  ))}
                </div>
              </div>
            ))}
            <div className="text-xs fg-muted" style={{paddingBottom:'var(--space-6)'}}>
              Thắc mắc khác về nghiệp vụ, liên hệ Admin hệ thống.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.GuideModal = GuideModal;