"use client";

import { useParams, useRouter } from "next/navigation";
import { useState } from "react";
import { usePopCompanyPath } from "@/hooks/usePopCompanyPath";
import {
	ProcessWork,
	type ProcessWorkInfo,
} from "../../../_components/production/ProcessWork";

export default function WorkPage() {
	const params = useParams();
	const router = useRouter();
  const companyPath = usePopCompanyPath();
	const processId = params.processId as string;
	const [info, setInfo] = useState<ProcessWorkInfo | null>(null);

	const statusBadge = (() => {
		if (!info) return null;
		if (info.isCompleted) {
			return { text: "완료", cls: "bg-green-100 text-green-700" };
		}
		if (info.status === "in_progress") {
			return { text: "진행중", cls: "bg-blue-100 text-blue-700" };
		}
		return { text: info.status ?? "-", cls: "bg-gray-100 text-gray-600" };
	})();

	return (
		<div className="flex flex-col gap-4 flex-1 min-h-0">
			{/* ===== Back + Title + Status row ===== */}
			<div className="flex items-center gap-3">
				<button
					onClick={() => router.push(companyPath("/pop/production/process"))}
					className="w-10 h-10 rounded-xl bg-white border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-gray-50 active:scale-95 transition-all"
				>
					<svg className="w-5 h-5" 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>
				<h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">공정 작업</h1>
				<div className="flex-1" />
				{info && (
					<div className="flex items-center gap-4">
						<span className="inline-flex items-center gap-1.5">
							<span className="text-blue-700/70 text-xl font-medium">지시</span>
							<span className="text-blue-700 text-4xl font-bold">{info.planQty.toLocaleString()}</span>
						</span>
						<span className="inline-flex items-center gap-1.5">
							<span className="text-amber-500/70 text-xl font-medium">접수</span>
							<span className="text-amber-500 text-4xl font-bold">{info.inputQty.toLocaleString()}</span>
						</span>
					</div>
				)}
				<div className="flex-1" />
				{statusBadge && (
					<span
						className={`rounded-full px-5 py-2 text-lg font-bold ${statusBadge.cls}`}
					>
						{statusBadge.text}
					</span>
				)}
			</div>
			<ProcessWork
				processId={processId}
				onInfoChange={setInfo}
				hideInlineStatus
			/>
		</div>
	);
}
