"use client";

import React, { useState } from "react";
import { useRouter } from "next/navigation";
import { PopShell } from "../PopShell";

type TabType = "all" | "running" | "idle" | "inspect" | "stopped";

export function EquipmentInspection() {
  const router = useRouter();
  const [activeTab, setActiveTab] = useState<TabType>("all");
  const [searchKeyword, setSearchKeyword] = useState("");

  // 시안 기준 KPI (점검 테이블 없으므로 0)
  const kpi = { total: 0, running: 0, idle: 0, inspect: 0, rate: "0%" };

  const tabs: { key: TabType; label: string; count: number }[] = [
    { key: "all", label: "전체", count: kpi.total },
    { key: "running", label: "가동", count: kpi.running },
    { key: "idle", label: "대기", count: kpi.idle },
    { key: "inspect", label: "점검", count: kpi.inspect },
    { key: "stopped", label: "비가동", count: 0 },
  ];

  return (
    <PopShell title="점검관리" showBanner={false}>
      <div className="min-h-screen bg-gray-50">
        {/* Header */}
        <div className="bg-white border-b border-gray-200 px-5 pt-5 pb-4">
          <div className="flex items-center gap-3 mb-4">
            <button onClick={() => router.back()} className="w-9 h-9 rounded-xl bg-gray-100 flex items-center justify-center">
              <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
              </svg>
            </button>
            <div>
              <h1 className="text-xl font-bold text-gray-900">🔧 점검관리</h1>
            </div>
          </div>

          {/* Search */}
          <div className="flex gap-2">
            <input
              type="text"
              placeholder="설비명 / 설비코드 검색"
              value={searchKeyword}
              onChange={(e) => setSearchKeyword(e.target.value)}
              className="flex-1 px-4 py-3 rounded-xl border border-gray-200 text-sm focus:outline-none focus:border-amber-400"
            />
            <select className="px-3 py-3 rounded-xl border border-gray-200 text-sm bg-white">
              <option>전체</option>
              <option>가동</option>
              <option>대기</option>
              <option>점검</option>
            </select>
            <button className="px-5 py-3 rounded-xl bg-amber-500 text-white text-sm font-bold active:bg-amber-600">
              🔍 조회
            </button>
          </div>
        </div>

        {/* KPI */}
        <div className="px-5 py-3">
          <div className="grid grid-cols-5 gap-2">
            {[
              { label: "전체", value: kpi.total, color: "border-t-amber-500", icon: "🎬" },
              { label: "가동", value: kpi.running, color: "border-t-green-500", icon: "🟢" },
              { label: "대기", value: kpi.idle, color: "border-t-blue-500", icon: "🔵" },
              { label: "점검", value: kpi.inspect, color: "border-t-red-500", icon: "🔴" },
              { label: "가동률", value: kpi.rate, color: "border-t-purple-500", icon: "📊" },
            ].map((item) => (
              <div key={item.label} className={`bg-white rounded-xl border border-gray-200 ${item.color} border-t-[3px] p-3 text-center`}>
                <p className="text-lg mb-0.5">{item.icon}</p>
                <p className="text-xl font-bold text-gray-900">{item.value}</p>
                <p className="text-[10px] text-gray-500">{item.label}</p>
              </div>
            ))}
          </div>
        </div>

        {/* Tabs */}
        <div className="px-5">
          <div className="flex bg-white rounded-xl border border-gray-200 overflow-hidden">
            {tabs.map((tab) => (
              <button
                key={tab.key}
                onClick={() => setActiveTab(tab.key)}
                className={`flex-1 py-3 text-xs font-medium text-center relative transition-all ${
                  activeTab === tab.key
                    ? "text-amber-600 font-bold bg-amber-50"
                    : "text-gray-500"
                }`}
              >
                {tab.label}
                <span className={`ml-1 text-[9px] px-1.5 py-0.5 rounded-full font-bold ${
                  activeTab === tab.key ? "bg-amber-500 text-white" : "bg-gray-200 text-gray-500"
                }`}>
                  {tab.count}
                </span>
                {activeTab === tab.key && (
                  <span className="absolute bottom-0 left-[20%] right-[20%] h-[3px] bg-amber-500 rounded-t" />
                )}
              </button>
            ))}
          </div>
        </div>

        {/* Card List — 데이터 없음 */}
        <div className="px-5 py-6">
          <div className="flex flex-col items-center justify-center py-20 text-gray-400">
            <span className="text-5xl mb-4">🔧</span>
            <p className="text-base font-semibold mb-1">등록된 설비 점검 정보가 없습니다</p>
            <p className="text-sm">PC에서 설비 점검 데이터를 등록하면 여기에 표시됩니다</p>
          </div>
        </div>
      </div>
    </PopShell>
  );
}
