import Link from "next/link";
import { KavenixGoogleSearchConsoleSyncButton } from "@/components/kavenix-google-search-console-sync-button";
import { BLOG_CONTENT_IDEAS } from "@/lib/blog-growth";
import type { GoogleSearchConsoleAnalytics } from "@/lib/google-search-console";

const X_PADDING = "px-3 sm:px-4 lg:px-8";

function formatDateTime(value: string | null) {
  if (!value) {
    return "아직 동기화되지 않았습니다.";
  }

  return new Intl.DateTimeFormat("ko-KR", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  }).format(new Date(value));
}

function formatShortDate(value: string) {
  const [, month, day] = value.split("-");
  return `${Number(month)}.${Number(day)}`;
}

function formatPercent(value: number) {
  return `${(value * 100).toFixed(1)}%`;
}

function formatPosition(value: number) {
  return value > 0 ? value.toFixed(1) : "-";
}

function statusMessage(status: string | null) {
  if (status === "connected") {
    return "Google Search Console을 연결했습니다. 최근 확정 데이터부터 자동 수집합니다.";
  }

  if (status === "site-access") {
    return "연결한 Google 계정에 https://officialsite.kr/ URL 속성 권한이 없습니다. 소유자 또는 전체 권한 계정으로 다시 연결해 주세요.";
  }

  if (status === "denied") {
    return "Google 계정 권한 승인이 취소되었습니다.";
  }

  if (status === "not-configured") {
    return "Google Cloud OAuth 앱 설정 후 연결할 수 있습니다.";
  }

  if (status === "connection-error" || status === "invalid-state") {
    return "연결 처리에 실패했습니다. OAuth 콜백 URL과 Search Console 속성 권한을 확인해 주세요.";
  }

  if (status === "forbidden") {
    return "최고관리자 계정에서만 Google Search Console을 연결할 수 있습니다.";
  }

  return null;
}

function changeLabel(
  current: number,
  previous: number,
  options: { percent?: boolean; reverse?: boolean } = {},
) {
  if (previous <= 0) {
    return null;
  }

  const rawChange = options.percent
    ? (current - previous) * 100
    : ((current - previous) / previous) * 100;
  const positive = options.reverse ? rawChange < 0 : rawChange > 0;
  const prefix = rawChange > 0 ? "+" : "";

  return {
    label: `${prefix}${rawChange.toFixed(1)}%`,
    positive,
  };
}

function MetricRail({ analytics }: { analytics: GoogleSearchConsoleAnalytics }) {
  const hasComparison = analytics.dataWindow.previousAvailableDays > 0;
  const items: Array<{
    current: number;
    label: string;
    options?: { percent?: boolean; reverse?: boolean };
    previous: number;
    value: string;
  }> = [
    {
      current: analytics.metrics.clicks,
      label: "검색 클릭",
      previous: analytics.previousMetrics.clicks,
      value: analytics.metrics.clicks.toLocaleString("ko-KR"),
    },
    {
      current: analytics.metrics.impressions,
      label: "노출",
      previous: analytics.previousMetrics.impressions,
      value: analytics.metrics.impressions.toLocaleString("ko-KR"),
    },
    {
      current: analytics.metrics.ctr,
      label: "평균 클릭률",
      options: { percent: true },
      previous: analytics.previousMetrics.ctr,
      value: formatPercent(analytics.metrics.ctr),
    },
    {
      current: analytics.metrics.position,
      label: "평균 게재순위",
      options: { reverse: true },
      previous: analytics.previousMetrics.position,
      value: formatPosition(analytics.metrics.position),
    },
  ];

  return (
    <div className="border-b border-[#edf1f6]">
      <div className={`grid grid-cols-2 sm:grid-cols-4 ${X_PADDING}`}>
        {items.map((item, index) => {
          const change = hasComparison
            ? changeLabel(item.current, item.previous, item.options)
            : null;

          return (
            <div
              key={item.label}
              className={`min-w-0 py-4 ${
                index % 2 === 1 ? "border-l border-[#edf2fb] pl-3 sm:pl-4 lg:pl-6" : "pr-3 sm:pr-4 lg:pr-6"
              } ${index >= 2 ? "border-t border-[#edf2fb] sm:border-t-0" : ""} ${index === 2 ? "sm:border-l sm:border-[#edf2fb] sm:pl-4 lg:pl-6" : ""}`}
            >
              <p className="text-[12px] font-medium text-[#7c879b]">{item.label}</p>
              <div className="mt-1.5 flex items-baseline gap-2">
                <p className="text-[24px] font-semibold tracking-[-0.05em] text-[#16233c]">{item.value}</p>
                {change ? (
                  <span className={`text-[10px] font-semibold ${change.positive ? "text-[#2f9b62]" : "text-[#c96262]"}`}>
                    {change.label}
                  </span>
                ) : null}
              </div>
              <p className="mt-1 text-[11px] text-[#7183a1]">
                {hasComparison ? `직전 ${analytics.rangeDays}일 대비` : "비교 기간 데이터 수집 중"}
              </p>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function RangeTabs({ rangeDays }: { rangeDays: GoogleSearchConsoleAnalytics["rangeDays"] }) {
  return (
    <div className="inline-flex rounded-[9px] border border-[#dfe7f4] bg-[#f7f9fc] p-0.5">
      {([7, 28, 90] as const).map((days) => (
        <Link
          key={days}
          href={`/kavenix?view=search&searchRange=${days}`}
          className={`inline-flex h-7 items-center rounded-[7px] px-2.5 text-[11px] font-semibold transition-colors ${
            days === rangeDays
              ? "bg-white text-[#2f6df6] shadow-[0_1px_4px_rgba(26,45,78,0.08)]"
              : "text-[#7a89a2] hover:text-[#405576]"
          }`}
        >
          {days}일
        </Link>
      ))}
    </div>
  );
}

function Diagnosis({ analytics }: { analytics: GoogleSearchConsoleAnalytics }) {
  const items = [
    {
      detail: `${analytics.dataWindow.availableDays}/${analytics.dataWindow.expectedDays}일`,
      label: "성과 데이터",
      status: analytics.dataWindow.availableDays >= analytics.dataWindow.expectedDays ? "수집 완료" : "백필 진행 중",
      tone: analytics.dataWindow.availableDays >= analytics.dataWindow.expectedDays ? "good" : "warn",
    },
    {
      detail: `비브랜드 노출 ${analytics.brandPerformance.nonBranded.impressions.toLocaleString("ko-KR")}회`,
      label: "신규 검색 유입",
      status: analytics.brandPerformance.nonBranded.impressions >= 20 ? "확장 중" : "확장 필요",
      tone: analytics.brandPerformance.nonBranded.impressions >= 20 ? "good" : "warn",
    },
    {
      detail: `${analytics.contentCoverage.indexedPosts}/${analytics.contentCoverage.publishedPosts}개 글`,
      label: "블로그 색인",
      status: analytics.contentCoverage.pendingPosts > 0 ? `미색인 ${analytics.contentCoverage.pendingPosts}개` : "정상",
      tone: analytics.contentCoverage.pendingPosts > 0 || analytics.contentCoverage.inspectionErrors > 0 ? "warn" : "good",
    },
    {
      detail: `${analytics.brandPerformance.hiddenClicks.toLocaleString("ko-KR")}회`,
      label: "익명 검색어 클릭",
      status: "Google 개인정보 보호",
      tone: "neutral",
    },
  ] as const;

  return (
    <section className="border-b border-[#edf1f6]">
      <div className={`border-b border-[#edf1f6] py-3 ${X_PADDING}`}>
        <h2 className="text-[14px] font-semibold tracking-[-0.03em] text-[#16233c]">현재 검색 상태 진단</h2>
        <p className="mt-1 text-[12px] leading-5 text-[#7284a4]">
          총 클릭과 검색어별 클릭은 익명 처리 때문에 다를 수 있습니다. 비브랜드 노출과 색인 범위를 성장 지표로 함께 보세요.
        </p>
      </div>
      <div className={`grid sm:grid-cols-2 xl:grid-cols-4 ${X_PADDING}`}>
        {items.map((item, index) => (
          <div key={item.label} className={`py-4 ${index > 0 ? "sm:border-l sm:border-[#edf2fb] sm:pl-5 xl:pl-6" : ""}`}>
            <div className="flex items-center gap-2">
              <p className="text-[12px] font-semibold text-[#536681]">{item.label}</p>
              <span className={`text-[10px] font-semibold ${
                item.tone === "good"
                  ? "text-[#2f9b62]"
                  : item.tone === "warn"
                    ? "text-[#d17835]"
                    : "text-[#8a97ab]"
              }`}>
                {item.status}
              </span>
            </div>
            <p className="mt-1.5 text-[18px] font-semibold tracking-[-0.04em] text-[#1d2e49]">{item.detail}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function PerformanceTrend({ analytics }: { analytics: GoogleSearchConsoleAnalytics }) {
  const maxImpressions = Math.max(1, ...analytics.dailyMetrics.map((row) => row.impressions));
  const minWidth = Math.max(520, analytics.dailyMetrics.length * 22);

  return (
    <section className="border-b border-[#edf1f6]">
      <div className={`flex items-end justify-between gap-3 border-b border-[#edf1f6] py-3 ${X_PADDING}`}>
        <div>
          <h2 className="text-[14px] font-semibold tracking-[-0.03em] text-[#16233c]">일별 노출 추세</h2>
          <p className="mt-1 text-[12px] text-[#7284a4]">막대는 노출, 파란 점은 클릭이 발생한 날짜입니다.</p>
        </div>
        <p className="shrink-0 text-[11px] text-[#8290a5]">{formatShortDate(analytics.dataWindow.startDate)}–{formatShortDate(analytics.dataWindow.endDate)}</p>
      </div>
      {analytics.dailyMetrics.length > 0 ? (
        <div className="overflow-x-auto">
          <div className={`flex h-[154px] items-end gap-1.5 pb-7 pt-5 ${X_PADDING}`} style={{ minWidth }}>
            {analytics.dailyMetrics.map((row, index) => {
              const height = Math.max(3, Math.round((row.impressions / maxImpressions) * 105));
              const showLabel = analytics.dailyMetrics.length <= 14 || index % Math.ceil(analytics.dailyMetrics.length / 8) === 0;

              return (
                <div
                  key={row.date}
                  className="group relative flex h-full min-w-[14px] flex-1 items-end justify-center"
                  title={`${row.date} · 노출 ${row.impressions} · 클릭 ${row.clicks} · 평균 ${formatPosition(row.position)}위`}
                >
                  <div className="relative w-full max-w-[22px] rounded-t-[3px] bg-[#dbe7fb] transition-colors group-hover:bg-[#bcd2fa]" style={{ height }}>
                    {row.clicks > 0 ? <span className="absolute -top-1 left-1/2 h-2 w-2 -translate-x-1/2 rounded-full bg-[#2f6df6] ring-2 ring-white" /> : null}
                  </div>
                  {showLabel ? <span className="absolute -bottom-5 whitespace-nowrap text-[9px] text-[#8b98ac]">{formatShortDate(row.date)}</span> : null}
                </div>
              );
            })}
          </div>
        </div>
      ) : (
        <p className={`${X_PADDING} py-8 text-[13px] text-[#7284a4]`}>동기화 후 일별 추세가 표시됩니다.</p>
      )}
    </section>
  );
}

function ActionQueue({ analytics }: { analytics: GoogleSearchConsoleAnalytics }) {
  const kindLabels = {
    "create-content": "신규 콘텐츠",
    "improve-ctr": "CTR 개선",
    "improve-position": "검색군 강화",
  } as const;

  return (
    <section className="border-b border-[#edf1f6]">
      <div className={`flex flex-col justify-between gap-2 border-b border-[#edf1f6] py-3 sm:flex-row sm:items-end ${X_PADDING}`}>
        <div>
          <h2 className="text-[14px] font-semibold tracking-[-0.03em] text-[#16233c]">검색 데이터 기반 우선순위</h2>
          <p className="mt-1 text-[12px] leading-5 text-[#7284a4]">유사 검색어를 검색 의도별로 합산하고, 낮은 표본은 실행 항목에서 제외합니다.</p>
        </div>
        <span className="text-[11px] font-semibold text-[#7183a1]">{analytics.rangeDays}일 기준 · 최대 12개</span>
      </div>
      {analytics.actionItems.length > 0 ? (
        <div className="divide-y divide-[#edf1f6]">
          {analytics.actionItems.map((action) => {
            const href = action.editPostId
              ? `/kavenix?view=blog&postId=${action.editPostId}`
              : action.kind === "create-content" || !action.page
                ? `/kavenix?view=blog&newQuery=${encodeURIComponent(action.query)}`
                : action.page;
            const buttonLabel = action.editPostId
              ? "글 보강하기"
              : action.kind === "create-content" || !action.page
                ? "초안 만들기"
                : "페이지 확인";

            return (
              <article key={action.id} className={`grid gap-4 py-4 sm:grid-cols-[140px_minmax(0,1fr)_auto] sm:items-start ${X_PADDING}`}>
                <div className="flex flex-wrap items-center gap-2">
                  <span className={`rounded-full px-2.5 py-1 text-[10px] font-semibold ${action.priority === "high" ? "bg-[#fff1f1] text-[#c84d4d]" : "bg-[#edf4ff] text-[#2f6df6]"}`}>
                    {action.priority === "high" ? "우선" : "일반"}
                  </span>
                  <span className="text-[11px] font-semibold text-[#6d7f9d]">{kindLabels[action.kind]}</span>
                </div>
                <div className="min-w-0">
                  <h3 className="text-[14px] font-semibold tracking-[-0.025em] text-[#263a5a]">{action.title}</h3>
                  <p className="mt-1.5 text-[12px] leading-5 text-[#7183a1]">{action.description}</p>
                  <div className="mt-2 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-[#8190a6]">
                    <span title={action.queries.join(", ")}>검색어군 {action.query}</span>
                    {action.queries.length > 1 ? <span>{action.queries.length}개 검색어 합산</span> : null}
                    <span>노출 {action.impressions.toLocaleString("ko-KR")}</span>
                    <span>클릭 {action.clicks.toLocaleString("ko-KR")}</span>
                    <span>CTR {formatPercent(action.ctr)}</span>
                    <span>평균 {formatPosition(action.position)}위</span>
                  </div>
                  {action.page ? <p className="mt-1.5 truncate text-[10px] text-[#99a5b6]" title={action.page}>노출 페이지 {pageLabel(action.page)}</p> : null}
                </div>
                <Link href={href} className="om-btn-secondary h-9 rounded-[9px] px-3 text-[11px] shadow-none">
                  {buttonLabel}
                </Link>
              </article>
            );
          })}
        </div>
      ) : (
        <div className={`${X_PADDING} py-6`}>
          <p className="text-[13px] leading-6 text-[#7284a4]">
            아직 반복 노출된 비브랜드 검색어가 없습니다. 아래 콘텐츠 후보를 실제 고객 질문 중심으로 발행하고 노출 데이터를 다시 확인하세요.
          </p>
        </div>
      )}
    </section>
  );
}

function pageLabel(value: string) {
  try {
    const url = new URL(value);
    return url.pathname || "/";
  } catch {
    return value;
  }
}

function PerformanceList({
  emptyText,
  heading,
  rows,
  type,
}: {
  emptyText: string;
  heading: string;
  rows: GoogleSearchConsoleAnalytics["topPages"] | GoogleSearchConsoleAnalytics["topQueries"];
  type: "page" | "query";
}) {
  return (
    <section className="min-w-0">
      <div className="border-b border-[#edf1f6] px-3 py-3 sm:px-4 lg:px-8">
        <h2 className="text-[14px] font-semibold tracking-[-0.03em] text-[#16233c]">{heading}</h2>
      </div>
      {rows.length > 0 ? (
        <div>
          {rows.map((row, index) => {
            const rawLabel = type === "page"
              ? (row as GoogleSearchConsoleAnalytics["topPages"][number]).page
              : (row as GoogleSearchConsoleAnalytics["topQueries"][number]).query;
            const label = type === "page" ? pageLabel(rawLabel) : rawLabel;

            return (
              <div key={`${rawLabel}-${index}`} className="border-b border-[#edf1f6] px-3 py-3 last:border-b-0 sm:px-4 lg:px-8">
                <div className="flex items-center gap-2">
                  <p className="min-w-0 flex-1 truncate text-[13px] font-medium text-[#30425f]" title={rawLabel}>{label}</p>
                  {type === "page" ? (
                    <a href={rawLabel} target="_blank" rel="noreferrer" className="shrink-0 text-[10px] font-semibold text-[#7d8da7] hover:text-[#2f6df6]">
                      열기
                    </a>
                  ) : null}
                </div>
                <div className="mt-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[11px] text-[#74849f]">
                  <span>클릭 {row.clicks.toLocaleString("ko-KR")}</span>
                  <span>노출 {row.impressions.toLocaleString("ko-KR")}</span>
                  <span>CTR {formatPercent(row.ctr)}</span>
                  <span>순위 {formatPosition(row.position)}</span>
                </div>
              </div>
            );
          })}
        </div>
      ) : (
        <p className="px-3 py-8 text-[13px] leading-6 text-[#7284a4] sm:px-4 lg:px-8">{emptyText}</p>
      )}
    </section>
  );
}

function OpportunityTable({ analytics }: { analytics: GoogleSearchConsoleAnalytics }) {
  return (
    <section className="border-b border-[#edf1f6]">
      <div className="border-b border-[#edf1f6] px-3 py-3 sm:px-4 lg:px-8">
        <h2 className="text-[14px] font-semibold tracking-[-0.03em] text-[#16233c]">비브랜드 개선 후보 검색어</h2>
        <p className="mt-1 text-[12px] text-[#7284a4]">노출 1회부터 확인하되, 반복 노출된 검색어만 실행 작업으로 승격합니다.</p>
      </div>
      {analytics.opportunityQueries.length > 0 ? (
        <div className="overflow-x-auto">
          <table className="w-full min-w-[620px] border-collapse text-left">
            <thead className="border-b border-[#edf1f6] text-[12px] font-semibold text-[#7c879b]">
              <tr>
                <th className="px-3 py-2.5 sm:px-4 lg:px-8">검색어</th>
                <th className="px-3 py-2.5 text-right">노출</th>
                <th className="px-3 py-2.5 text-right">클릭</th>
                <th className="px-3 py-2.5 text-right">CTR</th>
                <th className="px-3 py-2.5 text-right sm:px-4 lg:px-8">평균 순위</th>
              </tr>
            </thead>
            <tbody>
              {analytics.opportunityQueries.map((row) => (
                <tr key={row.query} className="border-b border-[#edf1f6] text-[13px] text-[#33445f] last:border-b-0">
                  <td className="max-w-[360px] truncate px-3 py-3 font-medium sm:px-4 lg:px-8" title={row.query}>{row.query}</td>
                  <td className="px-3 py-3 text-right">{row.impressions.toLocaleString("ko-KR")}</td>
                  <td className="px-3 py-3 text-right">{row.clicks.toLocaleString("ko-KR")}</td>
                  <td className="px-3 py-3 text-right">{formatPercent(row.ctr)}</td>
                  <td className="px-3 py-3 text-right font-semibold text-[#2f6df6] sm:px-4 lg:px-8">{formatPosition(row.position)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <p className="px-3 py-7 text-[13px] leading-6 text-[#7284a4] sm:px-4 lg:px-8">현재 기간에는 4~40위 구간의 비브랜드 검색어가 없습니다.</p>
      )}
    </section>
  );
}

function ContentRoadmap() {
  return (
    <section>
      <div className={`border-b border-[#edf1f6] py-3 ${X_PADDING}`}>
        <h2 className="text-[14px] font-semibold tracking-[-0.03em] text-[#16233c]">다음 콘텐츠 후보</h2>
        <p className="mt-1 text-[12px] leading-5 text-[#7284a4]">실제 DNS 연결과 메일 운영 문의에서 반복된 주제입니다. 대량 발행보다 완성도 높은 글을 순차 발행하세요.</p>
      </div>
      <div className="divide-y divide-[#edf1f6]">
        {BLOG_CONTENT_IDEAS.slice(0, 6).map((idea) => (
          <div key={idea.slug} className={`flex flex-col justify-between gap-3 py-3 sm:flex-row sm:items-center ${X_PADDING}`}>
            <div className="min-w-0">
              <div className="flex flex-wrap items-center gap-2">
                <span className="text-[10px] font-semibold text-[#2f6df6]">{idea.cluster}</span>
                <h3 className="text-[13px] font-semibold text-[#2c3f5d]">{idea.title}</h3>
              </div>
              <p className="mt-1 truncate text-[11px] text-[#7b8ba3]">{idea.description}</p>
            </div>
            <Link href={`/kavenix?view=blog&newQuery=${encodeURIComponent(idea.title)}`} className="shrink-0 text-[11px] font-semibold text-[#657996] hover:text-[#2f6df6]">
              초안 만들기
            </Link>
          </div>
        ))}
      </div>
    </section>
  );
}

export function KavenixGoogleSearchConsoleDashboard({
  analytics,
  status,
}: {
  analytics: GoogleSearchConsoleAnalytics;
  status: string | null;
}) {
  const message = statusMessage(status);

  if (!analytics.configured) {
    return (
      <div className="border-t border-[#edf1f6]">
        <div className={`${X_PADDING} py-6 sm:py-8`}>
          <p className="text-[15px] font-semibold text-[#16233c]">Google Search Console 연결 준비</p>
          <p className="mt-2 max-w-[700px] text-[13px] leading-6 text-[#6f809d]">
            Google Cloud OAuth 웹 클라이언트의 Client ID와 Client Secret을 서버 환경변수에 등록하면, 최고관리자 계정으로 Search Console 권한을 한 번 승인해 검색 성과를 자동 수집할 수 있습니다.
          </p>
          <div className="mt-5 border-y border-[#edf1f6] py-4 text-[12px] leading-6 text-[#536681]">
            <p><span className="font-semibold text-[#263a5a]">필수 환경변수</span> `GOOGLE_SEARCH_CONSOLE_CLIENT_ID`, `GOOGLE_SEARCH_CONSOLE_CLIENT_SECRET`</p>
            <p><span className="font-semibold text-[#263a5a]">대상 속성</span> `https://officialsite.kr/`</p>
            <p><span className="font-semibold text-[#263a5a]">OAuth 콜백</span> `https://mail.officialsite.kr/api/integrations/google-search-console/callback`</p>
          </div>
          {message ? <p className="mt-4 text-[12px] text-[#9a5e2e]">{message}</p> : null}
        </div>
      </div>
    );
  }

  if (!analytics.connection) {
    const reconnectRequired = analytics.reconnectRequired;

    return (
      <div className="border-t border-[#edf1f6]">
        <div className={`${X_PADDING} py-6 sm:py-8`}>
          <div className="flex flex-col justify-between gap-5 sm:flex-row sm:items-end">
            <div>
              <p className="text-[15px] font-semibold text-[#16233c]">
                {reconnectRequired ? "URL 접두어 속성으로 다시 연결하세요" : "Google Search Console을 연결하세요"}
              </p>
              <p className="mt-2 max-w-[650px] text-[13px] leading-6 text-[#6f809d]">
                {reconnectRequired
                  ? `기존 도메인 속성은 mail 등 서브도메인까지 포함합니다. ${analytics.targetSiteUrl} URL 접두어 속성으로 다시 인증하면 공개 사이트 데이터만 수집합니다.`
                  : `오피셜메일 공개 페이지의 검색 클릭, 노출, 검색어와 페이지 성과를 매일 수집합니다. 대상은 ${analytics.targetSiteUrl}이며 Google 계정 비밀번호는 저장하지 않습니다.`}
              </p>
            </div>
            <Link href="/api/integrations/google-search-console/authorize" className="om-btn-primary h-10 shrink-0 rounded-[10px] px-4 text-[13px] shadow-none">
              {reconnectRequired ? "URL 속성 다시 연결" : "Google 계정 연결"}
            </Link>
          </div>
          <p className="mt-5 border-t border-[#edf1f6] pt-4 text-[12px] leading-6 text-[#7284a4]">
            기존 도메인 속성 데이터는 재연결 시 제거되며, URL 속성의 데이터는 Google Search Console 확정 기준으로 보통 2~3일 뒤 반영됩니다.
          </p>
          {message ? <p className="mt-2 text-[12px] text-[#9a5e2e]">{message}</p> : null}
        </div>
      </div>
    );
  }

  return (
    <div className="border-t border-[#edf1f6]">
      <div className={`flex flex-col justify-between gap-4 border-b border-[#edf1f6] py-4 sm:flex-row sm:items-start ${X_PADDING}`}>
        <div className="min-w-0">
          <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
            <p className="truncate text-[14px] font-semibold text-[#16233c]">{analytics.connection.siteUrl}</p>
            <span className="om-badge om-badge-sm om-badge-success">연결됨</span>
          </div>
          <p className="mt-1.5 text-[12px] text-[#7284a4]">
            계정 {analytics.connection.accountEmail} · 마지막 수집 {formatDateTime(analytics.connection.lastSyncedAt)}
          </p>
          {analytics.connection.lastSyncError ? <p className="mt-2 text-[12px] text-[#bc4b55]">최근 오류: {analytics.connection.lastSyncError}</p> : null}
          {message ? <p className="mt-2 text-[12px] text-[#2f6df6]">{message}</p> : null}
        </div>
        <div className="flex items-start gap-2">
          <RangeTabs rangeDays={analytics.rangeDays} />
          <KavenixGoogleSearchConsoleSyncButton />
        </div>
      </div>

      <MetricRail analytics={analytics} />
      <Diagnosis analytics={analytics} />
      <PerformanceTrend analytics={analytics} />
      <ActionQueue analytics={analytics} />

      <div className="grid border-b border-[#edf1f6] lg:grid-cols-2">
        <PerformanceList type="query" heading="상위 검색어" rows={analytics.topQueries} emptyText="동기화 후 검색어 성과가 표시됩니다." />
        <div className="border-t border-[#edf1f6] lg:border-l lg:border-t-0">
          <PerformanceList type="page" heading="상위 유입 페이지" rows={analytics.topPages} emptyText="동기화 후 페이지 성과가 표시됩니다." />
        </div>
      </div>

      <OpportunityTable analytics={analytics} />
      <ContentRoadmap />
    </div>
  );
}