"use client";

import { useRouter } from "next/navigation";
import React, { useCallback, useEffect, useState } from "react";
import { apiClient } from "@/lib/api/client";
import { DateRangePicker } from "../inventory/DateRangePicker";

/* ------------------------------------------------------------------ */
/* Types                                                               */
/* ------------------------------------------------------------------ */

interface InspectionRow {
	id: string;
	inspectionNumber: string;
	itemCode: string;
	itemName: string;
	inspectionType: string;
	totalQty: number;
	goodQty: number;
	badQty: number;
	passRate: number;
	overallJudgment: string;
	defectDescription: string;
	referenceTable: string;
	referenceId: string;
	memo: string;
	inspector: string;
	supplierCode: string;
	supplierName: string;
	isCompleted: string;
	completedDate: string;
	createdDate: string;
	time: string;
	date: string;
	fullDate: string;
}

interface DetailRow {
	inspectionItemName: string;
	inspectionStandard: string;
	passCriteria: string;
	measuredValue: string;
	judgment: string;
}

interface KpiData {
	total: number;
	pass: number;
	fail: number;
	waiting: number;
	passRate: number;
}

type TabKey = "all" | "incoming" | "process" | "outgoing";

/* ------------------------------------------------------------------ */
/* Helpers                                                             */
/* ------------------------------------------------------------------ */

function getJudgmentStyle(judgment: string): { color: string; label: string } {
	if (judgment === "합격" || judgment === "pass")
		return { color: "text-green-600 bg-green-50", label: "합격" };
	if (judgment === "불합격" || judgment === "fail")
		return { color: "text-red-600 bg-red-50", label: "불합격" };
	return { color: "text-amber-600 bg-amber-50", label: "대기" };
}

function classifyTab(inspectionType: string): TabKey {
	if (inspectionType?.includes("입고")) return "incoming";
	if (inspectionType?.includes("공정") || inspectionType?.includes("생산"))
		return "process";
	if (inspectionType?.includes("출하") || inspectionType?.includes("출고"))
		return "outgoing";
	return "all";
}

/* ------------------------------------------------------------------ */
/* Component                                                           */
/* ------------------------------------------------------------------ */

export function InspectionList() {
	const router = useRouter();

	const [dateFrom, setDateFrom] = useState(() =>
		new Date().toISOString().slice(0, 10),
	);
	const [dateTo, setDateTo] = useState(() =>
		new Date().toISOString().slice(0, 10),
	);
	const [keyword, setKeyword] = useState("");
	const [judgmentFilter, setJudgmentFilter] = useState("전체");

	const [items, setItems] = useState<InspectionRow[]>([]);
	const [kpi, setKpi] = useState<KpiData>({
		total: 0,
		pass: 0,
		fail: 0,
		waiting: 0,
		passRate: 0,
	});
	const [loading, setLoading] = useState(true);
	const [activeTab, setActiveTab] = useState<TabKey>("all");
	const [selectedItem, setSelectedItem] = useState<InspectionRow | null>(null);
	const [selectedDetails, setSelectedDetails] = useState<DetailRow[]>([]);

	/* Fetch data — 마스터 (inspection_result_mng) */
	const fetchData = useCallback(async () => {
		setLoading(true);
		try {
			const res = await apiClient.post(
				"/table-management/tables/inspection_result_mng/data",
				{
					page: 1,
					pageSize: 500,
				},
			);

			const rows: any[] =
				res.data?.data?.data ?? res.data?.data ?? res.data?.rows ?? [];

			const filtered = rows.filter((r: any) => {
				const d = (r.inspection_date || r.created_date || "").slice(0, 10);
				if (!d) return true;
				if (dateFrom && d < dateFrom) return false;
				if (dateTo && d > dateTo) return false;
				return true;
			});

			const mapped: InspectionRow[] = filtered.map((r: any, idx: number) => {
				const overall = r.overall_judgment || "";
				const totalQ = Number(r.total_qty || 0);
				const goodQ = Number(r.good_qty || 0);
				const passRate = totalQ > 0 ? Math.round((goodQ / totalQ) * 100) : 0;
				return {
					id: `${r.id || idx}`,
					inspectionNumber: r.inspection_number || "",
					itemCode: r.item_code || "",
					itemName: r.item_name || "-",
					inspectionType: r.inspection_type || "",
					totalQty: totalQ,
					goodQty: goodQ,
					badQty: Number(r.bad_qty || 0),
					passRate,
					overallJudgment: overall,
					defectDescription: r.defect_description || "",
					referenceTable: r.reference_table || "",
					referenceId: r.reference_id || "",
					memo: r.memo || "",
					inspector: r.inspector || r.writer || "",
					supplierCode: r.supplier_code || "",
					supplierName: r.supplier_name || "",
					isCompleted: r.is_completed || "N",
					completedDate: r.completed_date || "",
					createdDate: r.created_date || "",
					time: r.inspection_date
						? new Date(r.inspection_date).toLocaleTimeString("ko-KR", {
								hour: "2-digit",
								minute: "2-digit",
							})
						: "--:--",
					date: (r.inspection_date || r.created_date || "").slice(0, 10),
					fullDate: r.inspection_date
						? new Date(r.inspection_date).toLocaleString("ko-KR")
						: "-",
				};
			});

			setItems(mapped);

			const total = mapped.length;
			const pass = mapped.filter((m) => m.overallJudgment === "합격").length;
			const fail = mapped.filter((m) => m.overallJudgment === "불합격").length;
			const waiting = total - pass - fail;
			const passRate = total > 0 ? Math.round((pass / total) * 100) : 0;

			setKpi({ total, pass, fail, waiting, passRate });
		} catch {
			setItems([]);
			setKpi({ total: 0, pass: 0, fail: 0, waiting: 0, passRate: 0 });
		} finally {
			setLoading(false);
		}
	}, [dateFrom, dateTo]);

	/* Fetch detail when selected */
	useEffect(() => {
		if (!selectedItem) {
			setSelectedDetails([]);
			return;
		}
		apiClient
			.post("/table-management/tables/inspection_result/data", {
				page: 1,
				pageSize: 100,
				filters: { master_id: selectedItem.id },
			})
			.then((res) => {
				const rows: any[] = res.data?.data?.data ?? res.data?.data ?? [];
				const details: DetailRow[] = rows
					.filter((r: any) => r.master_id === selectedItem.id)
					.map((r: any) => ({
						inspectionItemName: r.inspection_item_name || "-",
						inspectionStandard: r.inspection_standard || r.pass_criteria || "-",
						passCriteria: r.pass_criteria || "-",
						measuredValue: r.measured_value || "-",
						judgment: r.judgment || "",
					}));
				setSelectedDetails(details);
			})
			.catch(() => setSelectedDetails([]));
	}, [selectedItem]);

	useEffect(() => {
		fetchData();
	}, [fetchData]);

	/* Filter */
	const filtered = items.filter((item) => {
		if (activeTab !== "all") {
			const tab = classifyTab(item.inspectionType);
			if (tab !== activeTab) return false;
		}
		if (keyword) {
			const kw = keyword.toLowerCase();
			if (
				!item.itemName.toLowerCase().includes(kw) &&
				!item.itemCode.toLowerCase().includes(kw)
			)
				return false;
		}
		if (judgmentFilter !== "전체") {
			const j = item.overallJudgment;
			if (judgmentFilter === "합격" && !(j === "합격" || j === "pass"))
				return false;
			if (judgmentFilter === "불합격" && !(j === "불합격" || j === "fail"))
				return false;
			if (
				judgmentFilter === "대기" &&
				(j === "합격" || j === "pass" || j === "불합격" || j === "fail")
			)
				return false;
		}
		return true;
	});

	// 탭별 카운트
	const counts = {
		all: items.length,
		incoming: items.filter((i) => classifyTab(i.inspectionType) === "incoming")
			.length,
		process: items.filter((i) => classifyTab(i.inspectionType) === "process")
			.length,
		outgoing: items.filter((i) => classifyTab(i.inspectionType) === "outgoing")
			.length,
	};

	const TABS: { key: TabKey; label: string; count: number }[] = [
		{ key: "all", label: "전체", count: counts.all },
		{ key: "incoming", label: "입고검사", count: counts.incoming },
		{ key: "process", label: "공정검사", count: counts.process },
		{ key: "outgoing", label: "출하검사", count: counts.outgoing },
	];

	return (
		<div className="flex flex-col gap-4">
			{/* Back + Title */}
			<div className="flex items-center gap-3">
				<button
					onClick={() => router.push("/pop/quality")}
					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>
				<div>
					<h1 className="text-xl sm:text-2xl font-bold text-gray-900 tracking-tight">
						검사관리
					</h1>
					<p className="text-xs text-gray-400 mt-0.5">
						검사 결과 내역을 조회합니다
					</p>
				</div>
			</div>

			{/* Filters */}
			<div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-3 sm:p-4">
				<div className="flex items-end gap-2">
					<div className="flex-1 grid grid-cols-1 sm:grid-cols-3 gap-2">
						<DateRangePicker
							from={dateFrom}
							to={dateTo}
							onChange={(f, t) => {
								setDateFrom(f);
								setDateTo(t);
							}}
						/>
						<div>
							<label className="text-[10px] font-semibold text-gray-400 mb-1 block">
								품목 / 검사번호
							</label>
							<input
								type="text"
								value={keyword}
								onChange={(e) => setKeyword(e.target.value)}
								placeholder="품목명 또는 검사번호"
								className="w-full px-2 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-violet-400"
							/>
						</div>
						<div>
							<label className="text-[10px] font-semibold text-gray-400 mb-1 block">
								판정
							</label>
							<select
								value={judgmentFilter}
								onChange={(e) => setJudgmentFilter(e.target.value)}
								className="w-full px-2 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-violet-400 bg-white"
							>
								<option value="전체">전체</option>
								<option value="합격">합격</option>
								<option value="불합격">불합격</option>
								<option value="대기">대기</option>
							</select>
						</div>
					</div>
					<div className="flex gap-1.5 shrink-0 pb-[1px]">
						<button
							onClick={fetchData}
							className="h-[42px] px-4 rounded-lg text-sm font-semibold text-white active:scale-95 transition-all"
							style={{ background: "linear-gradient(135deg,#8b5cf6,#6d28d9)" }}
						>
							조회
						</button>
						<button
							onClick={() => {
								setDateFrom(new Date().toISOString().slice(0, 10));
								setDateTo(new Date().toISOString().slice(0, 10));
								setKeyword("");
								setJudgmentFilter("전체");
							}}
							className="h-[42px] w-[42px] rounded-lg text-sm font-semibold text-gray-500 bg-gray-100 active:scale-95 transition-all flex items-center justify-center"
						>
							↻
						</button>
					</div>
				</div>
			</div>

			{/* KPI */}
			<div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-3 sm:p-4">
				<div className="grid grid-cols-5 gap-0">
					<KpiCell
						icon="📋"
						value={loading ? "-" : kpi.total.toLocaleString()}
						label="전체"
						color="text-gray-900"
					/>
					<KpiCell
						icon="✅"
						value={loading ? "-" : kpi.pass.toLocaleString()}
						label="합격"
						color="text-green-600"
					/>
					<KpiCell
						icon="❌"
						value={loading ? "-" : kpi.fail.toLocaleString()}
						label="불합격"
						color="text-red-600"
					/>
					<KpiCell
						icon="⏳"
						value={loading ? "-" : kpi.waiting.toLocaleString()}
						label="대기"
						color="text-amber-600"
					/>
					<KpiCell
						icon="📊"
						value={loading ? "-" : `${kpi.passRate}%`}
						label="합격률"
						color="text-blue-600"
					/>
				</div>
			</div>

			{/* Tabs */}
			<div className="flex gap-2 overflow-x-auto">
				{TABS.map((tab) => (
					<button
						key={tab.key}
						onClick={() => setActiveTab(tab.key)}
						className={`shrink-0 px-4 py-2 rounded-full text-sm font-semibold transition-all ${
							activeTab === tab.key
								? "text-white shadow-sm"
								: "text-gray-600 bg-gray-100 hover:bg-gray-200 active:scale-95"
						}`}
						style={
							activeTab === tab.key
								? { background: "linear-gradient(135deg,#8b5cf6,#6d28d9)" }
								: undefined
						}
					>
						{tab.label} {tab.count}
					</button>
				))}
			</div>

			{/* List */}
			<div className="flex flex-col gap-2">
				<div className="flex items-center justify-between px-1">
					<span className="text-xs font-semibold text-gray-500">검사 내역</span>
					<span className="text-xs text-gray-400">총 {filtered.length}건</span>
				</div>

				{loading ? (
					<div className="flex flex-col gap-3 py-4">
						{[1, 2, 3, 4].map((i) => (
							<div
								key={i}
								className="bg-white rounded-2xl border border-gray-100 p-4 animate-pulse"
							>
								<div className="flex items-center gap-3">
									<div className="w-10 h-10 rounded-xl bg-gray-100" />
									<div className="flex-1 flex flex-col gap-2">
										<div className="h-4 bg-gray-100 rounded w-2/3" />
										<div className="h-3 bg-gray-50 rounded w-1/2" />
									</div>
									<div className="h-5 w-12 bg-gray-100 rounded-full" />
								</div>
							</div>
						))}
					</div>
				) : filtered.length === 0 ? (
					<div className="flex flex-col items-center justify-center py-16 text-gray-400">
						<svg
							className="w-16 h-16 mb-4 opacity-20"
							fill="none"
							stroke="currentColor"
							strokeWidth={1}
							viewBox="0 0 24 24"
						>
							<path
								strokeLinecap="round"
								strokeLinejoin="round"
								d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
							/>
						</svg>
						<p className="text-sm font-medium text-gray-500 mb-1">
							검사 내역이 없습니다
						</p>
						<p className="text-xs text-gray-400">
							기간을 변경하거나 입고/생산 시 검사를 진행해주세요
						</p>
					</div>
				) : (
					filtered.map((item) => {
						const js = getJudgmentStyle(item.overallJudgment);
						return (
							<div
								key={item.id}
								onClick={() => setSelectedItem(item)}
								className="bg-white rounded-2xl border border-gray-100 shadow-sm p-4 hover:shadow-md transition-shadow cursor-pointer active:scale-[0.98]"
							>
								<div className="flex items-center gap-3">
									<div
										className="w-10 h-10 rounded-xl flex items-center justify-center text-white text-lg shrink-0"
										style={{
											background: "linear-gradient(135deg,#8b5cf6,#6d28d9)",
										}}
									>
										🔍
									</div>
									<div className="flex-1 min-w-0">
										<div className="flex items-center gap-2">
											<span className="text-[10px] font-semibold text-violet-600">
												{item.inspectionNumber}
											</span>
											<span
												className={`text-[10px] font-bold px-1.5 py-0.5 rounded-full shrink-0 ${js.color}`}
											>
												{js.label}
											</span>
										</div>
										<div className="text-sm font-bold text-gray-900 truncate mt-0.5">
											{item.itemName}
											{item.itemCode ? ` (${item.itemCode})` : ""}
										</div>
										<div className="text-xs text-gray-400 mt-0.5 truncate">
											{item.inspectionType}
											{item.supplierName ? ` · ${item.supplierName}` : ""}
										</div>
									</div>
									<div className="text-right shrink-0">
										<p className="text-sm font-bold text-gray-700">
											<span className="text-green-600">{item.goodQty}</span>
											<span className="text-gray-300 mx-0.5">/</span>
											<span className="text-red-600">{item.badQty}</span>
										</p>
										<p className="text-[10px] text-violet-600 font-semibold mt-0.5">
											{item.passRate}%
										</p>
										<p className="text-[10px] text-gray-400">{item.time}</p>
									</div>
								</div>
							</div>
						);
					})
				)}
			</div>

			{/* Detail Bottom Sheet */}
			{selectedItem && (
				<div
					className="fixed inset-0 z-50"
					onClick={() => setSelectedItem(null)}
				>
					<div className="absolute inset-0 bg-black/40" />
					<div
						className="absolute bottom-0 left-1/2 -translate-x-1/2 w-full max-w-lg bg-white rounded-t-3xl shadow-2xl overflow-y-auto z-10"
						style={{ maxHeight: "85vh" }}
						onClick={(e) => e.stopPropagation()}
					>
						<div className="sticky top-0 bg-white pt-3 pb-2 flex justify-center rounded-t-3xl z-10">
							<div className="w-10 h-1 rounded-full bg-gray-300" />
						</div>
						<div className="flex items-center justify-between px-5 pb-4 border-b border-gray-100">
							<h3 className="text-lg font-bold text-gray-900">
								{selectedItem.inspectionType} 상세 —{" "}
								{selectedItem.inspectionNumber}
							</h3>
							<button
								onClick={() => setSelectedItem(null)}
								className="w-8 h-8 rounded-lg flex items-center justify-center text-gray-400 hover:bg-gray-100"
							>
								<svg
									className="w-5 h-5"
									fill="none"
									stroke="currentColor"
									strokeWidth={2}
									viewBox="0 0 24 24"
								>
									<path
										strokeLinecap="round"
										strokeLinejoin="round"
										d="M6 18L18 6M6 6l12 12"
									/>
								</svg>
							</button>
						</div>
						<div className="px-5 py-4 space-y-5">
							<div className="grid grid-cols-2 gap-4">
								<DetailField
									label="검사번호"
									value={selectedItem.inspectionNumber}
								/>
								<div>
									<p className="text-[11px] font-semibold text-violet-600 mb-1">
										검사유형
									</p>
									<span className="inline-block text-xs font-bold px-2.5 py-1 rounded-full bg-violet-50 text-violet-700">
										{selectedItem.inspectionType}
									</span>
								</div>
							</div>
							<div className="grid grid-cols-2 gap-4">
								<DetailField label="검사일시" value={selectedItem.fullDate} />
								<div>
									<p className="text-[11px] font-semibold text-violet-600 mb-1">
										판정
									</p>
									<span
										className={`inline-block text-xs font-bold px-2.5 py-1 rounded-full ${getJudgmentStyle(selectedItem.overallJudgment).color}`}
									>
										{getJudgmentStyle(selectedItem.overallJudgment).label}
									</span>
								</div>
							</div>
							<div className="border-t border-gray-100" />
							<div>
								<p className="text-[11px] font-semibold text-violet-600 mb-1">
									품목
								</p>
								<p className="text-base font-bold text-gray-900">
									{selectedItem.itemName}
									{selectedItem.itemCode ? ` (${selectedItem.itemCode})` : ""}
								</p>
							</div>
							<div className="grid grid-cols-2 gap-4">
								<DetailField
									label="거래처"
									value={selectedItem.supplierName || "-"}
								/>
								<div>
									<p className="text-[11px] font-semibold text-violet-600 mb-1">
										합격률
									</p>
									<p className="text-lg font-bold text-violet-600">
										{selectedItem.passRate}%
									</p>
								</div>
							</div>
							<div className="grid grid-cols-3 gap-4">
								<div>
									<p className="text-[11px] font-semibold text-violet-600 mb-1">
										검사수량
									</p>
									<p className="text-lg font-bold text-gray-900">
										{selectedItem.totalQty.toLocaleString()}
									</p>
								</div>
								<div>
									<p className="text-[11px] font-semibold text-green-600 mb-1">
										합격
									</p>
									<p className="text-lg font-bold text-green-600">
										{selectedItem.goodQty.toLocaleString()}
									</p>
								</div>
								<div>
									<p className="text-[11px] font-semibold text-red-600 mb-1">
										불합격
									</p>
									<p className="text-lg font-bold text-red-600">
										{selectedItem.badQty.toLocaleString()}
									</p>
								</div>
							</div>
							{selectedItem.defectDescription && (
								<DetailField
									label="불량내용"
									value={selectedItem.defectDescription}
								/>
							)}
							<DetailField
								label="검사자"
								value={selectedItem.inspector || "-"}
							/>
							{selectedItem.memo && (
								<DetailField label="비고" value={selectedItem.memo} />
							)}

							{/* 검사 항목별 결과 (디테일) */}
							{selectedDetails.length > 0 && (
								<div>
									<p className="text-sm font-bold text-gray-900 mb-2">
										검사 항목별 결과
									</p>
									<div className="bg-gray-50 rounded-xl p-3 space-y-2">
										{selectedDetails.map((d, idx) => {
											const dj = getJudgmentStyle(d.judgment);
											return (
												<div
													key={idx}
													className="bg-white rounded-lg p-3 border border-gray-100"
												>
													<div className="flex items-center justify-between mb-1">
														<span className="text-sm font-bold text-gray-900">
															{d.inspectionItemName}
														</span>
														<span
															className={`text-[10px] font-bold px-1.5 py-0.5 rounded-full ${dj.color}`}
														>
															{dj.label}
														</span>
													</div>
													<div className="grid grid-cols-2 gap-2 text-xs">
														<div>
															<span className="text-gray-400">기준</span>
															<p className="text-gray-700">
																{d.inspectionStandard}
															</p>
														</div>
														<div>
															<span className="text-gray-400">측정값</span>
															<p className="text-gray-700 font-semibold">
																{d.measuredValue}
															</p>
														</div>
													</div>
												</div>
											);
										})}
									</div>
								</div>
							)}
						</div>
						<div className="px-5 py-4 border-t border-gray-100">
							<button
								onClick={() => setSelectedItem(null)}
								className="w-full py-3 rounded-xl text-sm font-bold text-gray-600 bg-gray-100 active:scale-95 transition-all"
							>
								닫기
							</button>
						</div>
					</div>
				</div>
			)}
		</div>
	);
}

function DetailField({ label, value }: { label: string; value: string }) {
	return (
		<div>
			<p className="text-[11px] font-semibold text-violet-600 mb-1">{label}</p>
			<p className="text-sm font-semibold text-gray-900 break-all">{value}</p>
		</div>
	);
}

function KpiCell({
	icon,
	value,
	label,
	color,
}: {
	icon: string;
	value: string;
	label: string;
	color: string;
}) {
	return (
		<div className="flex flex-col items-center py-2">
			<span className="text-lg mb-0.5">{icon}</span>
			<span
				className={`text-xl sm:text-2xl font-extrabold leading-none ${color}`}
				style={{ fontVariantNumeric: "tabular-nums" }}
			>
				{value}
			</span>
			<span className="text-[10px] font-medium text-gray-400 mt-1">
				{label}
			</span>
		</div>
	);
}
