panel/src/components/ProjectContactSelector.js

"use client";

import { useState, useEffect } from "react";
import Button from "@/components/ui/Button";
import Badge from "@/components/ui/Badge";

export default function ProjectContactSelector({ projectId, onChange }) {
	const [contacts, setContacts] = useState([]);
	const [projectContacts, setProjectContacts] = useState([]);
	const [availableContacts, setAvailableContacts] = useState([]);
	const [showSelector, setShowSelector] = useState(false);
	const [loading, setLoading] = useState(false);
	const [searchTerm, setSearchTerm] = useState("");

	useEffect(() => {
		fetchAllContacts();
		if (projectId) {
			fetchProjectContacts();
		}
	}, [projectId]);

	async function fetchAllContacts() {
		try {
			const response = await fetch("/api/contacts?is_active=true");
			if (response.ok) {
				const data = await response.json();
				setContacts(data);
			}
		} catch (error) {
			console.error("Error fetching contacts:", error);
		}
	}

	async function fetchProjectContacts() {
		try {
			const response = await fetch(`/api/projects/${projectId}/contacts`);
			if (response.ok) {
				const data = await response.json();
				setProjectContacts(data);
				updateAvailableContacts(data);
				onChange?.(data);
			}
		} catch (error) {
			console.error("Error fetching project contacts:", error);
		}
	}

	function updateAvailableContacts(linkedContacts) {
		const linkedIds = linkedContacts.map((c) => c.contact_id);
		const available = contacts.filter(
			(c) => !linkedIds.includes(c.contact_id)
		);
		setAvailableContacts(available);
	}

	async function handleAddContact(contactId) {
		setLoading(true);
		try {
			const response = await fetch(`/api/projects/${projectId}/contacts`, {
				method: "POST",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify({ contactId }),
			});

			if (response.ok) {
				await fetchProjectContacts();
				setShowSelector(false);
				setSearchTerm("");
			}
		} catch (error) {
			console.error("Error adding contact:", error);
			alert("Nie udało się dodać kontaktu");
		} finally {
			setLoading(false);
		}
	}

	async function handleRemoveContact(contactId) {
		if (!confirm("Czy na pewno chcesz usunąć ten kontakt z projektu?"))
			return;

		try {
			const response = await fetch(
				`/api/projects/${projectId}/contacts?contactId=${contactId}`,
				{
					method: "DELETE",
				}
			);

			if (response.ok) {
				await fetchProjectContacts();
			}
		} catch (error) {
			console.error("Error removing contact:", error);
			alert("Nie udało się usunąć kontaktu");
		}
	}

	async function handleSetPrimary(contactId) {
		try {
			const response = await fetch(`/api/projects/${projectId}/contacts`, {
				method: "PATCH",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify({ contactId }),
			});

			if (response.ok) {
				await fetchProjectContacts();
			}
		} catch (error) {
			console.error("Error setting primary contact:", error);
			alert("Nie udało się ustawić głównego kontaktu");
		}
	}

	const getContactTypeBadge = (type) => {
		const types = {
			project: { label: "Projekt", variant: "primary" },
			contractor: { label: "Wykonawca", variant: "warning" },
			office: { label: "Urząd", variant: "info" },
			supplier: { label: "Dostawca", variant: "success" },
			other: { label: "Inny", variant: "secondary" },
		};
		return types[type] || types.other;
	};

	const filteredAvailable = searchTerm
		? availableContacts.filter(
				(c) =>
					c.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
					c.phone?.toLowerCase().includes(searchTerm.toLowerCase()) ||
					c.email?.toLowerCase().includes(searchTerm.toLowerCase()) ||
					c.company?.toLowerCase().includes(searchTerm.toLowerCase())
		  )
		: availableContacts;

	return (
		<div className="space-y-4">
			<div className="flex items-center justify-between">
				<label className="block text-sm font-medium text-gray-700">
					Kontakty do projektu
				</label>
				{projectId && (
					<Button
						type="button"
						size="sm"
						variant="secondary"
						onClick={() => setShowSelector(!showSelector)}
					>
						{showSelector ? "Anuluj" : "+ Dodaj kontakt"}
					</Button>
				)}
			</div>

			{/* Current project contacts */}
			{projectContacts.length > 0 ? (
				<div className="space-y-2">
					{projectContacts.map((contact) => {
						const typeBadge = getContactTypeBadge(contact.contact_type);
						return (
							<div
								key={contact.contact_id}
								className="flex items-center justify-between p-3 bg-gray-50 rounded-md border border-gray-200"
							>
								<div className="flex-1">
									<div className="flex items-center gap-2">
										<span className="font-medium text-gray-900">
											{contact.name}
										</span>
										{contact.is_primary === 1 && (
											<Badge variant="success" size="xs">
												Główny
											</Badge>
										)}
										<Badge variant={typeBadge.variant} size="xs">
											{typeBadge.label}
										</Badge>
									</div>
									<div className="text-sm text-gray-600 mt-1 space-y-0.5">
										{contact.phone && <div>📞 {contact.phone}</div>}
										{contact.email && <div>📧 {contact.email}</div>}
										{contact.company && (
											<div className="text-xs">🏢 {contact.company}</div>
										)}
									</div>
								</div>
								<div className="flex items-center gap-2">
									{contact.is_primary !== 1 && (
										<button
											type="button"
											onClick={() => handleSetPrimary(contact.contact_id)}
											className="text-xs text-blue-600 hover:text-blue-700 px-2 py-1 rounded hover:bg-blue-50"
											title="Ustaw jako główny"
										>
											Ustaw główny
										</button>
									)}
									<button
										type="button"
										onClick={() => handleRemoveContact(contact.contact_id)}
										className="text-red-600 hover:text-red-700 p-1 rounded hover:bg-red-50"
										title="Usuń kontakt"
									>
										<svg
											className="w-4 h-4"
											fill="none"
											stroke="currentColor"
											viewBox="0 0 24 24"
										>
											<path
												strokeLinecap="round"
												strokeLinejoin="round"
												strokeWidth={2}
												d="M6 18L18 6M6 6l12 12"
											/>
										</svg>
									</button>
								</div>
							</div>
						);
					})}
				</div>
			) : (
				<div className="text-sm text-gray-500 italic p-3 bg-gray-50 rounded-md">
					{projectId
						? "Brak powiązanych kontaktów. Dodaj kontakt do projektu."
						: "Zapisz projekt, aby móc dodać kontakty."}
				</div>
			)}

			{/* Contact selector */}
			{showSelector && projectId && (
				<div className="border border-gray-300 rounded-md p-4 bg-white">
					<div className="mb-3">
						<input
							type="text"
							value={searchTerm}
							onChange={(e) => setSearchTerm(e.target.value)}
							placeholder="Szukaj kontaktu..."
							className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
						/>
					</div>

					<div className="max-h-60 overflow-y-auto space-y-2">
						{filteredAvailable.length === 0 ? (
							<p className="text-sm text-gray-500 text-center py-4">
								{searchTerm
									? "Nie znaleziono kontaktów"
									: "Wszystkie kontakty są już dodane"}
							</p>
						) : (
							filteredAvailable.map((contact) => {
								const typeBadge = getContactTypeBadge(contact.contact_type);
								return (
									<div
										key={contact.contact_id}
										className="flex items-center justify-between p-2 hover:bg-gray-50 rounded border border-gray-200"
									>
										<div className="flex-1">
											<div className="flex items-center gap-2">
												<span className="font-medium text-sm text-gray-900">
													{contact.name}
												</span>
												<Badge variant={typeBadge.variant} size="xs">
													{typeBadge.label}
												</Badge>
											</div>
											<div className="text-xs text-gray-600 mt-1">
												{contact.phone && <span>{contact.phone}</span>}
												{contact.phone && contact.email && (
													<span className="mx-1">•</span>
												)}
												{contact.email && <span>{contact.email}</span>}
											</div>
											{contact.company && (
												<div className="text-xs text-gray-500">
													{contact.company}
												</div>
											)}
										</div>
										<Button
											type="button"
											size="sm"
											onClick={() => handleAddContact(contact.contact_id)}
											disabled={loading}
										>
											Dodaj
										</Button>
									</div>
								);
							})
						)}
					</div>
				</div>
			)}
		</div>
	);
}