/* OWNER REVEAL (side panel) + PERSON DETAIL SHEET (manager-editable) */

function OwnerPanel({ unit, floor, admin, onName, onClose }) {
  if (!unit) return null;
  const o = unit.owner;
  const edited = window.JarounStore.isEdited(unit.id);
  return (
    <div className="owner-panel">
      <div className="op-head">
        <div>
          <div className="kicker en">{floor.label_en} · UNIT</div>
          <div className="op-unit mono en">{faNum(unit.unitNo)}</div>
        </div>
        <button className="op-x" onClick={onClose} aria-label="بستن">×</button>
      </div>

      <div className="op-divider" />

      <div className="op-label kicker">
        مالک واحد
        {admin && edited && <span className="edited-tag">✓ ثبت‌شده توسط مدیر</span>}
      </div>
      {admin ? (
        <button className="op-name" onClick={() => onName(unit)}>
          <span>{o.name}</span>
          <span className="op-name-arrow">↗</span>
        </button>
      ) : (
        <div className="op-name op-name-static">
          <span>{o.name}</span>
        </div>
      )}
      {admin && <div className="op-sub mono en">{o.job} · {o.city}</div>}

      <div className="op-stats">
        <div className="op-stat">
          <span className="kicker">متراژ</span>
          <span className="op-stat-v mono en">{faNum(unit.area)}<span className="u">m²</span></span>
        </div>
        <div className="op-stat">
          <span className="kicker">قدرالسهم</span>
          <span className="op-stat-v mono en">{faNum(unit.share)}<span className="u">%</span></span>
        </div>
        <div className="op-stat">
          <span className="kicker">خواب</span>
          <span className="op-stat-v mono en">{faNum(unit.beds)}<span className="u">BR</span></span>
        </div>
      </div>

      {admin && (
        <div className={'op-status ' + o.statusKind}>
          <span className="dot" /> {o.statusText}
        </div>
      )}

      {admin ? (
        <button className="op-cta" onClick={() => onName(unit)}>
          ویرایش و مشاهدهٔ اطلاعات سرمایه‌گذار
          <span className="arrow">←</span>
        </button>
      ) : (
        <div className="op-private mono en">
          <span className="lockico">▦</span>
          اطلاعات شخصی تنها برای مدیر قابل مشاهده است
        </div>
      )}
    </div>
  );
}

function mkForm(o) {
  return {
    first: o.first || '', last: o.last || '', father: o.father || '',
    nid: o.nid || '', phone: o.phone || '', job: o.job || '',
    city: o.city || '', since: o.since || '',
    statusText: o.statusText, statusKind: o.statusKind,
    note: o.note || '',
  };
}

function EditRow({ label, value, onChange, mono, ph }) {
  return (
    <div className="sheet-dl-row edit">
      <dt>{label}</dt>
      <dd>
        <input
          className={'edit-input ' + (mono ? 'mono en' : '')}
          value={value}
          placeholder={ph || ''}
          onChange={(e) => onChange(e.target.value)}
        />
      </dd>
    </div>
  );
}

function blankForm() {
  return {
    first: '', last: '', father: '', nid: '', phone: '', job: '', city: '',
    since: '', statusText: 'در حال پرداخت', statusKind: 'progress', note: '',
  };
}

function PersonSheet({ unit, floor, admin, onClose, onBackOwner, onSaved }) {
  const [editing,  setEditing]  = React.useState(false);
  const [transfer, setTransfer] = React.useState(false);
  const [form,     setForm]     = React.useState(() => mkForm(unit.owner));
  const [saving,   setSaving]   = React.useState(false);
  const [, force] = React.useReducer((x) => x + 1, 0);

  React.useEffect(() => { setForm(mkForm(unit.owner)); setEditing(false); setTransfer(false); }, [unit.id]);

  const o = unit.owner;
  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const STATUS = window.JAROUN_STATUS;
  const edited = window.JarounStore.isEdited(unit.id);
  const history = unit.history || [];
  const ownerNo = window.JarounStore.ownerCount(unit);
  const canTransfer = window.JarounStore.canTransfer(unit);
  const ord = ['اول', 'دوم', 'سوم', 'چهارم', 'پنجم', 'ششم'];

  async function save() {
    setSaving(true);
    const patch = { ...form, name: ((form.first + ' ' + form.last).trim()) || o.name };
    const ok = await window.JarounStore.saveOwner(unit.id, patch);
    setSaving(false);
    if (ok) { setEditing(false); if (onSaved) await onSaved(); }
  }
  function cancel() { setForm(mkForm(unit.owner)); setEditing(false); }

  function startTransfer() { setForm(blankForm()); setTransfer(true); }
  function cancelTransfer() { setForm(mkForm(unit.owner)); setTransfer(false); }
  async function saveTransfer() {
    const name = (form.first + ' ' + form.last).trim();
    if (!name) return;
    setSaving(true);
    const ok = await window.JarounStore.transferOwner(unit.id, { ...form, name });
    setSaving(false);
    if (ok) { setTransfer(false); if (onSaved) await onSaved(); }
  }

  const rows = [
    ['نام و نام خانوادگی', o.name],
    ['نام پدر', o.father],
    ['کد ملی', o.nid],
    ['شمارهٔ تماس', o.phone],
    ['شغل', o.job],
    ['شهر', o.city],
    ['سرمایه‌گذار از سال', o.since],
  ];

  return (
    <div className="sheet-wrap" onClick={onClose}>
      <div className="sheet" onClick={(e) => e.stopPropagation()}>
        <button className="sheet-x" onClick={onClose} aria-label="بستن">×</button>

        <div className="sheet-grid">
          <div className="sheet-id">
            <div className="sheet-avatar">
              <span className="sheet-initial">{((editing || transfer ? form.first : o.first) || '—').slice(0, 1)}</span>
              <div className="sheet-avatar-tag mono en">INVESTOR</div>
            </div>
            <div className="sheet-name">
              {transfer
                ? ((form.first + ' ' + form.last).trim() || 'مالک جدید')
                : editing ? ((form.first + ' ' + form.last).trim() || '—') : o.name}
            </div>
            <div className="sheet-role mono en">{floor.label_en} · UNIT {faNum(unit.unitNo)}</div>
            <div className="owner-rank">
              {transfer
                ? 'مالک جدید · نفر ' + (ord[ownerNo] || (ownerNo + 1))
                : 'مالک فعلی · نفر ' + (ord[ownerNo - 1] || ownerNo)}
            </div>
            <div className={'op-status ' + (editing || transfer ? form.statusKind : o.statusKind)}>
              <span className="dot" /> {editing || transfer ? form.statusText : o.statusText}
            </div>

            {admin && history.length > 0 && !transfer && (
              <div className="owner-chain">
                <div className="kicker">مالکین پیشین</div>
                <ol className="chain-list">
                  {history.map((h, i) => (
                    <li key={i} className="chain-item">
                      <span className="chain-no mono en">{faNum(i + 1)}</span>
                      <span className="chain-name">{h.name}</span>
                    </li>
                  ))}
                  <li className="chain-item cur">
                    <span className="chain-no mono en">{faNum(history.length + 1)}</span>
                    <span className="chain-name">{o.name}</span>
                    <span className="chain-tag">فعلی</span>
                  </li>
                </ol>
              </div>
            )}

            {edited && !editing && !transfer && (
              <div className="sheet-edited mono en">✓ MANAGER RECORD · ثبت‌شده</div>
            )}
          </div>

          <div className="sheet-detail">
            <div className="sheet-detail-head">
              <div className="kicker en">
                {transfer ? 'NEW OWNER · افزودن مالک جدید' : 'PERSONAL RECORD · شناسنامهٔ سرمایه‌گذار'}
              </div>
              {admin && !editing && !transfer && (
                <button className="edit-btn" onClick={() => setEditing(true)}>
                  <span>✎</span> ویرایش
                </button>
              )}
            </div>

            {!editing && !transfer && (
              <React.Fragment>
                <dl className="sheet-dl">
                  {rows.map(([k, v]) => (
                    <div className="sheet-dl-row" key={k}>
                      <dt>{k}</dt>
                      <dd className={/[0-9۰-۹]/.test(v) ? 'mono en' : ''}>{v}</dd>
                    </div>
                  ))}
                  {o.note && (
                    <div className="sheet-dl-row note-row">
                      <dt>یادداشت مدیر</dt>
                      <dd className="note-text">{o.note}</dd>
                    </div>
                  )}
                </dl>

                <div className="sheet-assets">
                  <div className="sheet-asset">
                    <span className="kicker">واحد</span>
                    <span className="sheet-asset-v mono en">{faNum(unit.unitNo)}</span>
                  </div>
                  <div className="sheet-asset">
                    <span className="kicker">متراژ</span>
                    <span className="sheet-asset-v mono en">{faNum(unit.area)} m²</span>
                  </div>
                  <div className="sheet-asset">
                    <span className="kicker">قدرالسهم</span>
                    <span className="sheet-asset-v mono en">{faNum(unit.share)}%</span>
                  </div>
                  <div className="sheet-asset">
                    <span className="kicker">خواب</span>
                    <span className="sheet-asset-v mono en">{faNum(unit.beds)}</span>
                  </div>
                </div>

                {admin ? (
                  <div className="sheet-foot">
                    <button className="btn sheet-back" onClick={onBackOwner}>
                      <span className="arrow">→</span> بازگشت به واحد
                    </button>
                    <button className="op-cta sheet-edit-cta" onClick={() => setEditing(true)}>
                      ویرایش اطلاعات <span className="arrow">←</span>
                    </button>
                  </div>
                ) : (
                  <button className="btn sheet-back" onClick={onBackOwner}>
                    <span className="arrow">→</span> بازگشت به واحد
                  </button>
                )}

                {admin && (
                  canTransfer ? (
                    <button className="transfer-btn" onClick={startTransfer}>
                      <span className="plus">＋</span>
                      <span>
                        <strong>واگذاری واحد · افزودن مالک جدید</strong>
                        <span className="transfer-sub">مالک فعلی به فهرست مالکین پیشین منتقل می‌شود</span>
                      </span>
                      <span className="arrow">←</span>
                    </button>
                  ) : (
                    <div className="transfer-max mono en">حداکثر ۶ مالک ثبت شده است</div>
                  )
                )}
              </React.Fragment>
            )}

            {editing && (
              <React.Fragment>
                <dl className="sheet-dl">
                  <EditRow label="نام" value={form.first} onChange={(v) => set('first', v)} ph="نام" />
                  <EditRow label="نام خانوادگی" value={form.last} onChange={(v) => set('last', v)} ph="نام خانوادگی" />
                  <EditRow label="نام پدر" value={form.father} onChange={(v) => set('father', v)} />
                  <EditRow label="کد ملی" value={form.nid} onChange={(v) => set('nid', v)} mono />
                  <EditRow label="شمارهٔ تماس" value={form.phone} onChange={(v) => set('phone', v)} mono />
                  <EditRow label="شغل" value={form.job} onChange={(v) => set('job', v)} />
                  <EditRow label="شهر" value={form.city} onChange={(v) => set('city', v)} />
                  <EditRow label="سرمایه‌گذار از سال" value={form.since} onChange={(v) => set('since', v)} mono />

                  <div className="sheet-dl-row edit">
                    <dt>وضعیت پرداخت</dt>
                    <dd>
                      <div className="edit-status">
                        {STATUS.map((s) => (
                          <button
                            type="button"
                            key={s.s}
                            className={'edit-status-btn ' + s.s + (form.statusKind === s.s ? ' on' : '')}
                            onClick={() => setForm((f) => ({ ...f, statusText: s.t, statusKind: s.s }))}
                          >
                            <span className="dot" /> {s.t}
                          </button>
                        ))}
                      </div>
                    </dd>
                  </div>

                  <div className="sheet-dl-row edit">
                    <dt>یادداشت مدیر</dt>
                    <dd>
                      <textarea
                        className="edit-input edit-area"
                        rows="2"
                        value={form.note}
                        placeholder="یادداشت داخلی (اختیاری)"
                        onChange={(e) => set('note', e.target.value)}
                      />
                    </dd>
                  </div>
                </dl>

                <div className="edit-bar">
                  <button className="btn edit-cancel" onClick={cancel} disabled={saving}>انصراف</button>
                  <button className="op-cta edit-save" onClick={save} disabled={saving}>
                    {saving ? 'در حال ذخیره…' : <React.Fragment>ذخیرهٔ اطلاعات <span className="arrow">✓</span></React.Fragment>}
                  </button>
                </div>
              </React.Fragment>
            )}

            {transfer && (
              <React.Fragment>
                <p className="transfer-hint">
                  مشخصات مالک جدید را وارد کنید. با ذخیره، این فرد به‌عنوان مالک فعلی واحد ثبت
                  می‌شود و نام مالک قبلی در فهرست مالکین پیشین باقی می‌ماند.
                </p>
                <dl className="sheet-dl">
                  <EditRow label="نام" value={form.first} onChange={(v) => set('first', v)} ph="نام مالک جدید" />
                  <EditRow label="نام خانوادگی" value={form.last} onChange={(v) => set('last', v)} ph="نام خانوادگی" />
                  <EditRow label="نام پدر" value={form.father} onChange={(v) => set('father', v)} />
                  <EditRow label="کد ملی" value={form.nid} onChange={(v) => set('nid', v)} mono />
                  <EditRow label="شمارهٔ تماس" value={form.phone} onChange={(v) => set('phone', v)} mono />
                  <EditRow label="شغل" value={form.job} onChange={(v) => set('job', v)} />
                  <EditRow label="شهر" value={form.city} onChange={(v) => set('city', v)} />
                  <EditRow label="سرمایه‌گذار از سال" value={form.since} onChange={(v) => set('since', v)} mono />

                  <div className="sheet-dl-row edit">
                    <dt>وضعیت پرداخت</dt>
                    <dd>
                      <div className="edit-status">
                        {STATUS.map((s) => (
                          <button
                            type="button"
                            key={s.s}
                            className={'edit-status-btn ' + s.s + (form.statusKind === s.s ? ' on' : '')}
                            onClick={() => setForm((f) => ({ ...f, statusText: s.t, statusKind: s.s }))}
                          >
                            <span className="dot" /> {s.t}
                          </button>
                        ))}
                      </div>
                    </dd>
                  </div>

                  <div className="sheet-dl-row edit">
                    <dt>یادداشت مدیر</dt>
                    <dd>
                      <textarea
                        className="edit-input edit-area"
                        rows="2"
                        value={form.note}
                        placeholder="یادداشت داخلی (اختیاری)"
                        onChange={(e) => set('note', e.target.value)}
                      />
                    </dd>
                  </div>
                </dl>

                <div className="edit-bar">
                  <button className="btn edit-cancel" onClick={cancelTransfer} disabled={saving}>انصراف</button>
                  <button className="op-cta edit-save" onClick={saveTransfer} disabled={saving}>
                    {saving ? 'در حال ثبت…' : <React.Fragment>ثبت مالک جدید <span className="arrow">✓</span></React.Fragment>}
                  </button>
                </div>
              </React.Fragment>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

window.OwnerPanel = OwnerPanel;
window.PersonSheet = PersonSheet;