'use client'

import { useState } from 'react';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Badge } from '@/components/ui/badge';
import { Switch } from '@/components/ui/switch';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import { FileText, Eye, XCircle, List, History, Settings } from 'lucide-react';

// 결재 컴포넌트들
import ApprovalSubmit from './ApprovalSubmit';
import ApprovalDetail from './ApprovalDetail';
import ApprovalCancel from './ApprovalCancel';
import ApprovalList from './ApprovalList';

interface ApprovalManagerProps {
  useFakeData?: boolean;
  systemId?: string;
  defaultTab?: string;
}

export default function ApprovalManager({ 
  useFakeData = false, 
  systemId = 'EVCP_SYSTEM',
  defaultTab = 'submit'
}: ApprovalManagerProps) {
  const [currentTab, setCurrentTab] = useState(defaultTab);
  const [isTestMode, setIsTestMode] = useState(useFakeData);
  const [selectedApInfId, setSelectedApInfId] = useState<string>('');

  const handleSubmitSuccess = (apInfId: string) => {
    setSelectedApInfId(apInfId);
    setCurrentTab('detail');
  };

  const handleCancelSuccess = (apInfId: string) => {
    setSelectedApInfId(apInfId);
    setCurrentTab('detail');
  };

  const handleListItemClick = (apInfId: string) => {
    setSelectedApInfId(apInfId);
    setCurrentTab('detail');
  };

  const handleTestModeChange = (checked: boolean) => {
    setIsTestMode(checked);
  };

  return (
    <div className="w-full max-w-7xl mx-auto space-y-6">
      {/* 헤더 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <FileText className="w-6 h-6" />
            Knox 결재 시스템
          </CardTitle>
          <CardDescription>
            결재 상신, 조회, 취소 등 모든 결재 업무를 관리할 수 있습니다.
          </CardDescription>
        </CardHeader>
        
        <CardContent>
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-4">
              <div className="flex items-center gap-2">
                <Label htmlFor="test-mode">테스트 모드</Label>
                <Switch
                  id="test-mode"
                  checked={isTestMode}
                  onCheckedChange={handleTestModeChange}
                />
              </div>
              {isTestMode && (
                <Badge variant="outline" className="text-yellow-600 border-yellow-600">
                  테스트 모드 활성화
                </Badge>
              )}
            </div>
            
            <div className="flex items-center gap-2 text-sm text-gray-500">
              <span>시스템 ID:</span>
              <Badge variant="outline">{systemId}</Badge>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* 메인 탭 */}
      <Tabs value={currentTab} onValueChange={setCurrentTab} className="w-full">
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="submit" className="flex items-center gap-2">
            <FileText className="w-4 h-4" />
            상신
          </TabsTrigger>
          <TabsTrigger value="detail" className="flex items-center gap-2">
            <Eye className="w-4 h-4" />
            상세조회
          </TabsTrigger>
          <TabsTrigger value="cancel" className="flex items-center gap-2">
            <XCircle className="w-4 h-4" />
            취소
          </TabsTrigger>
          <TabsTrigger value="list" className="flex items-center gap-2">
            <List className="w-4 h-4" />
            상신함
          </TabsTrigger>
          <TabsTrigger value="history" className="flex items-center gap-2">
            <History className="w-4 h-4" />
            이력
          </TabsTrigger>
        </TabsList>

        {/* 결재 상신 탭 */}
        <TabsContent value="submit" className="space-y-6">
          <ApprovalSubmit
            useFakeData={isTestMode}
            systemId={systemId}
            onSubmitSuccess={handleSubmitSuccess}
          />
        </TabsContent>

        {/* 결재 상세 조회 탭 */}
        <TabsContent value="detail" className="space-y-6">
          <ApprovalDetail
            useFakeData={isTestMode}
            systemId={systemId}
            initialApInfId={selectedApInfId}
          />
        </TabsContent>

        {/* 결재 취소 탭 */}
        <TabsContent value="cancel" className="space-y-6">
          <ApprovalCancel
            useFakeData={isTestMode}
            systemId={systemId}
            initialApInfId={selectedApInfId}
            onCancelSuccess={handleCancelSuccess}
          />
        </TabsContent>

        {/* 상신함 탭 */}
        <TabsContent value="list" className="space-y-6">
          <ApprovalList
            useFakeData={isTestMode}
            systemId={systemId}
            type="submission"
            onItemClick={handleListItemClick}
          />
        </TabsContent>

        {/* 결재 이력 탭 */}
        <TabsContent value="history" className="space-y-6">
          <ApprovalList
            useFakeData={isTestMode}
            systemId={systemId}
            type="history"
            onItemClick={handleListItemClick}
          />
        </TabsContent>
      </Tabs>

      {/* 하단 정보 */}
      <Card>
        <CardContent className="pt-6">
          <div className="flex items-center justify-between text-sm text-gray-500">
            <div className="flex items-center gap-4">
              <div className="flex items-center gap-2">
                <Settings className="w-4 h-4" />
                <span>Knox API 결재 시스템</span>
              </div>
              <Separator orientation="vertical" className="h-4" />
              <div>
                Next.js 15 + shadcn/ui + TypeScript
              </div>
            </div>
            
            <div className="flex items-center gap-2">
              <span>버전:</span>
              <Badge variant="outline">v1.0.0</Badge>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}