import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Button } from "./ui/button";
import { Badge } from "./ui/badge";
import { 
  ClipboardList, 
  Play, 
  Pause, 
  CheckCircle, 
  AlertTriangle,
  Clock,
  Target,
  TrendingUp,
  Package,
  Calendar,
  User
} from "lucide-react";
import { Progress } from "./ui/progress";

export function WorkerPerformance() {
  const [workStatus, setWorkStatus] = useState<"idle" | "working" | "paused">("idle");
  const [currentTime, setCurrentTime] = useState("00:00:00");

  // 금일 작업 지시 데이터
  const todayTasks = [
    {
      id: "WO-2024-001",
      product: "방화셔터 3000×3000",
      quantity: 2,
      priority: "긴급",
      deadline: "14:00",
      status: "진행중",
      progress: 60,
      startTime: "09:00"
    },
    {
      id: "WO-2024-002",
      product: "일반셔터 2500×2500",
      quantity: 3,
      priority: "보통",
      deadline: "17:00",
      status: "대기",
      progress: 0,
      startTime: null
    },
    {
      id: "WO-2024-003",
      product: "특수셔터 4000×3500",
      quantity: 1,
      priority: "긴급",
      deadline: "16:00",
      status: "대기",
      progress: 0,
      startTime: null
    }
  ];

  // 완료 작업 데이터
  const completedTasks = [
    {
      id: "WO-2024-000",
      product: "방화셔터 2800×2800",
      quantity: 2,
      completedTime: "08:45",
      qualityCheck: "합격"
    }
  ];

  const handleStartWork = (taskId: string) => {
    setWorkStatus("working");
    console.log("작업 시작:", taskId);
  };

  const handlePauseWork = () => {
    setWorkStatus("paused");
  };

  const handleCompleteWork = (taskId: string) => {
    setWorkStatus("idle");
    console.log("작업 완료:", taskId);
  };

  return (
    <div className="p-4 md:p-6 space-y-6">
      {/* 헤더 */}
      <div className="bg-card border border-border/20 rounded-xl p-6">
        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
          <div>
            <h1 className="text-3xl font-bold text-foreground mb-2">작업 실적 관리</h1>
            <p className="text-muted-foreground">금일 작업 지시 및 실적 입력</p>
          </div>
          <div className="flex items-center space-x-3">
            <div className="text-right">
              <p className="text-sm text-muted-foreground">작업자</p>
              <p className="font-bold text-foreground">박작업</p>
            </div>
            <div className="w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center">
              <User className="h-6 w-6 text-primary" />
            </div>
          </div>
        </div>
      </div>

      {/* 작업 현황 카드 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card className="border border-border/20">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm text-muted-foreground">금일 지시</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-primary">{todayTasks.length}</div>
            <p className="text-xs text-muted-foreground mt-1">건</p>
          </CardContent>
        </Card>

        <Card className="border border-border/20">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm text-muted-foreground">진행중</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-blue-600">
              {todayTasks.filter(t => t.status === "진행중").length}
            </div>
            <p className="text-xs text-muted-foreground mt-1">건</p>
          </CardContent>
        </Card>

        <Card className="border border-border/20">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm text-muted-foreground">완료</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-green-600">{completedTasks.length}</div>
            <p className="text-xs text-muted-foreground mt-1">건</p>
          </CardContent>
        </Card>

        <Card className="border border-border/20">
          <CardHeader className="pb-3">
            <CardTitle className="text-sm text-muted-foreground">목표 달성률</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-3xl font-bold text-orange-600">75%</div>
            <p className="text-xs text-muted-foreground mt-1">진행중</p>
          </CardContent>
        </Card>
      </div>

      {/* 금일 작업 지시 */}
      <Card className="border border-border/20">
        <CardHeader>
          <CardTitle className="flex items-center space-x-3">
            <ClipboardList className="h-6 w-6 text-primary" />
            <span>금일 작업 지시</span>
            <Badge className="bg-blue-500 text-white">{todayTasks.length}건</Badge>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {todayTasks.map((task, index) => (
              <div
                key={index}
                className={`p-4 rounded-xl border-2 transition-all ${
                  task.status === "진행중"
                    ? "border-blue-500 bg-blue-50 dark:bg-blue-950/20"
                    : "border-border/50 bg-card"
                }`}
              >
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                  <div className="flex-1">
                    <div className="flex items-center space-x-3 mb-2">
                      <Badge
                        className={`${
                          task.priority === "긴급"
                            ? "bg-red-500"
                            : task.priority === "높음"
                            ? "bg-orange-500"
                            : "bg-blue-500"
                        } text-white`}
                      >
                        {task.priority}
                      </Badge>
                      <span className="font-bold text-foreground">{task.id}</span>
                      <Badge
                        variant="outline"
                        className={
                          task.status === "진행중"
                            ? "border-blue-500 text-blue-600"
                            : "border-gray-500 text-gray-600"
                        }
                      >
                        {task.status}
                      </Badge>
                    </div>
                    <h3 className="font-bold text-lg text-foreground mb-1">{task.product}</h3>
                    <div className="flex items-center space-x-4 text-sm text-muted-foreground">
                      <div className="flex items-center space-x-1">
                        <Package className="h-4 w-4" />
                        <span>수량: {task.quantity}개</span>
                      </div>
                      <div className="flex items-center space-x-1">
                        <Clock className="h-4 w-4" />
                        <span>마감: {task.deadline}</span>
                      </div>
                      {task.startTime && (
                        <div className="flex items-center space-x-1">
                          <Play className="h-4 w-4" />
                          <span>시작: {task.startTime}</span>
                        </div>
                      )}
                    </div>
                    {task.status === "진행중" && (
                      <div className="mt-3">
                        <div className="flex justify-between text-sm mb-1">
                          <span className="text-muted-foreground">진행률</span>
                          <span className="font-bold text-blue-600">{task.progress}%</span>
                        </div>
                        <Progress value={task.progress} className="h-2" />
                      </div>
                    )}
                  </div>
                  <div className="flex flex-col space-y-2 md:w-48">
                    {task.status === "대기" && (
                      <Button
                        className="bg-blue-600 hover:bg-blue-700 text-white"
                        onClick={() => handleStartWork(task.id)}
                      >
                        <Play className="h-4 w-4 mr-2" />
                        작업 시작
                      </Button>
                    )}
                    {task.status === "진행중" && (
                      <>
                        <Button
                          variant="outline"
                          className="border-orange-500 text-orange-600"
                          onClick={handlePauseWork}
                        >
                          <Pause className="h-4 w-4 mr-2" />
                          일시정지
                        </Button>
                        <Button
                          className="bg-green-600 hover:bg-green-700 text-white"
                          onClick={() => handleCompleteWork(task.id)}
                        >
                          <CheckCircle className="h-4 w-4 mr-2" />
                          작업 완료
                        </Button>
                      </>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

      {/* 금일 완료 작업 */}
      <Card className="border border-border/20">
        <CardHeader>
          <CardTitle className="flex items-center space-x-3">
            <CheckCircle className="h-6 w-6 text-green-600" />
            <span>금일 완료 작업</span>
            <Badge className="bg-green-500 text-white">{completedTasks.length}건</Badge>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {completedTasks.map((task, index) => (
              <div
                key={index}
                className="p-4 bg-green-50 dark:bg-green-950/20 rounded-xl border border-green-200 dark:border-green-800"
              >
                <div className="flex items-center justify-between">
                  <div>
                    <div className="flex items-center space-x-2 mb-1">
                      <span className="font-bold text-foreground">{task.id}</span>
                      <Badge className="bg-green-600 text-white">완료</Badge>
                      <Badge
                        variant="outline"
                        className="border-green-600 text-green-600"
                      >
                        {task.qualityCheck}
                      </Badge>
                    </div>
                    <h3 className="font-bold text-foreground">{task.product}</h3>
                    <p className="text-sm text-muted-foreground">
                      수량: {task.quantity}개 · 완료시간: {task.completedTime}
                    </p>
                  </div>
                  <CheckCircle className="h-8 w-8 text-green-600" />
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
