// Doctor detail page
const { useState: p2S, useMemo: p2M } = React;

const DoctorDetailPage = ({ doctorId, onBook }) => {
  const doctor = p2M(() => DATA.doctors.find(d => d.id === doctorId), [doctorId])
    || DATA.doctors[0];

  const [tab, setTab] = p2S('about');

  // Related doctors (same direction, different person)
  const related = p2M(() => {
    if (!doctor.directions) return [];
    return DATA.doctors
      .filter(d => d.id !== doctor.id && d.directions && d.directions.some(dir => doctor.directions.includes(dir)))
      .slice(0, 4);
  }, [doctor]);

  // Linked direction names
  const linkedDirs = (doctor.directions || []).map(id => DATA.directions.find(d => d.id === id)).filter(Boolean);

  return (
    <>
      <section className="dd-hero">
        <div className="container">
          <Breadcrumbs items={[
            { label: 'Главная', href: 'index.html' },
            { label: 'Врачи', href: 'doctors.html' },
            { label: doctor.fullName },
          ]} />

          <div className="dd-hero__inner">
            <div className="dd-hero__photo">
              {doctor.photo
                ? <img src={doctor.photo} alt={doctor.fullName} style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 'var(--r-md)' }} />
                : <ImagePlaceholder
                    label={doctor.photoLabel}
                    style={{ height: '100%', borderRadius: 'var(--r-md)' }}
                  />}
              {doctor.degree && <span className="dd-degree-badge">{doctor.degree}</span>}
            </div>

            <div className="dd-hero__body">
              <span className="eyebrow">{doctor.specs[0]}</span>
              <h1 className="dd-name">{doctor.fullName}</h1>

              <div className="dd-specs">{doctor.specs.join(' · ')}</div>

              <div className="dd-facts">
                <div className="dd-fact">
                  <div className="dd-fact__label">Стаж</div>
                  <div className="dd-fact__value">{doctor.experience}</div>
                </div>
                <div className="dd-fact">
                  <div className="dd-fact__label">Приём</div>
                  <div className="dd-fact__value">{doctor.price}</div>
                </div>
                {doctor.degree && (
                  <div className="dd-fact">
                    <div className="dd-fact__label">Степень</div>
                    <div className="dd-fact__value">{doctor.degree}</div>
                  </div>
                )}
                <div className="dd-fact">
                  <div className="dd-fact__label">Место приёма</div>
                  <div className="dd-fact__value">{DATA.brand.address.split(',')[0]}</div>
                </div>
              </div>

              {linkedDirs.length > 0 && (
                <div className="dd-tags">
                  {linkedDirs.map(d => (
                    <a key={d.id} href={`direction.html?id=${d.id}`} className="dd-tag">
                      <Icon name={d.icon} size={14} />
                      {d.name}
                    </a>
                  ))}
                </div>
              )}

              <div className="dd-actions">
                <button className="btn btn-primary btn-lg" onClick={onBook}>
                  Записаться на приём
                </button>
                <a className="btn btn-secondary btn-lg" href={`https://wa.me/${DATA.brand.phoneRaw.replace('+', '')}`} target="_blank" rel="noopener noreferrer">
                  <Icon name="whatsapp" size={18} />
                  WhatsApp
                </a>
              </div>
            </div>
          </div>
        </div>

        <style>{`
          .dd-hero { background: linear-gradient(180deg, var(--navy-50), #fff); padding-bottom: 56px; }
          .dd-hero__inner {
            display: grid;
            grid-template-columns: 360px 1fr;
            gap: 48px;
            align-items: flex-start;
            padding-top: 12px;
          }
          .dd-hero__photo {
            position: relative;
            aspect-ratio: 4/4.4;
            border-radius: var(--r-md);
          }
          .dd-degree-badge {
            position: absolute;
            top: 16px; left: 16px;
            padding: 6px 12px;
            background: var(--navy-800);
            color: #fff;
            font-size: 11.5px;
            font-weight: 500;
            border-radius: var(--r-full);
            letter-spacing: 0.04em;
            text-transform: uppercase;
          }
          .dd-name {
            margin-top: 12px;
            font-size: clamp(30px, 4vw, 44px);
            letter-spacing: -0.025em;
            line-height: 1.1;
          }
          .dd-specs {
            margin-top: 10px;
            font-size: 16px;
            color: var(--ink-700);
            line-height: 1.5;
          }
          .dd-facts {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            margin-top: 28px;
            padding: 20px 0;
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
          }
          .dd-fact {
            padding: 0 20px;
            border-right: 1px solid var(--border);
          }
          .dd-fact:first-child { padding-left: 0; }
          .dd-fact:last-child { border-right: 0; }
          .dd-fact__label {
            font-size: 12px;
            color: var(--ink-500);
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 500;
          }
          .dd-fact__value {
            font-size: 16px;
            font-weight: 600;
            color: var(--ink-900);
            margin-top: 6px;
          }
          .dd-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 22px;
          }
          .dd-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background: var(--navy-100);
            color: var(--navy-700);
            font-size: 13px;
            font-weight: 500;
            border-radius: var(--r-full);
            transition: background .15s ease;
          }
          .dd-tag:hover { background: var(--navy-200); }
          .dd-actions {
            display: flex;
            gap: 10px;
            margin-top: 28px;
            flex-wrap: wrap;
          }

          @media (max-width: 880px) {
            .dd-hero__inner { grid-template-columns: 1fr; gap: 28px; }
            .dd-hero__photo { max-width: 360px; }
            .dd-facts { grid-template-columns: repeat(2, 1fr); gap: 16px; }
            .dd-fact { border-right: 0; padding: 0; }
          }
        `}</style>
      </section>

      {/* TABS */}
      <section className="sec sec-soft">
        <div className="container">
          <div className="dd-tabs">
            {[
              ['about', 'О враче'],
              ['education', 'Образование'],
              ['treats', 'Что лечит'],
              ['schedule', 'Расписание'],
            ].map(([id, label]) => (
              <button
                key={id}
                className={`dd-tab ${tab === id ? 'is-active' : ''}`}
                onClick={() => setTab(id)}
              >{label}</button>
            ))}
          </div>

          <div className="dd-pane">
            {tab === 'about' && (
              <div className="dd-prose">
                <p>{doctor.bio}</p>
                {doctor.awards && doctor.awards.length > 0 && (
                  <>
                    <h3>Регалии и членство</h3>
                    <ul>
                      {doctor.awards.map((a, i) => <li key={i}>{a}</li>)}
                    </ul>
                  </>
                )}
              </div>
            )}

            {tab === 'education' && (
              <div className="dd-prose">
                <h3>Образование и стажировки</h3>
                <ul className="dd-timeline">
                  {doctor.education && doctor.education.map((e, i) => (
                    <li key={i}>{e}</li>
                  ))}
                </ul>
              </div>
            )}

            {tab === 'treats' && (
              <div className="dd-prose">
                <h3>Заболевания и состояния</h3>
                <div className="dd-treats">
                  {doctor.treats && doctor.treats.map((t, i) => (
                    <div key={i} className="dd-treat">
                      <Icon name="check" size={14} className="dd-treat__check" />
                      <span>{t}</span>
                    </div>
                  ))}
                </div>
              </div>
            )}

            {tab === 'schedule' && (
              <div className="dd-prose">
                <h3>График приёма на этой неделе</h3>
                <div className="dd-schedule">
                  {doctor.schedule && Object.entries(doctor.schedule).map(([day, time]) => (
                    <div key={day} className={`dd-sch-row ${time === '—' ? 'is-off' : ''}`}>
                      <span className="dd-sch-day">{day}</span>
                      <span className="dd-sch-time">{time}</span>
                    </div>
                  ))}
                </div>
                <p style={{ color: 'var(--ink-500)', fontSize: 14, marginTop: 16 }}>
                  Время приёма может отличаться. Уточняйте у администратора при записи.
                </p>
                <button className="btn btn-primary" style={{ marginTop: 16 }} onClick={onBook}>
                  Записаться на приём
                </button>
              </div>
            )}
          </div>
        </div>

        <style>{`
          .dd-tabs {
            display: flex;
            gap: 4px;
            margin-bottom: 24px;
            border-bottom: 1px solid var(--border);
            overflow-x: auto;
          }
          .dd-tab {
            padding: 14px 22px;
            font-size: 14.5px;
            font-weight: 500;
            color: var(--ink-500);
            position: relative;
            white-space: nowrap;
            transition: color .15s ease;
          }
          .dd-tab:hover { color: var(--ink-900); }
          .dd-tab.is-active {
            color: var(--navy-800);
          }
          .dd-tab.is-active::after {
            content: "";
            position: absolute;
            left: 16px; right: 16px;
            bottom: -1px;
            height: 2px;
            background: var(--navy-800);
          }
          .dd-pane {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--r-md);
            padding: 32px 40px;
            min-height: 240px;
          }
          .dd-prose { color: var(--ink-700); font-size: 15.5px; line-height: 1.6; max-width: 760px; }
          .dd-prose p { margin-bottom: 16px; }
          .dd-prose h3 {
            font-size: 17px;
            font-weight: 600;
            color: var(--ink-900);
            margin: 24px 0 12px;
          }
          .dd-prose h3:first-child { margin-top: 0; }
          .dd-prose ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
          .dd-prose ul li {
            position: relative;
            padding-left: 20px;
          }
          .dd-prose ul li::before {
            content: "";
            position: absolute;
            left: 0; top: 9px;
            width: 6px; height: 6px;
            border-radius: 999px;
            background: var(--navy-700);
          }
          .dd-timeline li { padding-left: 24px; }
          .dd-timeline li::before {
            width: 8px; height: 8px;
            border: 2px solid var(--navy-700);
            background: var(--navy-50);
            top: 7px;
          }

          .dd-treats {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          }
          @media (max-width: 700px) { .dd-treats { grid-template-columns: 1fr; } }
          .dd-treat {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            padding: 12px 14px;
            background: var(--navy-50);
            border-radius: var(--r-sm);
            font-size: 14px;
          }
          .dd-treat__check {
            flex-shrink: 0;
            color: var(--success);
            background: oklch(0.62 0.13 160 / 0.14);
            padding: 3px;
            border-radius: 999px;
            width: 20px; height: 20px;
            margin-top: 1px;
          }

          .dd-schedule { display: flex; flex-direction: column; gap: 1px; max-width: 360px; background: var(--border); border-radius: var(--r-sm); overflow: hidden; }
          .dd-sch-row {
            display: flex;
            justify-content: space-between;
            padding: 12px 18px;
            background: #fff;
            font-size: 14.5px;
          }
          .dd-sch-row.is-off { color: var(--ink-400); background: var(--navy-50); }
          .dd-sch-day { font-weight: 500; }
          .dd-sch-time { color: var(--ink-700); }
          .dd-sch-row.is-off .dd-sch-time { color: var(--ink-400); }
        `}</style>
      </section>

      {/* RELATED DOCTORS */}
      {related.length > 0 && (
        <section className="sec">
          <div className="container">
            <SectionHead
              eyebrow="Команда"
              title="Другие врачи направления"
            />
            <div className="dd-related">
              {related.map(d => <DoctorCard key={d.id} doctor={d} onBook={onBook} />)}
            </div>
          </div>
          <style>{`
            .dd-related {
              display: grid;
              grid-template-columns: repeat(4, 1fr);
              gap: 16px;
            }
            @media (max-width: 1100px) { .dd-related { grid-template-columns: repeat(3, 1fr); } }
            @media (max-width: 820px) { .dd-related { grid-template-columns: repeat(2, 1fr); } }
            @media (max-width: 480px) { .dd-related { grid-template-columns: 1fr; } }
          `}</style>
        </section>
      )}
    </>
  );
};

Object.assign(window, { DoctorDetailPage });