'use client'

import { useState, useEffect, useCallback } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { toast } from 'sonner';
import { Loader2, List, Eye, RefreshCw, AlertCircle, Play, Pause, Clock } from 'lucide-react';

// API 함수 및 타입
import { getApprovalLogsAction, syncApprovalStatusAction } from '@/lib/knox-api/approval/approval';
import { formatDate } from '@/lib/utils';

// 상태 텍스트 매핑 (mock util 대체)
const getStatusText = (status: string) => {
  const map: Record<string, string> = {
    '-3': '암호화실패',
    '-2': '암호화중',
    '-1': '예약상신',
    '0': '보류',
    '1': '진행중',
    '2': '완결',
    '3': '반려',
    '4': '상신취소',
    '5': '전결',
    '6': '후완결',
  };
  return map[status] || '알 수 없음';
};

interface ApprovalListProps {
  onItemClick?: (apInfId: string) => void;
}

type ListItem = {
  apInfId: string;
  subject: string;
  sbmDt: string;
  status: string;
  urgYn?: string;
  docSecuType?: string;
  actionType?: string;
  actionDt?: string;
  userId?: string;
};

export default function ApprovalList({ 
  onItemClick,
}: ApprovalListProps) {
  const [listData, setListData] = useState<ListItem[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [isSyncing, setIsSyncing] = useState(false);
  const [autoSync, setAutoSync] = useState(false);
  const [lastSyncTime, setLastSyncTime] = useState<Date | null>(null);

  const fetchData = useCallback(async () => {
    setIsLoading(true);
    setError(null);

    try {
      // 데이터베이스에서 결재 로그 조회
      const response = await getApprovalLogsAction();
      
      if (response.success) {
        setListData(response.data as unknown as ListItem[]);
      } else {
        setError(response.message);
        toast.error(response.message);
      }
    } catch (err) {
      console.error('목록 조회 오류:', err);
      setError('목록을 가져오는 중 오류가 발생했습니다.');
      toast.error('목록을 가져오는 중 오류가 발생했습니다.');
    } finally {
      setIsLoading(false);
    }
  }, []);

  const getStatusBadgeVariant = (status: string) => {
    switch (status) {
      case '2': // 완결
        return 'default';
      case '1': // 진행중
        return 'secondary';
      case '3': // 반려
        return 'destructive';
      case '4': // 상신취소
        return 'outline';
      default:
        return 'outline';
    }
  };

  const handleItemClick = (apInfId: string) => {
    onItemClick?.(apInfId);
  };

  // 결재 상황 동기화 함수
  const handleSync = useCallback(async (silent = false) => {
    setIsSyncing(true);
    try {
      const result = await syncApprovalStatusAction();
      
      if (result.success) {
        if (!silent) toast.success(result.message);
        setLastSyncTime(new Date());
        // 동기화 후 데이터 새로고침
        await fetchData();
      } else {
        if (!silent) toast.error(result.message);
      }
    } catch (error) {
      console.error('동기화 오류:', error);
      if (!silent) toast.error('동기화 중 오류가 발생했습니다.');
    } finally {
      setIsSyncing(false);
    }
  }, [fetchData]);

  // 컴포넌트 마운트 시 데이터 로드
  useEffect(() => {
    fetchData();
  }, [fetchData]);

  // 자동 동기화 Polling 효과
  useEffect(() => {
    if (!autoSync) {
      return;
    }

    // 30초마다 자동 동기화 (조정 가능)
    const intervalId = setInterval(() => {
      handleSync(true); // silent 모드로 실행
    }, 30000);

    return () => clearInterval(intervalId);
  }, [autoSync, handleSync]);

  return (
    <Card className="w-full max-w-5xl">
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <List className="w-5 h-5" />
          결재 이력
        </CardTitle>
        <CardDescription>
          데이터베이스에 저장된 결재 로그를 확인하고 상태를 동기화합니다.
        </CardDescription>
      </CardHeader>

      <CardContent className="space-y-4">
        {/* 제어 버튼들 */}
        <div className="flex justify-between items-center">
          <div className="flex items-center gap-4">
            <div className="text-sm text-gray-500">
              총 {listData.length}건
            </div>
            {lastSyncTime && (
              <div className="text-xs text-gray-400 flex items-center gap-1">
                <Clock className="w-3 h-3" />
                마지막 동기화: {formatDate(lastSyncTime.toISOString(), "kr")}
              </div>
            )}
          </div>
          <div className="flex gap-2">
            <Button
              onClick={() => setAutoSync(!autoSync)}
              disabled={isSyncing || isLoading}
              variant={autoSync ? "default" : "outline"}
              size="sm"
            >
              {autoSync ? (
                <>
                  <Pause className="w-4 h-4 mr-2" />
                  자동 동기화 중
                </>
              ) : (
                <>
                  <Play className="w-4 h-4 mr-2" />
                  자동 동기화
                </>
              )}
            </Button>
            <Button
              onClick={() => handleSync(false)}
              disabled={isSyncing || isLoading}
              variant="secondary"
              size="sm"
            >
              {isSyncing ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  동기화 중...
                </>
              ) : (
                <>
                  <RefreshCw className="w-4 h-4 mr-2" />
                  상태 동기화
                </>
              )}
            </Button>
            <Button
              onClick={fetchData}
              disabled={isLoading || isSyncing}
              variant="outline"
              size="sm"
            >
              {isLoading ? (
                <>
                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                  조회 중...
                </>
              ) : (
                <>
                  <RefreshCw className="w-4 h-4 mr-2" />
                  새로고침
                </>
              )}
            </Button>
          </div>
        </div>

        {/* 에러 메시지 */}
        {error && (
          <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
            <div className="flex items-center gap-2 text-red-700">
              <AlertCircle className="w-4 h-4" />
              <span className="font-medium">오류</span>
            </div>
            <p className="text-sm text-red-600 mt-1">{error}</p>
          </div>
        )}

        {/* 목록 테이블 */}
        <div className="border rounded-lg">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>결재 ID</TableHead>
                <TableHead>제목</TableHead>
                <TableHead>상태</TableHead>
                <TableHead>작업</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {listData.length === 0 ? (
                <TableRow>
                  <TableCell
                    colSpan={4}
                    className="text-center py-8 text-gray-500"
                  >
                    {isLoading ? '데이터를 불러오는 중...' : '데이터가 없습니다.'}
                  </TableCell>
                </TableRow>
              ) : (
                listData.map((item) => (
                  <TableRow key={item.apInfId} className="hover:bg-gray-50">
                    <TableCell className="font-mono text-sm">
                      {item.apInfId}
                    </TableCell>
                    <TableCell className="font-medium">
                      {item.subject}
                    </TableCell>
                    <TableCell>
                      <Badge variant={getStatusBadgeVariant(item.status)}>
                        {getStatusText(item.status)}
                      </Badge>
                    </TableCell>
                    <TableCell>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => handleItemClick(item.apInfId)}
                      >
                        <Eye className="w-4 h-4 mr-2" />
                        상세
                      </Button>
                    </TableCell>
                  </TableRow>
                ))
              )}
            </TableBody>
          </Table>
        </div>

        {/* 페이지네이션 영역 (향후 구현 예정) */}
        {listData.length > 0 && (
          <div className="flex justify-center pt-4">
            <div className="text-sm text-gray-500">
              페이지네이션 기능은 향후 구현 예정입니다.
            </div>
          </div>
        )}
      </CardContent>
    </Card>
  );
}