/**
 * SatelliteRequest.tsx 디자인 시스템 적용 스크립트
 * 실행: node scripts/fix-satellite-request.mjs
 */
import { readFileSync, writeFileSync } from 'fs';
import { fileURLToPath } from 'url';
import { dirname, resolve } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const filePath = resolve(__dirname, '../frontend/src/tabs/aerial/components/SatelliteRequest.tsx');
let src = readFileSync(filePath, 'utf-8');

// ────────────────────────────────────────────────────
// 작업 1: UI 개선
// ────────────────────────────────────────────────────

// 1-1. stats 배열 color 필드 제거
src = src.replace(
  `const stats = [
    { value: '3', label: '요청 대기', color: 'var(--color-info)' },
    { value: '1', label: '촬영 진행 중', color: 'var(--color-caution)' },
    { value: '7', label: '수신 완료', color: 'var(--color-success)' },
    { value: '0.5m', label: '최고 해상도', color: 'var(--color-accent)' },
  ];`,
  `const stats = [
    { value: '3', label: '요청 대기' },
    { value: '1', label: '촬영 진행 중' },
    { value: '7', label: '수신 완료' },
    { value: '0.5m', label: '최고 해상도' },
  ];`
);

// 1-1. stats 값 div: style color 제거, text-fg 추가
src = src.replace(
  `<div className="text-[22px] font-bold font-mono" style={{ color: s.color }}>`,
  `<div className="text-[22px] font-bold font-mono text-fg">`
);

// 1-2. 예상수신 컬럼 style 제거
src = src.replace(
  `                  <div
                    className="text-caption font-semibold font-mono"
                    style={{
                      color: r.status === '촬영중' ? 'var(--color-caution)' : 'var(--fg-sub)',
                    }}
                  >
                    {r.expectedReceive}
                  </div>`,
  `                  <div className="text-caption font-mono text-fg">
                    {r.expectedReceive}
                  </div>`
);

// 1-2. 해상도 컬럼 style 제거
src = src.replace(
  `                  <div
                    className="text-label-2 font-bold font-mono"
                    style={{
                      color: r.status === '완료' ? 'var(--fg-disabled)' : 'var(--color-accent)',
                    }}
                  >
                    {r.resolution}
                  </div>`,
  `                  <div className="text-label-2 font-mono text-fg">
                    {r.resolution}
                  </div>`
);

// 1-3. statusBadge 아이콘 제거
src = src.replace(`          ⏳ 대기`, `          대기`);
src = src.replace(`          ✕ 취소`, `          취소`);
src = src.replace(`        ✅ 완료`, `        완료`);

// 1-4. 촬영 가능 시간 스타일 변경
src = src.replace(
  `              <div className="flex flex-col gap-1.5">
                {passSchedules.map((ps, i) => (
                  <div
                    key={i}
                    className="flex items-center gap-2 px-2.5 py-[7px] rounded-[5px]"
                    style={{
                      background: ps.today ? 'rgba(34,197,94,.05)' : 'rgba(59,130,246,.05)',
                      border: ps.today
                        ? '1px solid rgba(34,197,94,.15)'
                        : '1px solid rgba(59,130,246,.15)',
                    }}
                  >
                    <span
                      className="text-caption font-bold font-mono min-w-[90px]"
                      style={{ color: ps.today ? 'var(--color-accent)' : 'var(--color-info)' }}
                    >
                      {ps.time}
                    </span>
                    <span className="text-caption text-fg font-korean">{ps.desc}</span>
                  </div>
                ))}`,
  `              <div className="flex flex-col gap-1.5">
                {passSchedules.map((ps, i) => (
                  <div
                    key={i}
                    className="flex items-center gap-2.5 px-3 py-2 bg-bg-card rounded-md"
                    style={{ border: '1px solid var(--stroke-default)' }}
                  >
                    <span
                      className={\`text-label-2 font-semibold font-mono min-w-[90px] \${ps.today ? 'text-color-accent' : 'text-fg'}\`}
                    >
                      {ps.time}
                    </span>
                    <span className="text-caption text-fg-disabled font-korean">{ps.desc}</span>
                  </div>
                ))}`
);

// ────────────────────────────────────────────────────
// 작업 2: rgba 비-accent → color-mix 전환
// ────────────────────────────────────────────────────

// 제외 구간 마킹: up42Satellites 배열 (L181-310 범위)은 보호
// 전략: 배열 부분을 임시 플레이스홀더로 치환 → bulk 작업 → 복원

const UP42_PLACEHOLDER = '___UP42_SATELLITES_PLACEHOLDER___';

const up42StartMarker = '// UP42 위성 카탈로그 데이터\nconst up42Satellites = [';
const up42EndMarker = '];\n\n// up42Passes';

const up42Start = src.indexOf(up42StartMarker);
const up42End = src.indexOf(up42EndMarker) + up42EndMarker.length;

if (up42Start === -1 || up42End === -1) {
  console.error('up42Satellites 배열을 찾지 못했습니다. 스크립트를 중단합니다.');
  process.exit(1);
}

const up42Block = src.slice(up42Start, up42End);
src = src.slice(0, up42Start) + UP42_PLACEHOLDER + src.slice(up42End);

// --- rgba → color-mix 전환 ---
// 매핑 함수
function pct(alpha) {
  // alpha: 문자열 (예: ".15", "0.15", ".5", "0.5")
  const n = parseFloat(alpha);
  return Math.round(n * 100) + '%';
}

// 정규식 패턴: rgba(R,G,B,A) 형태를 매칭 (공백 허용)
// 각 색상별로 처리

// rgba(59,130,246,N) → info
src = src.replace(/rgba\(59,\s*130,\s*246,\s*([\d.]+)\)/g, (match, alpha) => {
  return `color-mix(in srgb, var(--color-info) ${pct(alpha)}, transparent)`;
});

// rgba(99,102,241,N) → info (보라 계열도 info로)
src = src.replace(/rgba\(99,\s*102,\s*241,\s*([\d.]+)\)/g, (match, alpha) => {
  return `color-mix(in srgb, var(--color-info) ${pct(alpha)}, transparent)`;
});

// rgba(34,197,94,N) → success
src = src.replace(/rgba\(34,\s*197,\s*94,\s*([\d.]+)\)/g, (match, alpha) => {
  return `color-mix(in srgb, var(--color-success) ${pct(alpha)}, transparent)`;
});

// rgba(239,68,68,N) → danger
src = src.replace(/rgba\(239,\s*68,\s*68,\s*([\d.]+)\)/g, (match, alpha) => {
  return `color-mix(in srgb, var(--color-danger) ${pct(alpha)}, transparent)`;
});

// rgba(234,179,8,N) → caution
src = src.replace(/rgba\(234,\s*179,\s*8,\s*([\d.]+)\)/g, (match, alpha) => {
  return `color-mix(in srgb, var(--color-caution) ${pct(alpha)}, transparent)`;
});

// rgba(100,116,139,N) → fg-disabled
src = src.replace(/rgba\(100,\s*116,\s*139,\s*([\d.]+)\)/g, (match, alpha) => {
  return `color-mix(in srgb, var(--fg-disabled) ${pct(alpha)}, transparent)`;
});

// Tailwind className 내 변환
// border-[rgba(59,130,246,.3)] → border-[rgba(6,182,212,0.3)]
src = src.replace(/border-\[rgba\(59,130,246,\.3\)\]/g, 'border-[rgba(6,182,212,0.3)]');
src = src.replace(/hover:border-\[rgba\(59,130,246,\.5\)\]/g, 'hover:border-[rgba(6,182,212,0.4)]');
src = src.replace(/hover:bg-\[rgba\(59,130,246,\.04\)\]/g, 'hover:bg-[rgba(6,182,212,0.04)]');

// className 내 border-[rgba(99,102,241,...)] 는 그대로 유지 (위성 식별용이 아닌 UI 요소)
// → 이미 위 정규식으로 style 속성 내는 변환됨. className 내의 것은 별도 처리
src = src.replace(/border-\[rgba\(99,102,241,\.3\)\]/g, 'border-[rgba(6,182,212,0.3)]');
src = src.replace(/hover:border-\[rgba\(99,102,241,\.5\)\]/g, 'hover:border-[rgba(6,182,212,0.4)]');
src = src.replace(/hover:bg-\[rgba\(99,102,241,\.04\)\]/g, 'hover:bg-[rgba(6,182,212,0.04)]');

// up42 블록 복원
src = src.replace(UP42_PLACEHOLDER, up42Block);

// ────────────────────────────────────────────────────
// 작업 3: 나머지 하드코딩 색상
// ────────────────────────────────────────────────────

// urgency '예정' color: '#06b6d4' → 'var(--color-accent)'
// L2122 근처: urgency === '예정' ? '#06b6d4' 패턴
src = src.replace(
  `                        ? '#06b6d4'`,
  `                        ? 'var(--color-accent)'`
);

// UP42 제출 버튼 전체 변경 (color '#fff' → 'var(--color-accent)', boxShadow 제거)
src = src.replace(
  `                    <button
                      onClick={() => setModalPhase('none')}
                      className="px-6 py-2 rounded-lg text-label-2 font-bold cursor-pointer font-korean text-color-accent transition-opacity"
                      style={{
                        background: up42SelSat ? 'rgba(6,182,212,0.08)' : 'var(--stroke-light)',
                        opacity: up42SelSat ? 1 : 0.5,
                        color: up42SelSat ? '#fff' : 'var(--fg-disabled)',
                        boxShadow: up42SelSat ? '0 4px 16px rgba(59,130,246,.35)' : 'none',
                      }}
                    >`,
  `                    <button
                      onClick={() => setModalPhase('none')}
                      className="px-6 py-2 rounded-lg text-label-2 font-bold cursor-pointer font-korean text-color-accent transition-opacity"
                      style={{
                        background: up42SelSat ? 'rgba(6,182,212,0.08)' : 'var(--stroke-light)',
                        opacity: up42SelSat ? 1 : 0.5,
                        color: up42SelSat ? 'var(--color-accent)' : 'var(--fg-disabled)',
                      }}
                    >`
);

// BlackSky 제출 버튼 boxShadow 제거
src = src.replace(
  `                    style={{
                      background: 'rgba(6,182,212,0.08)',
                      boxShadow: '0 4px 16px color-mix(in srgb, var(--color-info) 35%, transparent)',
                    }}`,
  `                    style={{
                      background: 'rgba(6,182,212,0.08)',
                    }}`
);

// text-blue-500 → text-color-info (2곳: L1908, L2129)
src = src.replace(/className="text-label-1 text-blue-500"/g, 'className="text-label-1 text-color-info"');
src = src.replace(/className="text-xs text-blue-500"/g, 'className="text-xs text-color-info"');

// text-green-500 → text-color-success (L1243, L1306, L1468)
src = src.replace(/className="([^"]*)\btext-green-500\b([^"]*)"/g, (match, before, after) => {
  return `className="${before}text-color-success${after}"`;
});

// text-red-400 → text-color-danger
src = src.replace(/className="([^"]*)\btext-red-400\b([^"]*)"/g, (match, before, after) => {
  return `className="${before}text-color-danger${after}"`;
});

// ────────────────────────────────────────────────────
// 결과 저장
// ────────────────────────────────────────────────────
writeFileSync(filePath, src, 'utf-8');
console.log('✅ SatelliteRequest.tsx 변환 완료');