import type { ReactNode } from "react";
import { ChartColumn } from "lucide-react";
import { DashboardGrid, DeploymentTimeline, EnvPanel, SurfaceLayout, cn, OPT_TEXT_PRIMARY, OPT_TEXT_SECONDARY } from "@reopt-ai/opt-ui";
import type { StatCard as StatCardType, DeploymentStep, EnvGroupDef } from "@reopt-ai/opt-ui";

/** Localized labels for the project dashboard component. */
export interface ProjectDashboardLabels {
  stats?: string;
  deployments?: string;
  env?: string;
  emptyTitle?: string;
  emptyDescription?: string;
}

const defaultLabels: Required<ProjectDashboardLabels> = {
  stats: "프로젝트 통계",
  deployments: "최근 배포",
  env: "환경 변수",
  emptyTitle: "데이터가 없습니다",
  emptyDescription:
    "프로젝트 통계, 배포 이력, 환경 변수 중 하나 이상을 전달하세요.",
};

/** Props for the project dashboard component. */
export interface ProjectDashboardProps {
  stats?: StatCardType[];
  deployments?: DeploymentStep[];
  envGroups?: EnvGroupDef[];
  statsColumns?: number;
  statsTitle?: string;
  deploymentsTitle?: string;
  envTitle?: string;
  header?: ReactNode;
  actions?: ReactNode;
  /** Custom visualization section rendered below stats (e.g., TrendChart, CalendarHeatmap) */
  chartSection?: ReactNode;
  className?: string;
  loading?: boolean;
  labels?: ProjectDashboardLabels;
}

/** Renders the project dashboard component. */
export function ProjectDashboard({
  stats,
  deployments,
  envGroups,
  statsColumns = 3,
  statsTitle,
  deploymentsTitle,
  envTitle,
  header,
  actions,
  chartSection,
  className,
  loading = false,
  labels: customLabels,
}: ProjectDashboardProps) {
  const labels = { ...defaultLabels, ...customLabels };
  const hasStats = stats && stats.length > 0;
  const hasDeployments = deployments && deployments.length > 0;
  const hasEnvGroups = envGroups && envGroups.length > 0;

  return (
    <SurfaceLayout
      loading={loading}
      className={className}
      data-opt-id="3E50W"
      data-opt-slug="project-dashboard.ProjectDashboard"
    >
      {/* 헤더 영역 */}
      {(header || actions) && (
        <div className="flex items-center justify-between">
          {header && <div className="gap-element flex flex-col">{header}</div>}
          {actions && (
            <div className="gap-element flex items-center">{actions}</div>
          )}
        </div>
      )}

      {/* 통계 그리드 */}
      {hasStats && (
        <section aria-labelledby="stats-heading">
          <h3
            id="stats-heading"
            className="text-text-primary mb-4 text-lg font-semibold"
          >
            {statsTitle ?? labels.stats}
          </h3>
          <DashboardGrid stats={stats} columns={statsColumns} />
        </section>
      )}

      {/* 차트/시각화 영역 */}
      {chartSection}

      {/* 배포 및 환경변수 2컬럼 레이아웃 */}
      {(hasDeployments || hasEnvGroups) && (
        <div
          className={cn(
            "gap-section grid",
            hasDeployments && hasEnvGroups
              ? "lg:grid-cols-2"
              : "lg:grid-cols-1",
          )}
        >
          {/* 배포 타임라인 */}
          {hasDeployments && (
            <section
              aria-labelledby="deployments-heading"
              className="border-border bg-surface rounded-xl border p-6"
            >
              <h3
                id="deployments-heading"
                className="text-text-primary mb-4 text-lg font-semibold"
              >
                {deploymentsTitle ?? labels.deployments}
              </h3>
              <DeploymentTimeline steps={deployments} title="" />
            </section>
          )}

          {/* 환경변수 패널 */}
          {hasEnvGroups && (
            <section
              aria-labelledby="env-heading"
              className="border-border bg-surface rounded-xl border p-6"
            >
              <h3
                id="env-heading"
                className="text-text-primary mb-4 text-lg font-semibold"
              >
                {envTitle ?? labels.env}
              </h3>
              <EnvPanel groups={envGroups} />
            </section>
          )}
        </div>
      )}

      {/* 빈 상태 */}
      {!hasStats && !hasDeployments && !hasEnvGroups && !chartSection && (
        <div className="flex flex-col items-center justify-center py-16 text-center">
          <ChartColumn className="mb-4 size-10" aria-hidden />
          <h3 className={cn("text-lg font-medium", OPT_TEXT_PRIMARY)}>
            {labels.emptyTitle}
          </h3>
          <p className={cn("mt-1 text-sm", OPT_TEXT_SECONDARY)}>
            {labels.emptyDescription}
          </p>
        </div>
      )}
    </SurfaceLayout>
  );
}