'use client';

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { useCurrentTime } from "@/hooks/useCurrentTime";
import {
    Building2,
    MapPin,
    HardHat,
    AlertTriangle,
    FileText,
    Calendar as CalendarIcon,
    Clock,
    ArrowUpRight,
    ClipboardList,
    Hammer
} from "lucide-react";

export function ConstructionMainDashboard() {
    const currentTime = useCurrentTime();

    // 가상 데이터: 건설 프로젝트 현황
    const projectStats = {
        totalProjects: 12,
        active: 5, // 진행중
        bidding: 3, // 입찰중
        planning: 4, // 설계/계획
    };

    const recentProjects = [
        { id: 1, name: "강남 데이터센터 신축공사", status: "공사중", progress: 45, manager: "김현장", deadline: "2024-12-30" },
        { id: 2, name: "판교 오피스 리모델링", status: "마감", progress: 95, manager: "이공사", deadline: "2024-06-15" },
        { id: 3, name: "부산 물류센터 증축", status: "착공준비", progress: 5, manager: "박안전", deadline: "2025-03-20" },
    ];

    const upcomingEvents = [
        { id: 1, type: "현장설명회", title: "송도 주상복합 입찰 설명회", date: "2024-06-25 14:00", location: "인천 송도 현장" },
        { id: 2, type: "입찰마감", title: "세종 스마트시티 관로공사", date: "2024-06-28 17:00", location: "전자조달" },
    ];

    return (
        <div className="p-4 md:p-6 space-y-6">
            {/* 헤더 섹션 */}
            <div className="bg-card border border-border/20 rounded-xl p-4 md:p-6 mb-4">
                <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                    <div>
                        <h1 className="text-2xl font-bold text-foreground flex items-center gap-2">
                            <Building2 className="w-8 h-8 text-blue-600" />
                            주일기업 프로젝트 현황
                        </h1>
                        <p className="text-sm text-muted-foreground mt-1">
                            {currentTime} · 실시간 현장 모니터링
                        </p>
                    </div>
                    <div className="flex gap-2">
                        <Button className="bg-blue-600 hover:bg-blue-700">
                            <ClipboardList className="w-4 h-4 mr-2" />
                            일일 작업보고
                        </Button>
                    </div>
                </div>
            </div>

            {/* 상단 통계 카드 */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">진행중인 현장</CardTitle>
                        <MapPin className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">{projectStats.active}개소</div>
                        <p className="text-xs text-muted-foreground mt-1">
                            총 {projectStats.totalProjects}개 프로젝트 중
                        </p>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">금일 출력 인원</CardTitle>
                        <HardHat className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">142명</div>
                        <p className="text-xs text-muted-foreground mt-1">
                            <span className="text-green-500 font-medium">+12명</span> (전일 대비)
                        </p>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">입찰 진행</CardTitle>
                        <FileText className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold">{projectStats.bidding}건</div>
                        <p className="text-xs text-muted-foreground mt-1">
                            마감 임박 1건
                        </p>
                    </CardContent>
                </Card>
                <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                        <CardTitle className="text-sm font-medium">안전 이슈</CardTitle>
                        <AlertTriangle className="h-4 w-4 text-orange-500" />
                    </CardHeader>
                    <CardContent>
                        <div className="text-2xl font-bold text-orange-600">0건</div>
                        <p className="text-xs text-muted-foreground mt-1">
                            무재해 125일째
                        </p>
                    </CardContent>
                </Card>
            </div>

            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
                {/* 주요 프로젝트 진행 현황 */}
                <Card className="lg:col-span-2">
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <Hammer className="w-5 h-5" />
                            주요 프로젝트 진행 현황
                        </CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="space-y-4">
                            {recentProjects.map((project) => (
                                <div key={project.id} className="flex items-center justify-between p-4 bg-muted/40 rounded-lg border">
                                    <div className="flex-1">
                                        <div className="flex items-center gap-2 mb-1">
                                            <span className="font-bold">{project.name}</span>
                                            <Badge variant={project.status === '공사중' ? 'default' : 'secondary'}>
                                                {project.status}
                                            </Badge>
                                        </div>
                                        <div className="flex items-center gap-4 text-sm text-muted-foreground">
                                            <span className="flex items-center gap-1">
                                                <HardHat className="w-3 h-3" /> {project.manager}
                                            </span>
                                            <span className="flex items-center gap-1">
                                                <CalendarIcon className="w-3 h-3" /> {project.deadline}까지
                                            </span>
                                        </div>
                                    </div>
                                    <div className="w-32 text-right">
                                        <div className="text-2xl font-bold text-blue-600">{project.progress}%</div>
                                        <div className="text-xs text-muted-foreground">공정률</div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </CardContent>
                </Card>

                {/* 일정 / 알림 */}
                <Card>
                    <CardHeader>
                        <CardTitle className="flex items-center gap-2">
                            <Clock className="w-5 h-5" />
                            주요 일정 (현설/입찰)
                        </CardTitle>
                    </CardHeader>
                    <CardContent>
                        <div className="space-y-4">
                            {upcomingEvents.map((event) => (
                                <div key={event.id} className="flex gap-3 items-start border-l-4 border-blue-200 pl-3 py-1">
                                    <div className="flex-1">
                                        <Badge variant="outline" className="mb-1 text-xs">
                                            {event.type}
                                        </Badge>
                                        <p className="font-medium text-sm">{event.title}</p>
                                        <div className="flex items-center gap-2 mt-1 text-xs text-muted-foreground">
                                            <span>{event.date}</span>
                                            <span>|</span>
                                            <span>{event.location}</span>
                                        </div>
                                    </div>
                                </div>
                            ))}
                            <Button variant="ghost" className="w-full text-sm text-muted-foreground">
                                전체 일정 보기
                                <ArrowUpRight className="w-4 h-4 ml-1" />
                            </Button>
                        </div>
                    </CardContent>
                </Card>
            </div>

        </div>
    );
}
