/**
 * CEODashboard Skeleton Components
 *
 * 대시보드 로딩 시 실제 레이아웃과 동일한 형태의 스켈레톤
 */

'use client';

import { Card, CardContent } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';

// ============================================
// 1. 오늘의 이슈 섹션 스켈레톤
// ============================================
export function TodayIssueSectionSkeleton() {
  return (
    <Card>
      <CardContent className="p-6">
        {/* 헤더 */}
        <div className="flex items-center mb-4">
          <Skeleton className="h-6 w-28" />
          <Skeleton className="h-9 w-44 ml-auto" />
        </div>

        {/* 리스트 그리드 */}
        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-3">
          {Array.from({ length: 6 }).map((_, i) => (
            <div
              key={i}
              className="flex items-center gap-2 p-3 border border-gray-200 rounded-lg"
            >
              <Skeleton className="h-5 w-16 rounded-full" />
              <Skeleton className="h-4 flex-1" />
              <Skeleton className="h-4 w-12" />
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

// ============================================
// 2. 일일 일보 섹션 스켈레톤
// ============================================
export function DailyReportSectionSkeleton() {
  return (
    <Card>
      <CardContent className="p-6">
        {/* 헤더 */}
        <div className="flex items-center justify-between mb-4">
          <div className="flex items-center gap-2">
            <Skeleton className="h-6 w-20" />
            <Skeleton className="h-5 w-12 rounded-full" />
          </div>
          <Skeleton className="h-4 w-24" />
        </div>

        {/* 4개 카드 그리드 */}
        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3 xs:gap-4 mb-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <div key={i} className="p-4 bg-gray-50 rounded-lg space-y-2">
              <Skeleton className="h-4 w-16" />
              <Skeleton className="h-7 w-24" />
              <Skeleton className="h-3 w-20" />
            </div>
          ))}
        </div>

        {/* 체크포인트 */}
        <div className="border-t pt-4 space-y-1">
          {Array.from({ length: 2 }).map((_, i) => (
            <Skeleton key={i} className="h-4 w-full max-w-md" />
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

// ============================================
// 3. 현황판 섹션 스켈레톤
// ============================================
export function StatusBoardSectionSkeleton() {
  return (
    <Card>
      <CardContent className="p-6">
        {/* 섹션 타이틀 */}
        <div className="flex items-center gap-2 mb-4">
          <Skeleton className="h-6 w-16" />
          <Skeleton className="h-5 w-12 rounded-full" />
        </div>

        {/* 카드 그리드 */}
        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-3">
          {Array.from({ length: 8 }).map((_, i) => (
            <div key={i} className="p-4 border rounded-lg space-y-2">
              <Skeleton className="h-4 w-16" />
              <Skeleton className="h-8 w-12" />
              <Skeleton className="h-3 w-20" />
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

// ============================================
// 4. 당월 예상 지출 섹션 스켈레톤
// ============================================
export function MonthlyExpenseSectionSkeleton() {
  return (
    <Card>
      <CardContent className="p-6">
        {/* 헤더 */}
        <div className="flex items-center gap-2 mb-4">
          <Skeleton className="h-6 w-32" />
          <Skeleton className="h-5 w-12 rounded-full" />
        </div>

        {/* 카드 그리드 */}
        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
          {Array.from({ length: 4 }).map((_, i) => (
            <div key={i} className="p-4 bg-gray-50 rounded-lg space-y-3">
              <div className="flex items-center gap-2">
                <Skeleton className="h-8 w-8 rounded" />
                <Skeleton className="h-4 w-20" />
              </div>
              <Skeleton className="h-7 w-28" />
              <Skeleton className="h-3 w-16" />
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

// ============================================
// 5. 카드/가지급금 관리 섹션 스켈레톤
// ============================================
export function CardManagementSectionSkeleton() {
  return (
    <Card>
      <CardContent className="p-6">
        {/* 헤더 */}
        <div className="flex items-center gap-2 mb-4">
          <Skeleton className="h-6 w-36" />
        </div>

        {/* 카드 그리드 */}
        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 gap-4">
          {Array.from({ length: 3 }).map((_, i) => (
            <div key={i} className="p-4 border rounded-lg space-y-3">
              <div className="flex items-center justify-between">
                <Skeleton className="h-4 w-20" />
                <Skeleton className="h-6 w-6 rounded" />
              </div>
              <Skeleton className="h-7 w-32" />
              <Skeleton className="h-3 w-24" />
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

// ============================================
// 6. 미수금/채권추심/접대비/복리후생비 공통 스켈레톤
// ============================================
export function AmountSectionSkeleton({ cardCount = 4 }: { cardCount?: number }) {
  return (
    <Card>
      <CardContent className="p-6">
        {/* 헤더 */}
        <div className="flex items-center gap-2 mb-4">
          <Skeleton className="h-6 w-24" />
          <Skeleton className="h-5 w-12 rounded-full" />
        </div>

        {/* 카드 그리드 */}
        <div className="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-4 gap-4">
          {Array.from({ length: cardCount }).map((_, i) => (
            <div key={i} className="p-4 bg-gray-50 rounded-lg space-y-2">
              <Skeleton className="h-4 w-16" />
              <Skeleton className="h-7 w-24" />
              <Skeleton className="h-3 w-20" />
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

// ============================================
// 7. 캘린더 섹션 스켈레톤
// ============================================
export function CalendarSectionSkeleton() {
  return (
    <Card>
      <CardContent className="p-6">
        {/* 헤더 */}
        <div className="flex items-center justify-between mb-4">
          <Skeleton className="h-6 w-16" />
          <div className="flex items-center gap-2">
            <Skeleton className="h-8 w-8 rounded" />
            <Skeleton className="h-5 w-24" />
            <Skeleton className="h-8 w-8 rounded" />
          </div>
        </div>

        {/* 캘린더 그리드 */}
        <div className="space-y-2">
          {/* 요일 헤더 */}
          <div className="grid grid-cols-7 gap-1">
            {Array.from({ length: 7 }).map((_, i) => (
              <Skeleton key={i} className="h-8 w-full" />
            ))}
          </div>
          {/* 날짜 그리드 */}
          {Array.from({ length: 5 }).map((_, row) => (
            <div key={row} className="grid grid-cols-7 gap-1">
              {Array.from({ length: 7 }).map((_, col) => (
                <Skeleton key={col} className="h-20 w-full" />
              ))}
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}

// ============================================
// 8. 전체 대시보드 스켈레톤
// ============================================
export function CEODashboardSkeleton() {
  return (
    <div className="space-y-6 animate-pulse">
      {/* 오늘의 이슈 */}
      <TodayIssueSectionSkeleton />

      {/* 일일 일보 */}
      <DailyReportSectionSkeleton />

      {/* 현황판 */}
      <StatusBoardSectionSkeleton />

      {/* 당월 예상 지출 */}
      <MonthlyExpenseSectionSkeleton />

      {/* 카드/가지급금 관리 */}
      <CardManagementSectionSkeleton />

      {/* 접대비 현황 */}
      <AmountSectionSkeleton cardCount={4} />

      {/* 복리후생비 현황 */}
      <AmountSectionSkeleton cardCount={4} />

      {/* 미수금 현황 */}
      <AmountSectionSkeleton cardCount={4} />

      {/* 채권추심 현황 */}
      <AmountSectionSkeleton cardCount={3} />

      {/* 부가세 현황 */}
      <AmountSectionSkeleton cardCount={2} />

      {/* 캘린더 */}
      <CalendarSectionSkeleton />
    </div>
  );
}

export default CEODashboardSkeleton;
