"use client";

import React, { useState } from "react";
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
import Button from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";

export default function ContactForm({ initialData = null, onSave, onCancel }) {
	const [form, setForm] = useState({
		name: "",
		phones: [""],
		email: "",
		company: "",
		position: "",
		contact_type: "other",
		notes: "",
		is_active: true,
		...initialData,
	});
	const [loading, setLoading] = useState(false);
	const [error, setError] = useState(null);

	// Handle initial data with phones
	React.useEffect(() => {
		if (initialData) {
			let phones = [""];
			if (initialData.phone) {
				try {
					// Try to parse as JSON array first
					const parsed = JSON.parse(initialData.phone);
					phones = Array.isArray(parsed) ? parsed : [initialData.phone];
				} catch {
					// Fall back to comma-separated string
					phones = initialData.phone.split(',').map(p => p.trim()).filter(p => p);
				}
			}
			setForm(prev => ({
				...prev,
				...initialData,
				phones: phones.length > 0 ? phones : [""]
			}));
		}
	}, [initialData]);

	const isEdit = !!initialData;

	function handleChange(e) {
		const { name, value, type, checked } = e.target;
		setForm((prev) => ({
			...prev,
			[name]: type === "checkbox" ? checked : value,
		}));
	}

	function handlePhoneChange(index, value) {
		setForm(prev => ({
			...prev,
			phones: prev.phones.map((phone, i) => i === index ? value : phone)
		}));
	}

	function addPhone() {
		setForm(prev => ({
			...prev,
			phones: [...prev.phones, ""]
		}));
	}

	function removePhone(index) {
		if (form.phones.length > 1) {
			setForm(prev => ({
				...prev,
				phones: prev.phones.filter((_, i) => i !== index)
			}));
		}
	}

	async function handleSubmit(e) {
		e.preventDefault();
		setLoading(true);
		setError(null);

		try {
			// Filter out empty phones and prepare data
			const filteredPhones = form.phones.filter(phone => phone.trim());
			const submitData = {
				...form,
				phone: filteredPhones.length > 1 ? JSON.stringify(filteredPhones) : (filteredPhones[0] || null),
				phones: undefined // Remove phones array from submission
			};

			const url = isEdit
				? `/api/contacts/${initialData.contact_id}`
				: "/api/contacts";
			const method = isEdit ? "PUT" : "POST";

			const response = await fetch(url, {
				method,
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify(submitData),
			});

			if (!response.ok) {
				const data = await response.json();
				throw new Error(data.error || "Failed to save contact");
			}

			const contact = await response.json();
			onSave?.(contact);
		} catch (err) {
			setError(err.message);
		} finally {
			setLoading(false);
		}
	}

	return (
		<Card>
			<CardHeader>
				<h2 className="text-xl font-semibold text-gray-900">
					{isEdit ? "Edytuj kontakt" : "Nowy kontakt"}
				</h2>
			</CardHeader>
			<CardContent>
				<form onSubmit={handleSubmit} className="space-y-6">
					{error && (
						<div className="p-3 bg-red-50 border border-red-200 rounded-md text-red-600 text-sm">
							{error}
						</div>
					)}

					{/* Basic Information */}
					<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
						<div className="md:col-span-2">
							<label className="block text-sm font-medium text-gray-700 mb-2">
								Imię i nazwisko <span className="text-red-500">*</span>
							</label>
							<Input
								type="text"
								name="name"
								value={form.name}
								onChange={handleChange}
								placeholder="Wprowadź imię i nazwisko"
								required
							/>
						</div>

						<div>
							<label className="block text-sm font-medium text-gray-700 mb-2">
								Telefon
							</label>
							<div className="space-y-2">
								{form.phones.map((phone, index) => (
									<div key={index} className="flex gap-2">
										<Input
											type="tel"
											value={phone}
											onChange={(e) => handlePhoneChange(index, e.target.value)}
											placeholder={index === 0 ? "+48 123 456 789" : "Dodatkowy numer"}
											className="flex-1"
										/>
										{form.phones.length > 1 && (
											<Button
												type="button"
												variant="danger"
												size="sm"
												onClick={() => removePhone(index)}
												className="px-2"
											>
												<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
													<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
												</svg>
											</Button>
										)}
									</div>
								))}
								<Button
									type="button"
									variant="secondary"
									size="sm"
									onClick={addPhone}
									className="w-full"
								>
									<svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
										<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
									</svg>
									Dodaj kolejny numer
								</Button>
							</div>
						</div>

						<div>
							<label className="block text-sm font-medium text-gray-700 mb-2">
								Email
							</label>
							<Input
								type="email"
								name="email"
								value={form.email}
								onChange={handleChange}
								placeholder="email@example.com"
							/>
						</div>

						<div>
							<label className="block text-sm font-medium text-gray-700 mb-2">
								Firma
							</label>
							<Input
								type="text"
								name="company"
								value={form.company}
								onChange={handleChange}
								placeholder="Nazwa firmy"
							/>
						</div>

						<div>
							<label className="block text-sm font-medium text-gray-700 mb-2">
								Stanowisko
							</label>
							<Input
								type="text"
								name="position"
								value={form.position}
								onChange={handleChange}
								placeholder="Kierownik projektu"
							/>
						</div>

						<div className="md:col-span-2">
							<label className="block text-sm font-medium text-gray-700 mb-2">
								Typ kontaktu
							</label>
							<select
								name="contact_type"
								value={form.contact_type}
								onChange={handleChange}
								className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
							>
								<option value="project">Kontakt projektowy</option>
								<option value="contractor">Wykonawca</option>
								<option value="office">Urząd</option>
								<option value="supplier">Dostawca</option>
								<option value="other">Inny</option>
							</select>
						</div>

						<div className="md:col-span-2">
							<label className="block text-sm font-medium text-gray-700 mb-2">
								Notatki
							</label>
							<textarea
								name="notes"
								value={form.notes}
								onChange={handleChange}
								rows={3}
								className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"
								placeholder="Dodatkowe informacje..."
							/>
						</div>

						{isEdit && (
							<div className="md:col-span-2">
								<label className="flex items-center gap-2">
									<input
										type="checkbox"
										name="is_active"
										checked={form.is_active}
										onChange={handleChange}
										className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
									/>
									<span className="text-sm font-medium text-gray-700">
										Kontakt aktywny
									</span>
								</label>
							</div>
						)}
					</div>

					{/* Actions */}
					<div className="flex justify-end gap-3 pt-4 border-t">
						{onCancel && (
							<Button type="button" variant="secondary" onClick={onCancel}>
								Anuluj
							</Button>
						)}
						<Button type="submit" disabled={loading}>
							{loading ? "Zapisywanie..." : isEdit ? "Zapisz zmiany" : "Dodaj kontakt"}
						</Button>
					</div>
				</form>
			</CardContent>
		</Card>
	);
}