/* DriverReassign.jsx — PW-005 Driver Reassignment modal over PW-004 */

const drStyles = {
  header: {
    padding: '18px 24px', borderBottom: `1px solid ${KARE.n100}`,
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  },
  h2: { fontSize: 18, fontWeight: 600, color: KARE.n900, margin: 0 },
  close: { color: KARE.n500, cursor: 'pointer', fontSize: 22, lineHeight: 1, padding: 4 },
  body: { padding: 24, display: 'flex', flexDirection: 'column', gap: 18, maxHeight: 640, overflow: 'auto' },
  section: { display: 'flex', flexDirection: 'column', gap: 10 },
  secTitle: {
    fontSize: 11, fontWeight: 600, color: KARE.n500, letterSpacing: 0.4, textTransform: 'uppercase',
  },
  summary: {
    background: KARE.n100, borderRadius: 8, padding: 16,
    display: 'grid', gridTemplateColumns: '1fr auto', gap: 12, alignItems: 'start',
  },
  kv: { display: 'grid', gridTemplateColumns: '90px 1fr', gap: 8, fontSize: 13, color: KARE.n900 },
  kvLabel: { color: KARE.n500 },
  footer: {
    padding: '14px 24px', borderTop: `1px solid ${KARE.n100}`,
    display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8,
  },
  btnP: {
    height: 40, padding: '0 18px', borderRadius: 6, border: 'none',
    background: KARE.primary, color: KARE.n000,
    fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: FONT,
  },
  btnPDisabled: {
    height: 40, padding: '0 18px', borderRadius: 6, border: 'none',
    background: KARE.n300, color: KARE.n500,
    fontSize: 14, fontWeight: 600, cursor: 'not-allowed', fontFamily: FONT,
  },
  btnG: {
    height: 40, padding: '0 16px', borderRadius: 6,
    background: KARE.n000, border: `1px solid ${KARE.n300}`,
    color: KARE.n700, fontSize: 14, fontWeight: 500, cursor: 'pointer', fontFamily: FONT,
  },
};

const IPhone = () => (
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.8 19.8 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
  </svg>
);

const IPin = () => (
  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round">
    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/>
  </svg>
);

/* -------- Avatar -------- */
function Avatar({ initials, size = 36, selected }) {
  return (
    <span style={{
      width: size, height: size, borderRadius: 999,
      background: selected ? KARE.primary : KARE.primaryHover,
      color: selected ? KARE.n000 : KARE.primary,
      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      fontSize: size >= 36 ? 13 : 11, fontWeight: 700, flexShrink: 0,
      fontFamily: "'Inter', sans-serif", letterSpacing: 0.3,
    }}>{initials}</span>
  );
}

/* -------- Summary card -------- */
function BookingSummary() {
  return (
    <div style={drStyles.summary}>
      <div style={drStyles.kv}>
        <span style={drStyles.kvLabel}>예약 ID</span>
        <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: KARE.n900 }} dir="ltr">BKG-2026-0412-001</span>
        <span style={drStyles.kvLabel}>픽업</span>
        <span dir="ltr" style={{ fontFamily: "'Inter', sans-serif", color: KARE.n900 }}>
          2026-04-28 16:30 KST · ICN T2 Arrival Gate 6
        </span>
        <span style={drStyles.kvLabel}>목적지</span>
        <span style={{ color: KARE.n900 }}>Lotte Hotel Seoul · 3 persons</span>
      </div>
      <div><StatusBadge kind="confirmed" /></div>
    </div>
  );
}

/* -------- Current driver -------- */
function CurrentDriver() {
  return (
    <div style={{
      padding: 14, borderRadius: 8, border: `1px solid ${KARE.n300}`,
      display: 'flex', alignItems: 'center', gap: 14,
    }}>
      <Avatar initials="KS" />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: KARE.n900 }}>Kim Seong-ho <span style={{ fontSize: 11, fontWeight: 600, color: KARE.n500, marginLeft: 6, padding: '2px 6px', borderRadius: 4, background: KARE.n100, letterSpacing: 0.3, textTransform: 'uppercase' }}>Current</span></div>
        <div style={{ fontSize: 12, color: KARE.n500, display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ fontFamily: "'JetBrains Mono', monospace" }} dir="ltr">12가 3456</span>
          <span style={{ color: KARE.n300 }}>·</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><IPhone/> <span style={{ fontFamily: "'Inter', sans-serif" }} dir="ltr">+82 10-4822-1019</span></span>
        </div>
      </div>
      <div style={{
        fontSize: 11, fontWeight: 600, color: KARE.n500, padding: '4px 10px',
        borderRadius: 999, border: `1px solid ${KARE.n300}`, background: KARE.n000,
      }}>오늘 4건</div>
    </div>
  );
}

/* -------- Driver row -------- */
function DriverRow({ driver, selected }) {
  const statusColor = driver.busy ? KARE.n500 : KARE.success;
  return (
    <div style={{
      padding: 14, borderRadius: 8,
      border: `1px solid ${selected ? KARE.primary : KARE.n300}`,
      background: selected ? KARE.primaryHover : KARE.n000,
      display: 'flex', alignItems: 'center', gap: 14, cursor: driver.busy ? 'not-allowed' : 'pointer',
      opacity: driver.busy ? 0.6 : 1,
    }}>
      <span style={{
        width: 16, height: 16, borderRadius: 999,
        border: `2px solid ${selected ? KARE.primary : KARE.n300}`,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
      }}>
        {selected && <span style={{ width: 8, height: 8, borderRadius: 999, background: KARE.primary }} />}
      </span>
      <Avatar initials={driver.initials} selected={selected} />
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 2 }}>
        <div style={{ fontSize: 14, fontWeight: 600, color: KARE.n900, display: 'flex', alignItems: 'center', gap: 8 }}>
          {driver.name}
          <span style={{
            width: 6, height: 6, borderRadius: 999, background: statusColor,
          }} />
          <span style={{ fontSize: 11, fontWeight: 600, color: statusColor, letterSpacing: 0.3, textTransform: 'uppercase' }}>
            {driver.busy ? 'Busy' : 'Available'}
          </span>
        </div>
        <div style={{ fontSize: 12, color: KARE.n500, display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ fontFamily: "'JetBrains Mono', monospace" }} dir="ltr">{driver.plate}</span>
          <span style={{ color: KARE.n300 }}>·</span>
          <span>{driver.vehicle}</span>
          <span style={{ color: KARE.n300 }}>·</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}><IPhone/> <span style={{ fontFamily: "'Inter', sans-serif" }} dir="ltr">{driver.phone}</span></span>
        </div>
      </div>
      <div style={{
        fontSize: 11, fontWeight: 600,
        color: driver.todayCount >= 5 ? KARE.warning : KARE.n700,
        padding: '4px 10px', borderRadius: 999,
        border: `1px solid ${KARE.n300}`, background: KARE.n000,
      }}>오늘 {driver.todayCount}건</div>
    </div>
  );
}

const DRIVERS = [
  { id: 'D1', initials: 'LM', name: 'Lee Min-jae',   plate: '34나 5678', vehicle: 'Carnival',    phone: '+82 10-3210-9921', todayCount: 2, busy: false },
  { id: 'D2', initials: 'PH', name: 'Park Hye-jin',  plate: '22라 1199', vehicle: 'Sedan (K9)',  phone: '+82 10-7722-4410', todayCount: 3, busy: false },
  { id: 'D3', initials: 'CJ', name: 'Choi Jun-woo',  plate: '57마 0021', vehicle: 'Carnival',    phone: '+82 10-5531-0820', todayCount: 5, busy: false },
];

/* -------- Reason textarea -------- */
function ReasonTextarea() {
  return (
    <div style={drStyles.section}>
      <div style={drStyles.secTitle}>변경 사유 <span style={{ textTransform: 'none', fontWeight: 400, color: KARE.n500, marginLeft: 4 }}>(선택)</span></div>
      <textarea
        placeholder="변경 사유를 입력하면 사용자 알림에 참고됩니다."
        style={{
          width: '100%', height: 84, padding: 12, borderRadius: 6,
          border: `1px solid ${KARE.n300}`, outline: 'none', resize: 'none',
          fontSize: 13, fontFamily: FONT, color: KARE.n900, lineHeight: 1.5, background: KARE.n000,
        }}
      />
    </div>
  );
}

/* -------- Modal variants -------- */
function ReassignDefault() {
  return (
    <ModalFrame title="기사 배정 변경" footerRight={
      <>
        <button style={drStyles.btnG}>취소 <span style={{ fontSize: 10, color: KARE.n500, marginLeft: 4, fontFamily: "'JetBrains Mono', monospace" }}>BTN-018</span></button>
        <button style={drStyles.btnP}>변경 확정</button>
      </>
    }>
      <BookingSummary />
      <div style={drStyles.section}>
        <div style={drStyles.secTitle}>현재 배정 기사</div>
        <CurrentDriver />
      </div>
      <div style={drStyles.section}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={drStyles.secTitle}>가용 기사 선택 · 3명</div>
          <span style={{ fontSize: 12, color: KARE.n500 }}>상태 기준 <span style={{ color: KARE.n300 }}>·</span> 2026-04-28 기준</span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {DRIVERS.map((d, i) => <DriverRow key={d.id} driver={d} selected={i === 1} />)}
        </div>
      </div>
      <ReasonTextarea />
    </ModalFrame>
  );
}

function ReassignNoDrivers() {
  return (
    <ModalFrame title="기사 배정 변경" footerRight={
      <>
        <button style={drStyles.btnG}>취소</button>
        <button style={drStyles.btnPDisabled} disabled>변경 확정</button>
      </>
    }>
      <BookingSummary />
      <div style={drStyles.section}>
        <div style={drStyles.secTitle}>현재 배정 기사</div>
        <CurrentDriver />
      </div>
      <div style={drStyles.section}>
        <div style={drStyles.secTitle}>가용 기사 선택</div>
        <div style={{
          padding: '40px 20px', borderRadius: 8, border: `1px dashed ${KARE.n300}`,
          background: KARE.n000,
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
        }}>
          <div style={{
            width: 40, height: 40, borderRadius: 8, background: KARE.n100,
            display: 'flex', alignItems: 'center', justifyContent: 'center', color: KARE.n500,
          }}>
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/></svg>
          </div>
          <div style={{ fontSize: 14, color: KARE.n700, fontWeight: 500 }}>현재 배정 가능한 기사가 없습니다</div>
          <div style={{ fontSize: 12, color: KARE.n500, textAlign: 'center', lineHeight: 1.5 }}>
            해당 시간대 근무 기사가 모두 배정되어 있습니다. 스케줄 조정 후 다시 시도해주세요.
          </div>
        </div>
      </div>
      <ReasonTextarea />
    </ModalFrame>
  );
}

function ReassignImminent() {
  return (
    <ModalFrame title="기사 배정 변경" footerRight={
      <>
        <button style={drStyles.btnG}>취소</button>
        <button style={{ ...drStyles.btnP, background: KARE.warning }}>변경 확정 (재확인)</button>
      </>
    }>
      <div style={{
        padding: '12px 14px', borderRadius: 8,
        background: KARE.warningBg, border: `1px solid rgba(217,119,6,0.25)`,
        display: 'flex', alignItems: 'flex-start', gap: 10,
      }}>
        <I.warn size={18}/>
        <div style={{ flex: 1, fontSize: 13, color: KARE.n900, lineHeight: 1.5 }}>
          <div style={{ fontWeight: 600, color: KARE.warning }}>픽업 임박 · D-day 45분 후</div>
          변경 시 고객 혼선이 발생할 수 있습니다. 진행 전 고객과 직접 확인을 권장합니다.
        </div>
      </div>
      <BookingSummary />
      <div style={drStyles.section}>
        <div style={drStyles.secTitle}>현재 배정 기사</div>
        <CurrentDriver />
      </div>
      <div style={drStyles.section}>
        <div style={drStyles.secTitle}>가용 기사 선택 · 2명</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {DRIVERS.slice(0,2).map((d, i) => <DriverRow key={d.id} driver={d} selected={i === 0} />)}
        </div>
      </div>
      <ReasonTextarea />
    </ModalFrame>
  );
}

/* Reconfirm popup (shown after "변경 확정" on imminent) */
function ReassignReconfirmPopup() {
  return (
    <div style={{
      position: 'absolute', inset: 0, background: 'rgba(17,24,39,0.55)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 20,
    }}>
      <div style={{
        width: 440, background: KARE.n000, borderRadius: 12,
        boxShadow: KARE.shadowLg, overflow: 'hidden',
      }}>
        <div style={{ padding: '20px 24px 0' }}>
          <div style={{
            width: 40, height: 40, borderRadius: 999, background: KARE.warningBg,
            color: KARE.warning, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            marginBottom: 14,
          }}>
            <I.warn size={20}/>
          </div>
          <div style={{ fontSize: 17, fontWeight: 600, color: KARE.n900, marginBottom: 6 }}>
            정말 지금 기사를 변경하시겠습니까?
          </div>
          <div style={{ fontSize: 13, color: KARE.n700, lineHeight: 1.6 }}>
            픽업 시각까지 <span style={{ fontWeight: 600, color: KARE.warning }}>45분</span> 남았습니다. 고객에게 즉시 알림이 발송되며 이전 기사는 자동 해제됩니다.
          </div>
          <div style={{
            marginTop: 14, padding: 12, background: KARE.n100, borderRadius: 6,
            fontSize: 12, color: KARE.n700, display: 'flex', flexDirection: 'column', gap: 4,
          }}>
            <div><span style={{ color: KARE.n500, marginRight: 6 }}>변경 전</span>Kim Seong-ho · <span style={{ fontFamily: "'JetBrains Mono', monospace" }}>12가 3456</span></div>
            <div><span style={{ color: KARE.n500, marginRight: 6 }}>변경 후</span>Lee Min-jae · <span style={{ fontFamily: "'JetBrains Mono', monospace" }}>34나 5678</span></div>
          </div>
        </div>
        <div style={{
          padding: '14px 24px', marginTop: 20,
          display: 'flex', justifyContent: 'flex-end', gap: 8,
          background: KARE.n100,
        }}>
          <button style={drStyles.btnG}>취소</button>
          <button style={{ ...drStyles.btnP, background: KARE.warning }}>지금 변경</button>
        </div>
      </div>
    </div>
  );
}

/* -------- Shared modal frame -------- */
function ModalFrame({ title, children, footerRight }) {
  return (
    <div style={{
      width: 720, background: KARE.n000, borderRadius: 12,
      boxShadow: KARE.shadowLg, display: 'flex', flexDirection: 'column',
      maxHeight: '92%', overflow: 'hidden',
    }}>
      <div style={drStyles.header}>
        <h2 style={drStyles.h2}>{title}</h2>
        <span style={drStyles.close}>×</span>
      </div>
      <div style={drStyles.body}>{children}</div>
      <div style={drStyles.footer}>
        <span style={{ fontSize: 11, color: KARE.n500 }}>변경 내역은 파트너 감사 로그에 기록됩니다.</span>
        <div style={{ display: 'flex', gap: 8 }}>{footerRight}</div>
      </div>
    </div>
  );
}

/* -------- Composed scenes (modal over PW-004 confirmed) -------- */
function SceneWith({ modal, popup }) {
  return (
    <div style={{ position: 'relative', width: 1280 }}>
      <MainLayout sidebarActive="booking">
        <BookingDetailBody variant="confirmed" />
      </MainLayout>
      <div style={{
        position: 'absolute', inset: 0, background: 'rgba(17,24,39,0.5)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 10,
      }}>
        {modal}
      </div>
      {popup}
    </div>
  );
}

function DriverReassignDefault()   { return <SceneWith modal={<ReassignDefault />}  />; }
function DriverReassignNoDrivers() { return <SceneWith modal={<ReassignNoDrivers />} />; }
function DriverReassignImminent()  { return <SceneWith modal={<ReassignImminent />} />; }
function DriverReassignReconfirm() { return <SceneWith modal={<ReassignImminent />} popup={<ReassignReconfirmPopup />} />; }

Object.assign(window, {
  DriverReassignDefault, DriverReassignNoDrivers,
  DriverReassignImminent, DriverReassignReconfirm,
});