'use client';

import { X } from 'lucide-react';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { cn } from '@/lib/utils';
import type { DetailModalConfig } from '../types';
import {
  DateFilterSection,
  PeriodSelectSection,
  SummaryCard,
  ReviewCardsSection,
  BarChartSection,
  PieChartSection,
  HorizontalBarChartSection,
  ComparisonSection,
  CalculationCardsSection,
  QuarterlyTableSection,
  ReferenceTableSection,
  TableSection,
} from './DetailModalSections';

interface DetailModalProps {
  isOpen: boolean;
  onClose: () => void;
  config: DetailModalConfig;
  onDateFilterChange?: (params: { startDate: string; endDate: string; search: string }) => void;
  onRowClick?: (row: Record<string, unknown>) => void;
}

export function DetailModal({ isOpen, onClose, config, onDateFilterChange, onRowClick }: DetailModalProps) {
  return (
    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()} >
      <DialogContent className="!w-[95vw] sm:!w-[90vw] md:!w-[85vw] !max-w-[1600px] max-h-[90vh] overflow-auto p-0">
        {/* 헤더 */}
        <DialogHeader className="sticky top-0 bg-white z-10 px-4 sm:px-6 py-3 sm:py-4 border-b">
          <div className="flex items-center justify-between">
            <DialogTitle className="text-base sm:text-lg font-bold">{config.title}</DialogTitle>
            <button
              type="button"
              onClick={onClose}
              className="p-1 hover:bg-gray-100 rounded-full transition-colors"
            >
              <X className="h-5 w-5 text-gray-500" />
            </button>
          </div>
        </DialogHeader>

        <div className="p-4 sm:p-6 space-y-4 sm:space-y-6">
          {/* 기간선택기 영역 */}
          {config.dateFilter?.enabled && (
            <DateFilterSection config={config.dateFilter} onFilterChange={onDateFilterChange} />
          )}

          {/* 신고기간 셀렉트 영역 */}
          {config.periodSelect?.enabled && (
            <PeriodSelectSection config={config.periodSelect} />
          )}

          {/* 요약 카드 영역 - 모바일: 세로배치 */}
          {config.summaryCards.length > 0 && (
            <div className={cn(
              "grid gap-3 sm:gap-4",
              config.summaryCards.length === 2 && "grid-cols-1 sm:grid-cols-2",
              config.summaryCards.length === 3 && "grid-cols-1 sm:grid-cols-3",
              config.summaryCards.length >= 4 && "grid-cols-1 sm:grid-cols-2 md:grid-cols-4"
            )}>
              {config.summaryCards.map((card, index) => (
                <SummaryCard key={index} data={card} />
              ))}
            </div>
          )}

          {/* 검토 필요 카드 영역 */}
          {config.reviewCards && (
            <ReviewCardsSection config={config.reviewCards} />
          )}

          {/* 차트 영역 */}
          {(config.barChart || config.pieChart || config.horizontalBarChart) && (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {config.barChart && <BarChartSection config={config.barChart} />}
              {config.pieChart && <PieChartSection config={config.pieChart} />}
              {config.horizontalBarChart && <HorizontalBarChartSection config={config.horizontalBarChart} />}
            </div>
          )}

          {/* VS 비교 섹션 영역 */}
          {config.comparisonSection && (
            <ComparisonSection config={config.comparisonSection} />
          )}

          {/* 참조 테이블 영역 (단일 - 테이블 위에 표시) */}
          {config.referenceTable && (
            <ReferenceTableSection config={config.referenceTable} />
          )}

          {/* 계산 카드 섹션 영역 (테이블 위에 표시) */}
          {config.calculationCards && (
            <CalculationCardsSection config={config.calculationCards} />
          )}

          {/* 메인 테이블 영역 */}
          {config.table && <TableSection key={config.title} config={config.table} onRowClick={onRowClick} />}

          {/* 참조 테이블 영역 (다중 - 테이블 아래 표시) */}
          {config.referenceTables && config.referenceTables.length > 0 && (
            <div className="space-y-4">
              {config.referenceTables.map((tableConfig, index) => (
                <ReferenceTableSection key={index} config={tableConfig} />
              ))}
            </div>
          )}

          {/* 분기별 테이블 영역 */}
          {config.quarterlyTable && (
            <QuarterlyTableSection config={config.quarterlyTable} />
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
}