'use client';

import { useState, useEffect, useCallback, useTransition } from 'react';
import { useRouter } from 'next/navigation';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Check, AlertTriangle, Info, AlertCircle, BarChart3, Loader2, RefreshCw } from 'lucide-react';
import { DetailPageSkeleton } from '@/components/ui/skeleton';
import { cn } from '@/lib/utils';
import { toast } from 'sonner';
import { PageLayout } from '@/components/organisms/PageLayout';
import { PageHeader } from '@/components/organisms/PageHeader';
import { getComprehensiveAnalysis, approveIssue, rejectIssue } from '../actions';
import type { CheckPoint, AmountCard, TodayIssueItem, ComprehensiveAnalysisData } from '../types';

// 금액 포맷 함수
const formatAmount = (amount: number): string => {
  return new Intl.NumberFormat('ko-KR').format(amount) + '원';
};

// 기본 데이터 (목데이터)
const defaultData: ComprehensiveAnalysisData = {
  todayIssue: {
    filterOptions: ['전체필터', '결재', '매출', '매입', '자금'],
    items: [
      { id: '1', category: '결재', description: '지출결의서 #2024-001 승인 대기 중', requiresApproval: true, time: '09:30' },
      { id: '2', category: '매출', description: '(주)대한전자 외상매출금 90일 초과', requiresApproval: false, time: '10:15' },
      { id: '3', category: '자금', description: '법인카드 한도 초과 경고', requiresApproval: false, time: '11:00' },
    ],
  },
  monthlyExpense: {
    cards: [
      { id: 'me1', label: '매입', amount: 3123000, previousAmount: 2826000, previousLabel: '전월 대비 +10.5%' },
      { id: 'me2', label: '카드', amount: 3123000, previousAmount: 2826000, previousLabel: '전월 대비 +10.5%' },
      { id: 'me3', label: '발행어음', amount: 3123000, previousAmount: 2826000, previousLabel: '전월 대비 +10.5%' },
      { id: 'me4', label: '총 예상 지출 합계', amount: 3123000, previousAmount: 2826000, previousLabel: '전월 대비 +10.5%' },
    ],
    checkPoints: [
      { id: 'me-cp1', type: 'warning', message: '이번 달 예상 지출이', highlight: '전월 대비 15% 증가했습니다. 매입 비용 증가가 주요 원인입니다.' },
      { id: 'me-cp2', type: 'error', message: '이번 달 예상 지출이', highlight: '예산을 12% 초과했습니다. 비용 항목별 점검이 필요합니다.' },
      { id: 'me-cp3', type: 'success', message: '이번 달 예상 지출이', highlight: '전월 대비 8% 감소했습니다. (계정과목명) 비용이 줄었습니다.' },
    ],
  },
  cardManagement: {
    cards: [
      { id: 'cm1', label: '카드', amount: 3123000, subAmount: 50000, subLabel: '약정 5만 (가지급금 예외)' },
      { id: 'cm2', label: '가지급금', amount: 3123000, previousAmount: 2826000, previousLabel: '전월 대비 +10.5%' },
      { id: 'cm3', label: '미정산 가불', amount: 3123000, previousAmount: 2826000, previousLabel: '전월 대비 +10.5%' },
      { id: 'cm4', label: '총 잔액', amount: 3123000, previousAmount: 2826000, previousLabel: '전월 대비 +10.5%' },
    ],
    checkPoints: [
      { id: 'cm-cp1', type: 'warning', message: '법인카드 사용 총 85만원이 가지급금으로 전환되었습니다.', highlight: '연 4.6% 인정이자가 발생합니다.' },
      { id: 'cm-cp2', type: 'warning', message: '전 가지급금 1,520만원은 4.6%,', highlight: '연 약 70만원의 인정이자가 발생합니다.' },
      { id: 'cm-cp3', type: 'warning', message: '상품권/귀금속 등 현대비 불인정 항목 매입 건이 있습니다. 가지급금 처리 예정입니다.' },
      { id: 'cm-cp4', type: 'info', message: '주말 카드 사용 총 100만원 중 결과 지의. 업무관련성 소명이 어려울 수 있으니 기록을 남겨주세요.' },
    ],
  },
  entertainment: {
    cards: [
      { id: 'et1', label: '접대비 한도', amount: 30000123000, subAmount: 2123, subLabel: '사용' },
      { id: 'et2', label: '접대비 사용액', amount: 40123000 },
      { id: 'et3', label: '한도 잔액', amount: 30123000 },
      { id: 'et4', label: '전월 사용액', amount: 3123000 },
    ],
    checkPoints: [
      { id: 'et-cp1', type: 'success', message: '접대비 사용 총 2,400만원 중 / 한도 4,000만원 (60%).', highlight: '여유 있게 운영 중입니다.' },
      { id: 'et-cp2', type: 'warning', message: '접대비 85% 도달. 연내 한도 600만원 잔액입니다.', highlight: '사용 계획에 집중해 주세요.' },
      { id: 'et-cp3', type: 'error', message: '접대비 한도 초과 320만원 발생.', highlight: '손금불산입되어 법인세 부담 증가합니다.' },
      { id: 'et-cp4', type: 'info', message: '접대비 사용 총 3건(45만원)이 거래처 한도 누락되어있습니다. 기록을 보완해 주세요.' },
    ],
  },
  welfare: {
    cards: [
      { id: 'wf1', label: '총 복리후생비 한도', amount: 3123000 },
      { id: 'wf2', label: '누적 복리후생비 사용', amount: 1123000 },
      { id: 'wf3', label: '잠정 복리후생비 사용액', amount: 30123000 },
      { id: 'wf4', label: '잠정 복리후생비 누적 한도', amount: 3123000 },
    ],
    checkPoints: [
      { id: 'wf-cp1', type: 'success', message: '1인당 월 복리후생비 18만원. 업계 평균(15~25만원) 내', highlight: '정상 운영 중입니다.' },
      { id: 'wf-cp2', type: 'warning', message: '식대가 월 25만원으로', highlight: '비과세 한도(20만원)를 초과했습니다. 초과분은 근로소득 과세됩니다.' },
    ],
  },
  receivable: {
    cards: [
      { id: 'rv1', label: '누계 미수금', amount: 30123000, subAmount: 6123000, subLabel: '매출', previousAmount: 30000, previousLabel: '입금' },
      { id: 'rv2', label: '30일 초과', amount: 30123000, subAmount: 60123000, subLabel: '매출', previousAmount: 30000, previousLabel: '입금' },
      { id: 'rv3', label: '60일 초과', amount: 3123000, subAmount: 6123000, subLabel: '매출', previousAmount: 30000, previousLabel: '입금' },
      { id: 'rv4', label: '90일 초과', amount: 3123000, subAmount: 6123000, subLabel: '매출', previousAmount: 30000, previousLabel: '입금' },
    ],
    checkPoints: [
      { id: 'rv-cp1', type: 'error', message: '90일 이상 장기 미수금 3건(2,500만원) 발생.', highlight: '회수 조치가 필요합니다.' },
      { id: 'rv-cp2', type: 'warning', message: '(주)대한전자 미수금 4,500만원으로', highlight: '전체의 35%를 차지합니다. 리스크 분산이 필요합니다.' },
    ],
    hasDetailButton: true,
    detailButtonLabel: '거래처별 미수금 현황',
    detailButtonPath: '/accounting/receivables-status',
  },
  debtCollection: {
    cards: [
      { id: 'dc1', label: '총 채권', amount: 30123000, subAmount: 25, subLabel: '건' },
      { id: 'dc2', label: '추심 진행', amount: 30123000, subAmount: 12, subLabel: '건' },
      { id: 'dc3', label: '추심 완료', amount: 3123000, subAmount: 3, subLabel: '건' },
      { id: 'dc4', label: '포기/손실', amount: 3123000, subAmount: 10, subLabel: '건' },
    ],
    checkPoints: [
      { id: 'dc-cp1', type: 'info', message: '(주)대한전자 건 지급명령 신청 완료.', highlight: '법원 결정까지 약 2주 소요 예정입니다.' },
      { id: 'dc-cp2', type: 'warning', message: '(주)삼성테크 건 회수 불가 판정.', highlight: '대손 처리 검토가 필요합니다.' },
    ],
  },
};

// Props 인터페이스
interface ComprehensiveAnalysisProps {
  initialData?: ComprehensiveAnalysisData;
}

// 체크포인트 아이콘
const CheckPointIcon = ({ type }: { type: CheckPoint['type'] }) => {
  switch (type) {
    case 'success':
      return <Check className="h-4 w-4 text-green-600" />;
    case 'warning':
      return <AlertTriangle className="h-4 w-4 text-amber-600" />;
    case 'error':
      return <AlertCircle className="h-4 w-4 text-red-600" />;
    case 'info':
    default:
      return <Info className="h-4 w-4 text-blue-600" />;
  }
};

// 체크포인트 컴포넌트
const CheckPointItem = ({ checkpoint }: { checkpoint: CheckPoint }) => {
  return (
    <div className="flex items-start gap-2 py-1">
      <div className="mt-0.5">
        <CheckPointIcon type={checkpoint.type} />
      </div>
      <p className="text-sm text-muted-foreground">
        {checkpoint.message}
        {checkpoint.highlight && (
          <span className="text-red-600 font-medium"> {checkpoint.highlight}</span>
        )}
      </p>
    </div>
  );
};

// 금액 카드 컴포넌트 (기존 스타일 적용)
const AmountCardItem = ({ card }: { card: AmountCard }) => {
  return (
    <Card>
      <CardContent className="p-4 md:p-6">
        <p className="text-sm font-medium text-muted-foreground mb-2">
          {card.label}
        </p>
        <p className="text-2xl md:text-3xl font-bold">{formatAmount(card.amount)}</p>
        {(card.subAmount !== undefined || card.previousAmount !== undefined) && (
          <div className="flex gap-4 mt-2 text-xs text-muted-foreground">
            {card.subAmount !== undefined && (
              <span>{card.subLabel}: {formatAmount(card.subAmount)}</span>
            )}
            {card.previousAmount !== undefined && (
              <span>{card.previousLabel}: {formatAmount(card.previousAmount)}</span>
            )}
          </div>
        )}
      </CardContent>
    </Card>
  );
};

// 섹션 타이틀 컴포넌트
const SectionTitle = ({
  title,
  badge,
  actionButton,
}: {
  title: string;
  badge?: 'warning' | 'success' | 'info';
  actionButton?: { label: string; onClick: () => void };
}) => {
  return (
    <div className="flex items-center justify-between mb-4">
      <div className="flex items-center gap-2">
        <div className={cn(
          "w-2 h-2 rounded-full",
          badge === 'warning' ? 'bg-amber-500' :
          badge === 'success' ? 'bg-green-500' :
          badge === 'info' ? 'bg-blue-500' : 'bg-red-500'
        )} />
        <h3 className="text-base font-semibold text-foreground">{title}</h3>
      </div>
      {actionButton && (
        <Button
          variant="default"
          size="sm"
          className="bg-blue-600 hover:bg-blue-700 text-white"
          onClick={actionButton.onClick}
        >
          {actionButton.label}
        </Button>
      )}
    </div>
  );
};

// 오늘의 이슈 테이블 행
const IssueTableRow = ({
  item,
  onApprove,
  onReject,
  isProcessing,
}: {
  item: TodayIssueItem;
  onApprove: (id: string) => void;
  onReject: (id: string) => void;
  isProcessing: boolean;
}) => {
  return (
    <div className="flex items-center justify-between py-3 border-b last:border-b-0">
      <div className="flex items-center gap-4 flex-1">
        <span className="text-sm font-medium min-w-[80px]">{item.category}</span>
        <span className="text-sm text-muted-foreground flex-1">{item.description}</span>
        {item.requiresApproval && (
          <div className="flex gap-2">
            <Button
              size="sm"
              variant="default"
              className="bg-blue-600 hover:bg-blue-700 text-white h-7 px-3"
              onClick={() => onApprove(item.id)}
              disabled={isProcessing}
            >
              {isProcessing ? <Loader2 className="h-3 w-3 animate-spin" /> : '승인'}
            </Button>
            <Button
              size="sm"
              variant="outline"
              className="h-7 px-3"
              onClick={() => onReject(item.id)}
              disabled={isProcessing}
            >
              {isProcessing ? <Loader2 className="h-3 w-3 animate-spin" /> : '반려'}
            </Button>
          </div>
        )}
        <span className="text-sm text-muted-foreground min-w-[50px] text-right">{item.time}</span>
      </div>
    </div>
  );
};

export default function ComprehensiveAnalysis({ initialData }: ComprehensiveAnalysisProps) {
  const router = useRouter();
  const [, startTransition] = useTransition();
  const [data, setData] = useState<ComprehensiveAnalysisData>(initialData || defaultData);
  const [isLoading, setIsLoading] = useState(!initialData);
  const [issueFilter, setIssueFilter] = useState('전체필터');
  const [processingId, setProcessingId] = useState<string | null>(null);

   // 반려 Dialog 상태
  const [rejectDialogOpen, setRejectDialogOpen] = useState(false);
  const [rejectTargetId, setRejectTargetId] = useState<string | null>(null);
  const [rejectReason, setRejectReason] = useState('');

  // 데이터 로드
  const loadData = useCallback(async () => {
    setIsLoading(true);
    try {
      const result = await getComprehensiveAnalysis();
      if (result.success && result.data) {
        setData(result.data);
      } else if (result.error) {
        toast.error(result.error);
      }
    } catch (error) {
      console.error('Failed to load comprehensive analysis:', error);
      toast.error('데이터를 불러오는데 실패했습니다.');
    } finally {
      setIsLoading(false);
    }
  }, []);

  // 초기 로드
  useEffect(() => {
    loadData();
  }, [loadData]);

  const handleReceivableDetail = () => {
    router.push('/ko/accounting/receivables-status');
  };

  const handleApprove = useCallback((id: string) => {
    setProcessingId(id);
    startTransition(async () => {
      const result = await approveIssue(id);
      if (result.success) {
        // 이슈 목록에서 해당 항목 제거 또는 상태 변경
        setData(prev => ({
          ...prev,
          todayIssue: {
            ...prev.todayIssue,
            items: prev.todayIssue.items.filter(item => item.id !== id),
          },
        }));
        toast.success('승인되었습니다.');
      } else {
        toast.error(result.error || '승인에 실패했습니다.');
      }
      setProcessingId(null);
    });
  }, []);

  // 반려 버튼 클릭 시 Dialog 열기
  const handleRejectClick = useCallback((id: string) => {
    setRejectTargetId(id);
    setRejectReason('');
    setRejectDialogOpen(true);
  }, []);

  // 반려 확인 처리
  const handleRejectConfirm = useCallback(() => {
    if (!rejectTargetId) return;
    if (!rejectReason.trim()) {
      toast.error('반려 사유를 입력해주세요.');
      return;
    }

    setProcessingId(rejectTargetId);
    setRejectDialogOpen(false);

    startTransition(async () => {
      const result = await rejectIssue(rejectTargetId, rejectReason);
      if (result.success) {
        setData(prev => ({
          ...prev,
          todayIssue: {
            ...prev.todayIssue,
            items: prev.todayIssue.items.filter(item => item.id !== rejectTargetId),
          },
        }));
        toast.success('반려되었습니다.');
      } else {
        toast.error(result.error || '반려에 실패했습니다.');
      }
      setProcessingId(null);
      setRejectTargetId(null);
      setRejectReason('');
    });
  }, [rejectTargetId, rejectReason]);

  // 필터링된 이슈 목록
  const filteredIssues = issueFilter === '전체필터'
    ? data.todayIssue.items
    : data.todayIssue.items.filter(item => item.category === issueFilter);

  if (isLoading) {
    return (
      <PageLayout>
        <PageHeader
          title="보고서 및 분석"
          description="종합 경영 분석 현황을 확인합니다."
          icon={BarChart3}
        />
        <DetailPageSkeleton />
      </PageLayout>
    );
  }

  return (
    <PageLayout>
      <PageHeader
        title="보고서 및 분석"
        description="종합 경영 분석 현황을 확인합니다."
        icon={BarChart3}
        actions={
          <Button
            variant="outline"
            size="sm"
            onClick={loadData}
            disabled={isLoading}
          >
            <RefreshCw className={cn("h-4 w-4 mr-2", isLoading && "animate-spin")} />
            새로고침
          </Button>
        }
      />

      <div className="space-y-6">
        {/* 오늘의 이슈 섹션 */}
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between mb-4">
              <SectionTitle title="오늘의 이슈" badge="warning" />
              <Select value={issueFilter} onValueChange={setIssueFilter}>
                <SelectTrigger className="min-w-[140px] w-auto">
                  <SelectValue placeholder="필터 선택" />
                </SelectTrigger>
                <SelectContent>
                  {data.todayIssue.filterOptions.map((option) => (
                    <SelectItem key={option} value={option}>
                      {option}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>

            {/* 이슈 테이블 */}
            <div className="border rounded-lg p-4">
              {filteredIssues.map((item) => (
                <IssueTableRow
                  key={item.id}
                  item={item}
                  onApprove={handleApprove}
                  onReject={handleRejectClick}
                  isProcessing={processingId === item.id}
                />
              ))}
            </div>
          </CardContent>
        </Card>

        {/* 당월 예상 지출 내역 섹션 */}
        <Card>
          <CardContent className="p-6">
            <SectionTitle title="당월 예상 지출 내역" badge="warning" />

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
              {data.monthlyExpense.cards.map((card) => (
                <AmountCardItem key={card.id} card={card} />
              ))}
            </div>

            <div className="border-t pt-4 space-y-1">
              {data.monthlyExpense.checkPoints.map((cp) => (
                <CheckPointItem key={cp.id} checkpoint={cp} />
              ))}
            </div>
          </CardContent>
        </Card>

        {/* 카드/가지급금 관리 섹션 */}
        <Card>
          <CardContent className="p-6">
            <SectionTitle title="카드/가지급금 관리" badge="warning" />

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
              {data.cardManagement.cards.map((card) => (
                <AmountCardItem key={card.id} card={card} />
              ))}
            </div>

            <div className="border-t pt-4 space-y-1">
              {data.cardManagement.checkPoints.map((cp) => (
                <CheckPointItem key={cp.id} checkpoint={cp} />
              ))}
            </div>
          </CardContent>
        </Card>

        {/* 접대비 현황 섹션 */}
        <Card>
          <CardContent className="p-6">
            <SectionTitle title="접대비 현황" badge="warning" />

            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
              {data.entertainment.cards.map((card) => (
                <AmountCardItem key={card.id} card={card} />
              ))}
            </div>

            <div className="border-t pt-4 space-y-1">
              {data.entertainment.checkPoints.map((cp) => (
                <CheckPointItem key={cp.id} checkpoint={cp} />
              ))}
            </div>
          </CardContent>
        </Card>

        {/* 복리후생비 현황 섹션 */}
        <Card>
          <CardContent className="p-6">
            <SectionTitle title="복리후생비 현황" badge="warning" />

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
              {data.welfare.cards.map((card) => (
                <AmountCardItem key={card.id} card={card} />
              ))}
            </div>

            <div className="border-t pt-4 space-y-1">
              {data.welfare.checkPoints.map((cp) => (
                <CheckPointItem key={cp.id} checkpoint={cp} />
              ))}
            </div>
          </CardContent>
        </Card>

        {/* 미수금 현황 섹션 */}
        <Card>
          <CardContent className="p-6">
            <SectionTitle
              title="미수금 현황"
              badge="warning"
              actionButton={{
                label: data.receivable.detailButtonLabel,
                onClick: handleReceivableDetail,
              }}
            />

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
              {data.receivable.cards.map((card) => (
                <AmountCardItem key={card.id} card={card} />
              ))}
            </div>

            <div className="border-t pt-4 space-y-1">
              {data.receivable.checkPoints.map((cp) => (
                <CheckPointItem key={cp.id} checkpoint={cp} />
              ))}
            </div>
          </CardContent>
        </Card>

        {/* 채권추심 현황 섹션 */}
        <Card>
          <CardContent className="p-6">
            <SectionTitle title="채권추심 현황" badge="info" />

            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
              {data.debtCollection.cards.map((card) => (
                <AmountCardItem key={card.id} card={card} />
              ))}
            </div>

            <div className="border-t pt-4 space-y-1">
              {data.debtCollection.checkPoints.map((cp) => (
                <CheckPointItem key={cp.id} checkpoint={cp} />
              ))}
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 반려 사유 입력 Dialog */}
      <Dialog open={rejectDialogOpen} onOpenChange={setRejectDialogOpen}>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>반려 사유 입력</DialogTitle>
            <DialogDescription>
              반려 사유를 입력해주세요. 기안자에게 전달됩니다.
            </DialogDescription>
          </DialogHeader>
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="reject-reason">반려 사유</Label>
              <Textarea
                id="reject-reason"
                placeholder="반려 사유를 입력하세요..."
                value={rejectReason}
                onChange={(e) => setRejectReason(e.target.value)}
                className="min-h-[100px]"
              />
            </div>
          </div>
          <DialogFooter>
            <Button
              variant="outline"
              onClick={() => setRejectDialogOpen(false)}
            >
              취소
            </Button>
            <Button
              variant="destructive"
              onClick={handleRejectConfirm}
              disabled={!rejectReason.trim()}
            >
              반려
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </PageLayout>
  );
}