// legal-page.jsx — Юридичні зміни (учасники, протоколи, ЄДР)
(function () {

// ===================================================================
// ДАНІ
// ===================================================================

const COMPANY_LEGAL = {
  fullName: "Товариство з обмеженою відповідальністю «Укрбудпроєкт»",
  shortName: "ТОВ «Укрбудпроєкт»",
  edrpou: "12345678",
  registeredDate: "2018-04-02",
  legalAddress: "м. Київ, вул. Хорива, 12, оф. 304",
  director: { name: "Кравченко Олена Андріївна", since: "2018-04-02", powerUntil: "2029-12-20" },
  capital: 250000,
  capitalCurrency: "UAH",
  mainKved: { code: "71.11", label: "Діяльність у сфері архітектури" },
  additionalKveds: [
    { code: "71.12", label: "Діяльність у сфері інжинірингу" },
    { code: "74.10", label: "Спеціалізована діяльність із дизайну" },
  ],
  bankAccounts: 3,
  taxSystem: "Спрощена, 3 група, 5%",
};

const PARTICIPANTS = [
  { id: "p-ok", name: "Кравченко Олена Андріївна", initials: "ОК",
    share: 60, shareAmount: 150000,
    joinedDate: "2018-04-02", role: "founder",
    passport: "АА 123456", taxId: "1234567890",
    address: "м. Київ, вул. Лук'янівська, 21, кв. 14",
  },
  { id: "p-ap", name: "Петренко Андрій Іванович", initials: "АП",
    share: 25, shareAmount: 62500,
    joinedDate: "2020-07-15", role: "participant",
    passport: "ВВ 234567", taxId: "2345678901",
    address: "м. Київ, пр. Перемоги, 75, кв. 88",
  },
  { id: "p-tm", name: "Мельник Тарас Володимирович", initials: "ТМ",
    share: 15, shareAmount: 37500,
    joinedDate: "2022-09-01", role: "participant",
    passport: "СС 345678", taxId: "3456789012",
    address: "м. Київ, вул. Антоновича, 102",
  },
];

const LEGAL_CHANGE_TYPES = {
  creation:        { label: "Створення ТОВ",                icon: "🌱", color: "var(--c-green-deep)" },
  director_change: { label: "Зміна керівника",              icon: "👔", color: "var(--c-blue)"        },
  director_extend: { label: "Продовження повноважень",      icon: "🔄", color: "var(--c-blue)"        },
  participant_in:  { label: "Вхід учасника",                icon: "➕", color: "var(--c-green-deep)" },
  participant_out: { label: "Вихід учасника",               icon: "➖", color: "var(--c-red)"        },
  share_change:    { label: "Зміна часток",                 icon: "⇄",  color: "var(--c-blue)"        },
  capital_change:  { label: "Зміна статутного капіталу",    icon: "💰", color: "var(--c-blue)"        },
  address_change:  { label: "Зміна юр. адреси",             icon: "📍", color: "var(--c-blue)"        },
  kved_change:     { label: "Зміна КВЕД",                   icon: "📋", color: "var(--c-blue)"        },
  statute_revision:{ label: "Нова редакція статуту",        icon: "📜", color: "var(--c-blue)"        },
  seal_kep:        { label: "Печатка / КЕП",                icon: "🔐", color: "var(--ink-2)"        },
};

const EDR_STATUS = {
  pending:    { label: "У підготовці",    tone: "neutral" },
  submitted:  { label: "Подано",          tone: "warn"    },
  registered: { label: "Зареєстровано",   tone: "live"    },
  rejected:   { label: "Відмова",         tone: "late"    },
  not_required:{label: "Не потребує",     tone: "neutral" },
};

const LEGAL_CHANGES = [
  { id: "lc1", date: "2026-05-15", type: "seal_kep",
    title: "Оновлення КЕП директора",
    summary: "Перевипуск кваліфікованого електронного підпису Кравченко О.А. — попередній закінчився 2026-05-14.",
    orderNumber: "14-К",
    edrStatus: "not_required",
    attachments: [
      { name: "Наказ №14-К про оновлення КЕП.pdf", type: "order" },
      { name: "Сертифікат КЕП (Дія).p7s",         type: "cert"  },
    ],
  },
  { id: "lc2", date: "2025-08-10", type: "capital_change",
    title: "Збільшення статутного капіталу зі 100 000 до 250 000 ₴",
    summary: "Додаткові внески учасників пропорційно до часток. Підстава — розширення діяльності.",
    protocolNumber: "7",
    protocolDate: "2025-08-05",
    orderNumber: "—",
    edrStatus: "registered",
    edrNumber: "1234567890123",
    edrDate: "2025-08-22",
    attachments: [
      { name: "Протокол №7 загальних зборів.pdf", type: "protocol" },
      { name: "Зміни до статуту.pdf",              type: "statute"  },
      { name: "Опис документів до ЄДР.pdf",       type: "edr"      },
      { name: "Витяг з ЄДР від 2025-08-22.pdf", type: "extract"  },
    ],
  },
  { id: "lc3", date: "2024-12-20", type: "director_extend",
    title: "Продовження повноважень директора Кравченко О.А. на 5 років",
    summary: "Повноваження продовжено до 2029-12-20.",
    protocolNumber: "6",
    protocolDate: "2024-12-18",
    orderNumber: "77-К",
    edrStatus: "registered",
    edrNumber: "0987654321098",
    edrDate: "2025-01-10",
    attachments: [
      { name: "Протокол №6 загальних зборів.pdf", type: "protocol" },
      { name: "Наказ №77-К.pdf",                    type: "order"    },
      { name: "Витяг з ЄДР від 2025-01-10.pdf", type: "extract"  },
    ],
  },
  { id: "lc4", date: "2024-03-15", type: "kved_change",
    title: "Додано КВЕД 71.12 «Діяльність у сфері інжинірингу»",
    summary: "Для покриття інжинірингових послуг при технадзорі.",
    protocolNumber: "5",
    protocolDate: "2024-03-10",
    edrStatus: "registered",
    edrNumber: "5678901234567",
    edrDate: "2024-03-28",
    attachments: [
      { name: "Протокол №5.pdf",                    type: "protocol" },
      { name: "Заява на реєстраційну дію.pdf",      type: "edr"      },
      { name: "Витяг з ЄДР від 2024-03-28.pdf", type: "extract"  },
    ],
  },
  { id: "lc5", date: "2022-09-01", type: "participant_in",
    title: "Вхід учасника Мельник Т.В. (частка 15%)",
    summary: "Внесення вкладу 15 000 ₴. Перерозподіл часток: ОК — 60%, АП — 25%, ТМ — 15%.",
    protocolNumber: "4",
    protocolDate: "2022-08-25",
    edrStatus: "registered",
    edrNumber: "3456789012345",
    edrDate: "2022-09-14",
    relatedParticipantIds: ["p-tm"],
    attachments: [
      { name: "Протокол №4 загальних зборів.pdf",    type: "protocol" },
      { name: "Нова редакція статуту.pdf",            type: "statute"  },
      { name: "Заява про вступ (Мельник Т.В.).pdf",  type: "request"  },
      { name: "Витяг з ЄДР від 2022-09-14.pdf",   type: "extract"  },
    ],
  },
  { id: "lc6", date: "2022-05-10", type: "address_change",
    title: "Зміна юр. адреси на вул. Хорива, 12, оф. 304",
    summary: "Переїзд офісу з вул. Велика Васильківська, 87. Договір оренди №ОР-2022-04.",
    protocolNumber: "3",
    protocolDate: "2022-05-05",
    edrStatus: "registered",
    edrNumber: "2345678901234",
    edrDate: "2022-05-23",
    attachments: [
      { name: "Протокол №3.pdf",                     type: "protocol" },
      { name: "Зміни до статуту.pdf",                 type: "statute"  },
      { name: "Договір оренди ОР-2022-04.pdf",      type: "lease"    },
      { name: "Витяг з ЄДР від 2022-05-23.pdf", type: "extract"  },
    ],
  },
  { id: "lc7", date: "2020-07-15", type: "participant_in",
    title: "Вхід учасника Петренко А.І. (частка 25%)",
    summary: "Внесення вкладу 25 000 ₴. Зменшення частки Кравченко з 100% до 75%.",
    protocolNumber: "2",
    protocolDate: "2020-07-10",
    edrStatus: "registered",
    edrNumber: "1234567890999",
    edrDate: "2020-07-29",
    relatedParticipantIds: ["p-ap"],
    attachments: [
      { name: "Протокол №2 загальних зборів.pdf",    type: "protocol" },
      { name: "Нова редакція статуту.pdf",            type: "statute"  },
      { name: "Заява про вступ (Петренко А.І.).pdf", type: "request"  },
      { name: "Витяг з ЄДР від 2020-07-29.pdf",   type: "extract"  },
    ],
  },
  { id: "lc8", date: "2018-04-02", type: "creation",
    title: "Створення ТОВ «Укрбудпроєкт»",
    summary: "Реєстрація юридичної особи. Засновник — Кравченко О.А. (100%). Статутний капітал — 100 000 ₴.",
    protocolNumber: "1",
    protocolDate: "2018-03-28",
    orderNumber: "1-К",
    edrStatus: "registered",
    edrNumber: "1234567890001",
    edrDate: "2018-04-02",
    attachments: [
      { name: "Протокол №1 установчих зборів.pdf",   type: "protocol" },
      { name: "Статут (перша редакція).pdf",         type: "statute"  },
      { name: "Наказ №1-К про вступ на посаду.pdf",  type: "order"    },
      { name: "Витяг з ЄДР від 2018-04-02.pdf",   type: "extract"  },
    ],
  },
];

const PROTOCOL_TEMPLATES = [
  { id: "ptr-director-extend", name: "Продовження повноважень керівника",
    icon: "🔄", type: "director_extend",
    description: "Стандартний протокол загальних зборів про продовження повноважень діючого керівника на новий строк.",
    fields: ["Дата зборів", "Учасники присутні", "Термін повноважень (з ‒ по)"],
  },
  { id: "ptr-director-change", name: "Зміна керівника",
    icon: "👔", type: "director_change",
    description: "Протокол про звільнення попереднього керівника і призначення нового. Готується разом з наказом про звільнення / прийняття.",
    fields: ["Дата зборів", "ПІБ нового керівника", "Дата вступу на посаду", "Термін повноважень"],
  },
  { id: "ptr-participant-in", name: "Вхід нового учасника",
    icon: "➕", type: "participant_in",
    description: "Протокол про прийняття нового учасника до товариства, його внесок і перерозподіл часток.",
    fields: ["ПІБ учасника", "ІПН", "Сума внеску", "Розмір частки", "Перерозподіл часток"],
  },
  { id: "ptr-participant-out", name: "Вихід учасника",
    icon: "➖", type: "participant_out",
    description: "Протокол про вихід учасника, повернення внеску і перерозподіл часток між тими, що залишилися. Потребує нотаріальної заяви.",
    fields: ["ПІБ учасника, що виходить", "Сума повернення", "Перерозподіл часток"],
  },
  { id: "ptr-capital-change", name: "Зміна статутного капіталу",
    icon: "💰", type: "capital_change",
    description: "Протокол про збільшення (додаткові внески / нові учасники) або зменшення статутного капіталу.",
    fields: ["Старий розмір", "Новий розмір", "Джерело змін", "Розподіл по учасниках"],
  },
  { id: "ptr-address-change", name: "Зміна юридичної адреси",
    icon: "📍", type: "address_change",
    description: "Протокол про зміну юр. адреси. Підставою для реєстрації служить договір оренди / право власності за новою адресою.",
    fields: ["Стара адреса", "Нова адреса", "Підстава (договір)"],
  },
  { id: "ptr-kved-change", name: "Зміна / додавання КВЕД",
    icon: "📋", type: "kved_change",
    description: "Протокол про зміну видів економічної діяльності — додавання, виключення або зміну основного КВЕД.",
    fields: ["КВЕД, що додаються", "КВЕД, що виключаються", "Новий основний КВЕД"],
  },
  { id: "ptr-statute-revision", name: "Нова редакція статуту",
    icon: "📜", type: "statute_revision",
    description: "Протокол про затвердження нової редакції статуту. Зазвичай супроводжує будь-яку структурну зміну.",
    fields: ["Причина перегляду", "Ключові зміни"],
  },
];

window.LEGAL_DATA = {
  company: COMPANY_LEGAL,
  participants: PARTICIPANTS,
  changes: LEGAL_CHANGES,
  templates: PROTOCOL_TEMPLATES,
};
window.LEGAL_CHANGE_TYPES = LEGAL_CHANGE_TYPES;
window.EDR_STATUS = EDR_STATUS;


// ===================================================================
// СТОРІНКА
// ===================================================================

function LegalChangesPage({ role }) {
  const [openChange, setOpenChange] = React.useState(null);
  const [openParticipant, setOpenParticipant] = React.useState(null);
  const [openTemplate, setOpenTemplate] = React.useState(null);

  const co = COMPANY_LEGAL;
  const pending = LEGAL_CHANGES.filter(c => c.edrStatus === "pending" || c.edrStatus === "submitted").length;

  return (
    <div className="page">
      <div className="page-head">
        <div style={{display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16}}>
          <div>
            <h1 className="page-h1">Юридичні зміни</h1>
            <div className="page-sub">
              <span>Учасники, протоколи, реєстраційні дії в ЄДР</span>
              <span className="dot"></span>
              <span>{LEGAL_CHANGES.length} {window.plural(LEGAL_CHANGES.length, "запис", "записи", "записів")} в історії</span>
              {pending > 0 && <>
                <span className="dot"></span>
                <span style={{color: "var(--late)"}}>{pending} в процесі</span>
              </>}
            </div>
          </div>
          <div style={{display: "flex", gap: 8, flexShrink: 0}}>
            <button className="btn"><window.Ico name="download" size={14} /> Витяг з ЄДР</button>
            <button className="btn btn-primary">
              <window.Icon.Plus /> Нова зміна
            </button>
          </div>
        </div>
      </div>

      {/* Шапка — компанія */}
      <section className="section">
        <div className="legal-company-card">
          <div className="legal-company-head">
            <div>
              <div className="legal-company-name">{co.shortName}</div>
              <div className="legal-company-full">{co.fullName}</div>
            </div>
            <div className="legal-company-edrpou">
              <div className="legal-company-edrpou-label">ЄДРПОУ</div>
              <div className="legal-company-edrpou-num">{co.edrpou}</div>
            </div>
          </div>
          <div className="legal-company-grid">
            <div className="legal-info-cell">
              <div className="legal-info-label">Юр. адреса</div>
              <div className="legal-info-val">{co.legalAddress}</div>
            </div>
            <div className="legal-info-cell">
              <div className="legal-info-label">Директор</div>
              <div className="legal-info-val">{co.director.name}</div>
              <div className="legal-info-sub">з {window.formatDate ? window.formatDate(co.director.since) : co.director.since} · повноваження до {window.formatDate ? window.formatDate(co.director.powerUntil) : co.director.powerUntil}</div>
            </div>
            <div className="legal-info-cell">
              <div className="legal-info-label">Статутний капітал</div>
              <div className="legal-info-val">{co.capital.toLocaleString("uk-UA")} ₴</div>
            </div>
            <div className="legal-info-cell">
              <div className="legal-info-label">Основний КВЕД</div>
              <div className="legal-info-val"><code>{co.mainKved.code}</code> {co.mainKved.label}</div>
              <div className="legal-info-sub">+ {co.additionalKveds.length} додаткових</div>
            </div>
            <div className="legal-info-cell">
              <div className="legal-info-label">Дата створення</div>
              <div className="legal-info-val">{window.formatDate ? window.formatDate(co.registeredDate) : co.registeredDate}</div>
            </div>
            <div className="legal-info-cell">
              <div className="legal-info-label">Система оподаткування</div>
              <div className="legal-info-val">{co.taxSystem}</div>
            </div>
          </div>
        </div>
      </section>

      {/* Учасники */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Склад учасників</h2>
          <span className="section-sub">{PARTICIPANTS.length} {window.plural(PARTICIPANTS.length, "учасник", "учасники", "учасників")} · 100% часток</span>
          <div style={{marginLeft: "auto"}}>
            <button className="btn"><window.Ico name="plus" size={14} /> Додати учасника</button>
          </div>
        </div>
        <div className="participant-grid">
          {PARTICIPANTS.map(p => (
            <div key={p.id} className="participant-card" onClick={() => setOpenParticipant(p)}>
              <div className="participant-head">
                <div className="participant-avatar">{p.initials}</div>
                <div style={{flex: 1, minWidth: 0}}>
                  <div className="participant-name">{p.name}</div>
                  <div className="participant-role">{p.role === "founder" ? "Засновник" : "Учасник"} · з {p.joinedDate.slice(0, 4)} р.</div>
                </div>
              </div>
              <div className="participant-share-row">
                <div className="participant-share">
                  <div className="participant-share-num">{p.share}<span>%</span></div>
                  <div className="participant-share-bar">
                    <div className="participant-share-bar-fill" style={{width: p.share + "%"}}></div>
                  </div>
                </div>
                <div className="participant-share-amount">{p.shareAmount.toLocaleString("uk-UA")} ₴</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Хронологія */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Хронологія змін</h2>
          <span className="section-sub">{LEGAL_CHANGES.length} {window.plural(LEGAL_CHANGES.length, "запис", "записи", "записів")}</span>
        </div>
        <div className="legal-timeline">
          {LEGAL_CHANGES.map((ch, i) => {
            const t = LEGAL_CHANGE_TYPES[ch.type] || { label: ch.type, icon: "•", color: "var(--ink-3)" };
            const status = EDR_STATUS[ch.edrStatus] || EDR_STATUS.not_required;
            return (
              <div key={ch.id} className="legal-change-row" onClick={() => setOpenChange(ch)}>
                <div className="legal-change-icon" style={{background: t.color + "22", color: t.color}}><window.Ico e={t.icon} /></div>
                <div className="legal-change-body">
                  <div className="legal-change-head">
                    <span className="legal-change-type" style={{color: t.color}}>{t.label}</span>
                    <span className="dot"></span>
                    <span className="legal-change-date">{window.formatDate ? window.formatDate(ch.date) : ch.date}</span>
                    {ch.protocolNumber && <>
                      <span className="dot"></span>
                      <span className="legal-change-meta">Протокол №{ch.protocolNumber}</span>
                    </>}
                    {ch.orderNumber && ch.orderNumber !== "—" && <>
                      <span className="dot"></span>
                      <span className="legal-change-meta">Наказ №{ch.orderNumber}</span>
                    </>}
                  </div>
                  <div className="legal-change-title">{ch.title}</div>
                  <div className="legal-change-summary">{ch.summary}</div>
                </div>
                <div className="legal-change-aside">
                  <span className={`empl-chip status-${status.tone}`}>{status.label}</span>
                  {ch.edrNumber && <div className="legal-change-edr">№ {ch.edrNumber}</div>}
                  <div className="legal-change-files">{ch.attachments.length} {window.plural(ch.attachments.length, "файл", "файли", "файлів")}</div>
                </div>
              </div>
            );
          })}
        </div>
      </section>

      {/* Шаблони протоколів */}
      <section className="section">
        <div className="section-head">
          <h2 className="section-h2">Шаблони протоколів</h2>
          <span className="section-sub">Швидке формування для типових змін</span>
        </div>
        <div className="template-grid">
          {PROTOCOL_TEMPLATES.map(t => (
            <div key={t.id} className="template-card" onClick={() => setOpenTemplate(t)} style={{cursor: "pointer"}}>
              <div className="template-card-head">
                <div className="template-icon"><window.Ico e={t.icon} /></div>
              </div>
              <div className="template-name" style={{fontSize: 14}}>{t.name}</div>
              <div className="template-desc">{t.description}</div>
              <div className="template-foot">
                <button className="btn btn-primary" style={{flex: 1}}>Сформувати протокол →</button>
              </div>
            </div>
          ))}
        </div>
      </section>

      {openChange && <LegalChangeDrawer change={openChange} onClose={() => setOpenChange(null)} />}
      {openParticipant && <ParticipantDrawer participant={openParticipant} onClose={() => setOpenParticipant(null)} />}
      {openTemplate && <ProtocolTemplateModal template={openTemplate} onClose={() => setOpenTemplate(null)} />}
    </div>
  );
}

// ===================================================================
// Drawer: зміна
// ===================================================================
function LegalChangeDrawer({ change, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  const t = LEGAL_CHANGE_TYPES[change.type] || {};
  const status = EDR_STATUS[change.edrStatus] || EDR_STATUS.not_required;

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <div className="drawer">
        <div className="drawer-head">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <div className="drawer-title-wrap">
            <div style={{display: "flex", alignItems: "center", gap: 10, marginBottom: 8}}>
              <span style={{fontSize: 22}}><window.Ico e={t.icon} /></span>
              <span className="empl-chip" style={{color: t.color, borderColor: t.color}}>{t.label}</span>
              <span className={`empl-chip status-${status.tone}`}>{status.label}</span>
            </div>
            <h2 className="drawer-title">{change.title}</h2>
            <div className="drawer-sub">{window.formatDate ? window.formatDate(change.date) : change.date}</div>
          </div>
        </div>
        <div className="drawer-body">
          <section className="section">
            <p style={{margin: 0, color: "var(--ink-2)", lineHeight: 1.5}}>{change.summary}</p>
          </section>

          <section className="section">
            <div className="section-head"><h3 className="section-h2" style={{fontSize: 14}}>Документи і реєстрація</h3></div>
            <div className="legal-doc-grid">
              {change.protocolNumber && (
                <div className="legal-doc-cell">
                  <div className="legal-doc-label">Протокол</div>
                  <div className="legal-doc-val">№{change.protocolNumber}</div>
                  <div className="legal-doc-sub">від {window.formatDate ? window.formatDate(change.protocolDate) : change.protocolDate}</div>
                </div>
              )}
              {change.orderNumber && change.orderNumber !== "—" && (
                <div className="legal-doc-cell">
                  <div className="legal-doc-label">Наказ</div>
                  <div className="legal-doc-val">№{change.orderNumber}</div>
                </div>
              )}
              {change.edrNumber && (
                <div className="legal-doc-cell">
                  <div className="legal-doc-label">Реєстраційна дія в ЄДР</div>
                  <div className="legal-doc-val" style={{fontFamily: "var(--font-mono)", fontSize: 13}}>{change.edrNumber}</div>
                  <div className="legal-doc-sub">від {window.formatDate ? window.formatDate(change.edrDate) : change.edrDate}</div>
                </div>
              )}
            </div>
          </section>

          <section className="section">
            <div className="section-head">
              <h3 className="section-h2" style={{fontSize: 14}}>Прикріплені файли</h3>
              <span className="section-sub">{change.attachments.length}</span>
            </div>
            <div className="legal-attach-list">
              {change.attachments.map((a, i) => (
                <div key={i} className="legal-attach-row">
                  <span style={{fontSize: 18, color: "var(--ink-3)"}}><window.Ico name="paperclip" /></span>
                  <span style={{flex: 1, fontSize: 13}}>{a.name}</span>
                  <span className="empl-chip">{a.type}</span>
                  <button className="btn btn-sm">Відкрити</button>
                </div>
              ))}
            </div>
          </section>
        </div>
      </div>
    </>
  );
}

// ===================================================================
// Drawer: учасник
// ===================================================================
function ParticipantDrawer({ participant: p, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  // Знайти зміни, пов'язані з цим учасником
  const related = LEGAL_CHANGES.filter(c => (c.relatedParticipantIds || []).includes(p.id));

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <div className="drawer">
        <div className="drawer-head">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <div className="drawer-title-wrap">
            <div style={{display: "flex", alignItems: "center", gap: 12, marginBottom: 8}}>
              <div className="participant-avatar" style={{width: 48, height: 48, fontSize: 16}}>{p.initials}</div>
              <div>
                <h2 className="drawer-title" style={{margin: 0}}>{p.name}</h2>
                <div className="drawer-sub">{p.role === "founder" ? "Засновник" : "Учасник"}</div>
              </div>
            </div>
          </div>
        </div>
        <div className="drawer-body">
          <section className="section">
            <div className="kpi-row" style={{gridTemplateColumns: "repeat(3, 1fr)"}}>
              <div className="kpi"><div className="kpi-label">Частка</div><div className="kpi-value">{p.share}<span style={{fontSize: 14, color: "var(--ink-3)"}}>%</span></div></div>
              <div className="kpi"><div className="kpi-label">Сума</div><div className="kpi-value" style={{fontSize: 18}}>{p.shareAmount.toLocaleString("uk-UA")}<span style={{fontSize: 12, color: "var(--ink-3)"}}> ₴</span></div></div>
              <div className="kpi"><div className="kpi-label">У складі з</div><div className="kpi-value" style={{fontSize: 14}}>{p.joinedDate.slice(0, 4)} р.</div></div>
            </div>
          </section>

          <section className="section">
            <div className="section-head"><h3 className="section-h2" style={{fontSize: 14}}>Реквізити</h3></div>
            <div className="legal-doc-grid">
              <div className="legal-doc-cell">
                <div className="legal-doc-label">Паспорт</div>
                <div className="legal-doc-val" style={{fontFamily: "var(--font-mono)"}}>{p.passport}</div>
              </div>
              <div className="legal-doc-cell">
                <div className="legal-doc-label">ІПН</div>
                <div className="legal-doc-val" style={{fontFamily: "var(--font-mono)"}}>{p.taxId}</div>
              </div>
              <div className="legal-doc-cell" style={{gridColumn: "1 / -1"}}>
                <div className="legal-doc-label">Адреса реєстрації</div>
                <div className="legal-doc-val" style={{fontSize: 13}}>{p.address}</div>
              </div>
            </div>
          </section>

          {related.length > 0 && (
            <section className="section">
              <div className="section-head"><h3 className="section-h2" style={{fontSize: 14}}>Пов'язані зміни</h3></div>
              <div style={{display: "flex", flexDirection: "column", gap: 8}}>
                {related.map(c => {
                  const t = LEGAL_CHANGE_TYPES[c.type] || {};
                  return (
                    <div key={c.id} style={{display: "flex", alignItems: "center", gap: 10, padding: "10px 14px", background: "var(--bg-sunken)", borderRadius: 6}}>
                      <span style={{fontSize: 16}}><window.Ico e={t.icon} /></span>
                      <div style={{flex: 1, minWidth: 0}}>
                        <div style={{fontSize: 13, fontWeight: 500}}>{c.title}</div>
                        <div style={{fontSize: 11, color: "var(--ink-3)"}}>{window.formatDate ? window.formatDate(c.date) : c.date} · Протокол №{c.protocolNumber}</div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </section>
          )}
        </div>
      </div>
    </>
  );
}

// ===================================================================
// Модалка: шаблон протоколу
// ===================================================================
function ProtocolTemplateModal({ template, onClose }) {
  React.useEffect(() => {
    const onKey = (e) => e.key === "Escape" && onClose();
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose]);

  return (
    <>
      <div className="drawer-overlay" onClick={onClose}></div>
      <div className="report-modal" style={{maxWidth: 720, inset: "auto", top: 80, bottom: 80, left: "50%", transform: "translateX(-50%)", width: "calc(100% - 64px)"}}>
        <div className="report-toolbar">
          <button className="drawer-close" onClick={onClose}><window.Icon.X /></button>
          <div className="template-icon" style={{width: 32, height: 32, fontSize: 16}}><window.Ico e={template.icon} /></div>
          <div>
            <div style={{fontSize: 14, fontWeight: 600}}>{template.name}</div>
            <div style={{fontSize: 11.5, color: "var(--ink-3)"}}>{template.description}</div>
          </div>
          <div style={{marginLeft: "auto"}}>
            <button className="btn btn-primary">Сформувати документ →</button>
          </div>
        </div>
        <div style={{flex: 1, overflowY: "auto", padding: "24px 32px"}}>
          <section className="section">
            <div className="section-head"><h3 className="section-h2" style={{fontSize: 14}}>Поля для заповнення</h3></div>
            <div className="cp-grid">
              {template.fields.map((f, i) => (
                <div key={i} className="cp-row">
                  <label className="cp-label">{f}</label>
                  <input className="cp-input" type="text" placeholder="—" />
                </div>
              ))}
            </div>
          </section>
        </div>
      </div>
    </>
  );
}

window.LegalChangesPage = LegalChangesPage;

})();