import { useState } from "react";
import { Card, CardContent } from "./ui/card";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Badge } from "./ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./ui/table";
import { 
  Search, 
  Download, 
  Eye, 
  Edit,
  Plus,
  FileText,
  PlayCircle,
  CheckCircle,
  TrendingUp
} from "lucide-react";

export function SlatProductionPage() {
  const [activeTab, setActiveTab] = useState("workOrder");
  const [searchTerm, setSearchTerm] = useState("");

  const dashboardStats = {
    todayOrders: 3,
    inProgress: 5,
    completed: 8,
    completionRate: 88.5
  };

  const workOrderData = [
    {
      no: 1,
      orderDate: "2025-01-15",
      buyer: "삼성엔지니어링",
      siteName: "강남 오피스타워",
      productName: "SLAT-100",
      quantity: 15,
      requestDate: "2025-01-20",
      status: "작업중"
    },
    {
      no: 2,
      orderDate: "2025-01-16",
      buyer: "현대건설",
      siteName: "판교 IT밸리",
      productName: "SLAT-200",
      quantity: 20,
      requestDate: "2025-01-22",
      status: "대기"
    },
    {
      no: 3,
      orderDate: "2025-01-17",
      buyer: "대우건설",
      siteName: "송도 국제업무단지",
      productName: "SLAT-150",
      quantity: 12,
      requestDate: "2025-01-25",
      status: "완료"
    }
  ];

  const processData = [
    {
      no: 1,
      workOrder: "SL-2025-001",
      productName: "SLAT-100",
      siteName: "강남 오피스타워",
      quantity: 15,
      process: "재단",
      status: "진행중",
      progress: 45,
      worker: "박민수",
      startTime: "08:30",
      expectedEnd: "11:30"
    },
    {
      no: 2,
      workOrder: "SL-2025-002",
      productName: "SLAT-200",
      siteName: "판교 IT밸리",
      quantity: 20,
      process: "조립",
      status: "진행중",
      progress: 70,
      worker: "최영수",
      startTime: "09:00",
      expectedEnd: "13:00"
    }
  ];

  const getStatusBadge = (status: string) => {
    switch (status) {
      case "대기":
        return <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-300">대기</Badge>;
      case "작업중":
        return <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-300">작업중</Badge>;
      case "완료":
        return <Badge variant="outline" className="bg-green-50 text-green-700 border-green-300">완료</Badge>;
      default:
        return <Badge variant="outline">{status}</Badge>;
    }
  };

  return (
    <div className="p-3 md:p-6 space-y-4 md:space-y-6 bg-gradient-to-br from-slate-50 to-purple-50/30 min-h-screen">
      {/* 헤더 */}
      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
        <div>
          <h1 className="text-xl md:text-3xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
            슬랫 생산관리
          </h1>
          <p className="text-xs md:text-sm text-muted-foreground mt-1">
            슬랫 제품 작업지시 및 공정진행 현황 관리
          </p>
        </div>
        <div className="flex gap-2">
          <Button className="rounded-xl shadow-md bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700">
            <Plus className="h-4 w-4 mr-2" />
            작업지시 등록
          </Button>
          <Button variant="outline" className="rounded-xl">
            <Download className="h-4 w-4 mr-2" />
            Excel
          </Button>
        </div>
      </div>

      {/* 통계 카드 */}
      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
        <Card className="border-0 shadow-lg bg-gradient-to-br from-purple-500 to-purple-600 text-white">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs opacity-90">금일 작업지시</p>
                <p className="text-xl md:text-2xl font-bold mt-1">{dashboardStats.todayOrders}건</p>
              </div>
              <FileText className="h-8 w-8 opacity-80" />
            </div>
          </CardContent>
        </Card>

        <Card className="border-0 shadow-lg bg-gradient-to-br from-pink-500 to-pink-600 text-white">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs opacity-90">진행중</p>
                <p className="text-xl md:text-2xl font-bold mt-1">{dashboardStats.inProgress}건</p>
              </div>
              <PlayCircle className="h-8 w-8 opacity-80" />
            </div>
          </CardContent>
        </Card>

        <Card className="border-0 shadow-lg bg-gradient-to-br from-green-500 to-green-600 text-white">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs opacity-90">완료</p>
                <p className="text-xl md:text-2xl font-bold mt-1">{dashboardStats.completed}건</p>
              </div>
              <CheckCircle className="h-8 w-8 opacity-80" />
            </div>
          </CardContent>
        </Card>

        <Card className="border-0 shadow-lg bg-gradient-to-br from-indigo-500 to-indigo-600 text-white">
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-xs opacity-90">완료율</p>
                <p className="text-xl md:text-2xl font-bold mt-1">{dashboardStats.completionRate}%</p>
              </div>
              <TrendingUp className="h-8 w-8 opacity-80" />
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 메인 컨텐츠 */}
      <Card className="border-0 shadow-lg">
        <CardContent className="p-4 md:p-6">
          <Tabs value={activeTab} onValueChange={setActiveTab}>
            <TabsList className="grid w-full grid-cols-2 mb-6">
              <TabsTrigger value="workOrder">작업지시현황</TabsTrigger>
              <TabsTrigger value="process">공정진행현황</TabsTrigger>
            </TabsList>

            {/* 작업지시현황 탭 */}
            <TabsContent value="workOrder" className="space-y-4">
              <div className="flex flex-col sm:flex-row gap-3">
                <div className="relative flex-1">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                  <Input
                    placeholder="수주처, 현장명, 제품명 검색..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-10"
                  />
                </div>
              </div>

              {/* 데스크톱 테이블 */}
              <div className="hidden lg:block overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-16">No</TableHead>
                      <TableHead className="w-32">수주일</TableHead>
                      <TableHead>수주처</TableHead>
                      <TableHead>현장명</TableHead>
                      <TableHead>제품명</TableHead>
                      <TableHead className="w-20 text-right">수량</TableHead>
                      <TableHead className="w-32">요청일</TableHead>
                      <TableHead className="w-24">상태</TableHead>
                      <TableHead className="w-32">작업</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {workOrderData.map((item) => (
                      <TableRow key={item.no}>
                        <TableCell>{item.no}</TableCell>
                        <TableCell className="text-sm">{item.orderDate}</TableCell>
                        <TableCell>{item.buyer}</TableCell>
                        <TableCell>{item.siteName}</TableCell>
                        <TableCell className="font-medium">{item.productName}</TableCell>
                        <TableCell className="text-right">{item.quantity}</TableCell>
                        <TableCell className="text-sm">{item.requestDate}</TableCell>
                        <TableCell>{getStatusBadge(item.status)}</TableCell>
                        <TableCell>
                          <div className="flex gap-1">
                            <Button size="sm" variant="outline">
                              <Eye className="h-3 w-3" />
                            </Button>
                            <Button size="sm" variant="outline">
                              <Edit className="h-3 w-3" />
                            </Button>
                          </div>
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>

              {/* 모바일 카드 */}
              <div className="lg:hidden space-y-3">
                {workOrderData.map((item) => (
                  <Card key={item.no} className="border-0 shadow-md">
                    <CardContent className="p-4">
                      <div className="flex items-start justify-between mb-3">
                        <div className="flex gap-2">
                          <Badge variant="outline">No.{item.no}</Badge>
                          {getStatusBadge(item.status)}
                        </div>
                        <span className="text-xs text-muted-foreground">{item.orderDate}</span>
                      </div>
                      <h4 className="font-bold mb-1">{item.productName}</h4>
                      <p className="text-sm text-muted-foreground mb-2">{item.siteName}</p>
                      <div className="grid grid-cols-2 gap-2 text-sm mb-3">
                        <div>
                          <span className="text-muted-foreground">수주처:</span>
                          <span className="ml-1">{item.buyer}</span>
                        </div>
                        <div>
                          <span className="text-muted-foreground">수량:</span>
                          <span className="ml-1 font-medium">{item.quantity}</span>
                        </div>
                      </div>
                      <div className="flex gap-2 pt-3 border-t">
                        <Button size="sm" variant="outline" className="flex-1">
                          <Eye className="h-4 w-4 mr-1" />
                          상세
                        </Button>
                        <Button size="sm" variant="outline" className="flex-1">
                          <Edit className="h-4 w-4 mr-1" />
                          수정
                        </Button>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </TabsContent>

            {/* 공정진행현황 탭 */}
            <TabsContent value="process" className="space-y-4">
              <div className="hidden lg:block overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead className="w-16">No</TableHead>
                      <TableHead>작업지시번호</TableHead>
                      <TableHead>제품명</TableHead>
                      <TableHead>현장명</TableHead>
                      <TableHead className="w-20 text-right">수량</TableHead>
                      <TableHead>공정</TableHead>
                      <TableHead>상태</TableHead>
                      <TableHead>진행률</TableHead>
                      <TableHead>작업자</TableHead>
                      <TableHead>시작시간</TableHead>
                      <TableHead>완료예정</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {processData.map((item) => (
                      <TableRow key={item.no}>
                        <TableCell>{item.no}</TableCell>
                        <TableCell className="font-mono text-sm">{item.workOrder}</TableCell>
                        <TableCell className="font-medium">{item.productName}</TableCell>
                        <TableCell>{item.siteName}</TableCell>
                        <TableCell className="text-right">{item.quantity}</TableCell>
                        <TableCell>
                          <Badge variant="outline">{item.process}</Badge>
                        </TableCell>
                        <TableCell>{getStatusBadge(item.status)}</TableCell>
                        <TableCell>
                          <div className="flex items-center gap-2">
                            <div className="flex-1 bg-gray-200 rounded-full h-2">
                              <div
                                className="bg-purple-600 h-2 rounded-full"
                                style={{ width: `${item.progress}%` }}
                              />
                            </div>
                            <span className="text-sm text-muted-foreground w-12">{item.progress}%</span>
                          </div>
                        </TableCell>
                        <TableCell>{item.worker}</TableCell>
                        <TableCell className="text-sm">{item.startTime}</TableCell>
                        <TableCell className="text-sm">{item.expectedEnd}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>

              {/* 모바일 카드 */}
              <div className="lg:hidden space-y-3">
                {processData.map((item) => (
                  <Card key={item.no} className="border-0 shadow-md">
                    <CardContent className="p-4">
                      <div className="flex items-start justify-between mb-3">
                        <div className="flex gap-2">
                          <Badge variant="outline">{item.process}</Badge>
                          {getStatusBadge(item.status)}
                        </div>
                      </div>
                      <h4 className="font-bold mb-1">{item.productName}</h4>
                      <p className="text-sm text-muted-foreground mb-2">{item.siteName}</p>
                      <div className="space-y-2 mb-3">
                        <div className="flex items-center gap-2">
                          <span className="text-sm text-muted-foreground">진행률:</span>
                          <div className="flex-1 bg-gray-200 rounded-full h-2">
                            <div
                              className="bg-purple-600 h-2 rounded-full"
                              style={{ width: `${item.progress}%` }}
                            />
                          </div>
                          <span className="text-sm font-medium">{item.progress}%</span>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                ))}
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  );
}
