"use client";

import { useState, useEffect } from "react";
import Tooltip from "@/components/ui/Tooltip";
import { formatDate } from "@/lib/utils";

export default function FieldWithHistory({
	tableName,
	recordId,
	fieldName,
	currentValue,
	displayValue = null,
	label = null,
	className = "",
}) {
	const [hasHistory, setHasHistory] = useState(false);
	const [history, setHistory] = useState([]);
	const [loading, setLoading] = useState(true);

	useEffect(() => {
		const fetchHistory = async () => {
			try {
				const response = await fetch(
					`/api/field-history?table_name=${tableName}&record_id=${recordId}&field_name=${fieldName}`
				);
				if (response.ok) {
					const historyData = await response.json();
					setHistory(historyData);
					setHasHistory(historyData.length > 0);
				}
			} catch (error) {
				console.error("Failed to fetch field history:", error);
			} finally {
				setLoading(false);
			}
		};

		if (tableName && recordId && fieldName) {
			fetchHistory();
		} else {
			setLoading(false);
		}
	}, [tableName, recordId, fieldName]);

	// Format value for display
	const getDisplayValue = (value) => {
		if (displayValue !== null) return displayValue;
		if (value && fieldName.includes("date")) {
			try {
				return formatDate(value);
			} catch {
				return value;
			}
		}
		return value || "N/A";
	};

	// Create tooltip content
	const tooltipContent = history.length > 0 && (
		<div className="space-y-2">
			<div className="font-medium text-white mb-2">Change History:</div>
			{history.map((change, index) => (
				<div key={change.id} className="text-xs border-b border-gray-600 pb-1 last:border-b-0">
					<div className="flex justify-between items-start gap-2">
						<div className="flex-1">
							<div className="text-white font-medium">
								Changed to: {getDisplayValue(change.new_value)}
							</div>
							{change.old_value && (
								<div className="text-gray-400 text-xs">
									From: {getDisplayValue(change.old_value)}
								</div>
							)}
							{change.changed_by_name && (
								<div className="text-gray-300">
									by {change.changed_by_name}
								</div>
							)}
						</div>
						<div className="text-gray-400 text-right text-xs">
							{formatDate(change.changed_at)}
						</div>
					</div>
					{change.change_reason && (
						<div className="text-gray-400 text-xs mt-1">
							Reason: {change.change_reason}
						</div>
					)}
				</div>
			))}
		</div>
	);

	if (loading) {
		return (
			<div className={className}>
				{label && <span className="text-sm font-medium text-gray-500 block mb-1">{label}</span>}
				<p className="text-gray-900 font-medium">{getDisplayValue(currentValue)}</p>
			</div>
		);
	}

	return (
		<div className={className}>
			{label && <span className="text-sm font-medium text-gray-500 block mb-1">{label}</span>}
			<div className="flex items-center gap-2">
				<p className="text-gray-900 font-medium">{getDisplayValue(currentValue)}</p>
				{hasHistory && (
					<Tooltip content={tooltipContent}>
						<svg
							className="w-4 h-4 text-blue-500 hover:text-blue-700 cursor-help"
							fill="currentColor"
							viewBox="0 0 20 20"
						>
							<path
								fillRule="evenodd"
								d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
								clipRule="evenodd"
							/>
						</svg>
					</Tooltip>
				)}
			</div>
		</div>
	);
}