'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 { FileText, Eye, History } from 'lucide-react';

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

interface ApprovalManagerProps {
  defaultTab?: string;
  currentUser?: {
    id: number | string;
    name: string | null;
    email: string;
    epId: string | null;
  } | null;
}

export default function ApprovalManager({ 
  defaultTab = 'submit',
  currentUser,
}: ApprovalManagerProps) {
  const [currentTab, setCurrentTab] = useState(defaultTab);
  const [selectedApInfId, setSelectedApInfId] = useState<string>('');

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


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

  return (
    <div className="w-full max-w-5xl 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">
            {/* 좌측 영역 - 현재는 테스트 모드 UI 제거로 여백 유지 */}
            <div />
            
            {process.env.NEXT_PUBLIC_KNOX_SYSTEM_ID && (
              <div className="flex items-center gap-2 text-sm text-gray-500">
                <span>시스템 ID:</span>
                <Badge variant="outline">{process.env.NEXT_PUBLIC_KNOX_SYSTEM_ID}</Badge>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      {/* 메인 탭 */}
      <Tabs value={currentTab} onValueChange={setCurrentTab} className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <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="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">
          <div className="w-full">
            <ApprovalSubmit onSubmitSuccess={handleSubmitSuccess} currentUser={currentUser ?? undefined} />
          </div>
        </TabsContent>

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


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

        {/* 결재 이력 탭 */}
        <TabsContent value="history" className="space-y-6">
          <div className="w-full">
            <ApprovalList
              onItemClick={handleListItemClick}
            />
          </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}