// Detail view modal — formal layout

function ChefDetail({ chef, onClose, onEdit, onDelete }) {
  if(!chef) return null;
  const waPhone = (chef.phone||"").replace(/\D/g,"").replace(/^0/, "964");
  const statusKey = (chef.status||"").replace(/\s+/g,"-");
  const rateKey = (chef.rating||"").replace(/\s+/g,"-");
  const avatarCls = window.avatarColorFor(chef.name);

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <div className="modal-title">ملف الشيف</div>
            <div className="modal-title-sub">{chef.id}</div>
          </div>
          <button className="modal-close" onClick={onClose} aria-label="إغلاق">
            <Icon name="x" size={18}/>
          </button>
        </div>

        <div className="detail-hero">
          <div className={"avatar " + avatarCls}>{window.initialsOf(chef.name)}</div>
          <div style={{flex:1, minWidth:0}}>
            <div className="detail-hero-name">{chef.name}</div>
            <div className="detail-hero-meta">
              <span className="pill-id">{chef.id}</span>
              <span className="tag spec">{chef.specialty}</span>
              {chef.age && <span style={{color:"var(--ink-3)"}}>{chef.age} سنة</span>}
              <span className={"tag status-" + statusKey}><span className="dot"/>{chef.status}</span>
              <span className={"tag rate-" + rateKey}>{chef.rating}</span>
            </div>
          </div>
        </div>

        <div className="contact-actions">
          {chef.phone && <>
            <a className="contact-btn wa" href={`https://wa.me/${waPhone}`} target="_blank" rel="noopener">
              <Icon name="whatsapp" size={13}/> واتساب
            </a>
            <a className="contact-btn tel" href={`tel:${chef.phone}`}>
              <Icon name="phone" size={13}/> <span dir="ltr">{chef.phone}</span>
            </a>
          </>}
          {chef.portfolio && <a className="contact-btn link" href={chef.portfolio} target="_blank" rel="noopener">
            <Icon name="link" size={13}/> رابط الشغل
          </a>}
        </div>

        <div className="modal-body">
          <div className="detail-section">
            <h4>المعلومات الأساسية</h4>
            <div className="detail-table">
              <div className="detail-row"><div className="k">المحافظة الحالية</div><div className="v">{chef.currentGov}</div></div>
              <div className="detail-row"><div className="k">يقبل خارج المحافظة</div><div className="v">{chef.outside ? "نعم" : "لا"}</div></div>
              <div className="detail-row"><div className="k">الاختصاص</div><div className="v">{chef.specialty}</div></div>
              <div className="detail-row"><div className="k">سنوات الخبرة</div><div className="v">{chef.expYears ? `${chef.expYears} سنة` : "—"}</div></div>
              <div className="detail-row"><div className="k">الراتب المطلوب</div><div className="v tnum">{window.formatSalary(chef.salary)}</div></div>
              <div className="detail-row"><div className="k">يقبل سكن</div><div className="v">{chef.accomm ? "نعم" : "لا"}</div></div>
              <div className="detail-row full">
                <div className="k">المحافظات المقبولة</div>
                <div className="v">
                  <div className="gov-chips">
                    {(chef.acceptedGovs||[]).map(g => (
                      <span key={g} className="tag" style={{background:"var(--ok-soft)",color:"var(--ok)",borderColor:"#B6DCC2"}}>{g}</span>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>

          {(chef.expPlaces || chef.lastPlace) && (
            <div className="detail-section">
              <h4>سجل الخبرة</h4>
              <div className="detail-table">
                {chef.expPlaces && <div className="detail-row full"><div className="k">الأماكن السابقة</div><div className="v" style={{whiteSpace:"normal", fontWeight:500}}>{chef.expPlaces}</div></div>}
                {chef.lastPlace && <div className="detail-row full"><div className="k">آخر مكان عمل</div><div className="v" style={{whiteSpace:"normal", fontWeight:500}}>{chef.lastPlace}</div></div>}
              </div>
            </div>
          )}

          {chef.notes && (
            <div className="detail-section">
              <h4>الملاحظات</h4>
              <div className="notes-box">{chef.notes}</div>
            </div>
          )}
        </div>

        <div className="modal-foot">
          <button className="btn btn-danger btn-sm" onClick={()=>onDelete(chef.id)}>
            <Icon name="trash" size={13}/> حذف السجل
          </button>
          <button className="btn btn-primary" onClick={()=>onEdit(chef)}>
            <Icon name="edit" size={13}/> تعديل البيانات
          </button>
        </div>
      </div>
    </div>
  );
}

window.ChefDetail = ChefDetail;