"use client";

import React, { useState } from "react";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Settings, GitBranch, ClipboardList } from "lucide-react";
import { ProcessMasterTab } from "./ProcessMasterTab";
import { ItemRoutingTab } from "./ItemRoutingTab";
import { ProcessWorkStandardTab } from "./ProcessWorkStandardTab";

export default function ProcessInfoPage() {
  const [activeTab, setActiveTab] = useState("process");

  return (
    <div className="flex h-[calc(100vh-4rem)] flex-col bg-muted/30">
      <Tabs value={activeTab} onValueChange={setActiveTab} className="flex h-full flex-col">
        <div className="shrink-0 border-b bg-background px-4">
          <TabsList className="h-12 bg-transparent gap-1">
            <TabsTrigger
              value="process"
              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4"
            >
              <Settings className="mr-2 h-4 w-4" />
              공정 마스터
            </TabsTrigger>
            <TabsTrigger
              value="routing"
              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4"
            >
              <GitBranch className="mr-2 h-4 w-4" />
              품목별 라우팅
            </TabsTrigger>
            <TabsTrigger
              value="workstandard"
              className="data-[state=active]:border-b-2 data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none rounded-none px-4"
            >
              <ClipboardList className="mr-2 h-4 w-4" />
              공정 작업기준
            </TabsTrigger>
          </TabsList>
        </div>

        <TabsContent value="process" className="flex-1 overflow-hidden mt-0">
          <ProcessMasterTab />
        </TabsContent>

        <TabsContent value="routing" className="flex-1 overflow-hidden mt-0">
          <ItemRoutingTab />
        </TabsContent>

        <TabsContent value="workstandard" className="flex-1 overflow-hidden mt-0">
          <ProcessWorkStandardTab />
        </TabsContent>
      </Tabs>
    </div>
  );
}