"use client";

import type { ReactNode } from "react";
import { Rocket } from "lucide-react";
import { BranchSelect, StatusSelect, QuickActions, DeploymentTimeline, DomainTable, EnvPanel, OPT_TEXT_PRIMARY, OPT_TEXT_SECONDARY, SurfaceLayout } from "@reopt-ai/opt-ui";
import type { BranchDef, SelectOption, DeploymentStep, DomainDef, EnvGroupDef, QuickActionDef } from "@reopt-ai/opt-ui";

/** Localized labels for the deployment center component. */
export interface DeploymentCenterLabels {
  branch?: string;
  status?: string;
  quickActions?: string;
  deployments?: string;
  domains?: string;
  env?: string;
  emptyTitle?: string;
  emptyDescription?: string;
}

const defaultLabels: Required<DeploymentCenterLabels> = {
  branch: "브랜치",
  status: "상태",
  quickActions: "빠른 작업",
  deployments: "배포 이력",
  domains: "도메인",
  env: "환경 변수",
  emptyTitle: "배포 센터가 비어 있습니다",
  emptyDescription: "브랜치, 배포, 도메인, 또는 환경 변수 데이터를 전달하세요.",
};

/** Props for the deployment center component. */
export interface DeploymentCenterProps {
  // 선택 데이터
  branches?: BranchDef[];
  statusOptions?: SelectOption[];

  // 표시 데이터
  deployments?: DeploymentStep[];
  domains?: DomainDef[];
  envGroups?: EnvGroupDef[];
  quickActions?: QuickActionDef[];

  // 상태 관리 (제어 컴포넌트)
  selectedBranch?: string;
  onBranchChange?: (branch: string) => void;
  selectedStatus?: string;
  onStatusChange?: (status: string) => void;

  // 섹션 제목 (i18n)
  labels?: DeploymentCenterLabels;

  // 확장 슬롯
  header?: ReactNode;
  className?: string;
  loading?: boolean;
}

/** Renders the deployment center component. */
export function DeploymentCenter({
  branches,
  statusOptions,
  deployments,
  domains,
  envGroups,
  quickActions,
  selectedBranch,
  onBranchChange,
  selectedStatus,
  onStatusChange,
  labels: customLabels,
  header,
  className,
  loading = false,
}: DeploymentCenterProps) {
  const labels = { ...defaultLabels, ...customLabels };

  const hasSelectors = branches || statusOptions;
  const hasQuickActions = quickActions && quickActions.length > 0;
  const hasDeployments = deployments && deployments.length > 0;
  const hasDomains = domains && domains.length > 0;
  const hasMainContent = hasDeployments || hasDomains;
  const hasEnvGroups = envGroups && envGroups.length > 0;

  const isEmpty =
    !hasSelectors &&
    !hasQuickActions &&
    !hasDeployments &&
    !hasDomains &&
    !hasEnvGroups;

  return (
    <SurfaceLayout
      loading={loading}
      className={className}
      data-opt-id="8Q888"
      data-opt-slug="deployment-center.DeploymentCenter"
    >
      {/* 헤더 */}
      {header && <div>{header}</div>}

      {/* 선택 영역 */}
      {hasSelectors && (
        <div className="gap-group flex flex-wrap items-end">
          {branches && branches.length > 0 && (
            <BranchSelect
              branches={branches}
              value={selectedBranch}
              onChange={onBranchChange}
              label={labels.branch}
            />
          )}
          {statusOptions && statusOptions.length > 0 && (
            <StatusSelect
              options={statusOptions}
              value={selectedStatus}
              onChange={onStatusChange}
              label={labels.status}
            />
          )}
        </div>
      )}

      {/* 빠른 작업 */}
      {hasQuickActions && (
        <section aria-label={labels.quickActions}>
          <QuickActions
            actions={quickActions}
            title={labels.quickActions}
            layout="grid"
            columns={3}
          />
        </section>
      )}

      {/* 메인 콘텐츠 (2컬럼) */}
      {hasMainContent && (
        <div className="gap-section grid lg:grid-cols-2">
          {hasDeployments && (
            <section
              className="border-border rounded-xl border p-4"
              aria-label={labels.deployments}
            >
              <DeploymentTimeline
                steps={deployments}
                title={labels.deployments}
              />
            </section>
          )}
          {hasDomains && (
            <section
              className="border-border rounded-xl border p-4"
              aria-label={labels.domains}
            >
              <DomainTable domains={domains} title={labels.domains} />
            </section>
          )}
        </div>
      )}

      {/* 환경 변수 */}
      {hasEnvGroups && (
        <section
          className="border-border rounded-xl border p-4"
          aria-label={labels.env}
        >
          <h3 className={`mb-4 text-lg font-semibold ${OPT_TEXT_PRIMARY}`}>
            {labels.env}
          </h3>
          <EnvPanel groups={envGroups} />
        </section>
      )}

      {/* 빈 상태 */}
      {isEmpty && (
        <div
          role="status"
          className="flex flex-col items-center justify-center py-16 text-center"
        >
          <Rocket className="mb-4 size-10" aria-hidden />
          <h3 className={`text-lg font-medium ${OPT_TEXT_PRIMARY}`}>
            {labels.emptyTitle}
          </h3>
          <p className={`mt-1 text-sm ${OPT_TEXT_SECONDARY}`}>
            {labels.emptyDescription}
          </p>
        </div>
      )}
    </SurfaceLayout>
  );
}