"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
import Button from "@/components/ui/Button";
import { Input } from "@/components/ui/Input";
import { formatDateForInput } from "@/lib/utils";
import { useTranslation } from "@/lib/i18n";

export default function ContractForm() {
	const { t } = useTranslation();
	const [form, setForm] = useState({
		contract_number: "",
		contract_name: "",
		customer_contract_number: "",
		customer: "",
		investor: "",
		date_signed: "",
		finish_date: "",
	});

	const [loading, setLoading] = useState(false);
	const router = useRouter();

	function handleChange(e) {
		setForm({ ...form, [e.target.name]: e.target.value });
	}

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

		try {
			console.log("Submitting form:", form);

			const res = await fetch("/api/contracts", {
				method: "POST",
				headers: { "Content-Type": "application/json" },
				body: JSON.stringify(form),
			});

			if (res.ok) {
				const contract = await res.json();
				router.push(`/contracts/${contract.contract_id}`);
			} else {
				alert(t('contracts.failedToCreateContract'));
			}
		} catch (error) {
			console.error("Error creating contract:", error);
			alert(t('contracts.failedToCreateContract'));
		} finally {
			setLoading(false);
		}
	}

	return (
		<Card>
			<CardHeader>
				<h2 className="text-xl font-semibold text-gray-900">
					{t('contracts.contractDetails')}
				</h2>
			</CardHeader>
			<CardContent>
				<form onSubmit={handleSubmit} className="space-y-6">
					{/* Basic Information Section */}
					<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
						<div>
							<label className="block text-sm font-medium text-gray-700 mb-2">
								{t('contracts.contractNumber')} <span className="text-red-500">*</span>
							</label>
							<Input
								type="text"
								name="contract_number"
								value={form.contract_number || ""}
								onChange={handleChange}
								placeholder={t('contracts.enterContractNumber')}
								required
							/>
						</div>

						<div>
							<label className="block text-sm font-medium text-gray-700 mb-2">
								{t('contracts.contractName')}
							</label>
							<Input
								type="text"
								name="contract_name"
								value={form.contract_name || ""}
								onChange={handleChange}
								placeholder={t('contracts.enterContractName')}
							/>
						</div>

						<div>
							<label className="block text-sm font-medium text-gray-700 mb-2">
								{t('contracts.customerContractNumber')}
							</label>
							<Input
								type="text"
								name="customer_contract_number"
								value={form.customer_contract_number || ""}
								onChange={handleChange}
								placeholder={t('contracts.enterCustomerContractNumber')}
							/>
						</div>

						<div>
							<label className="block text-sm font-medium text-gray-700 mb-2">
								{t('contracts.customer')}
							</label>
							<Input
								type="text"
								name="customer"
								value={form.customer || ""}
								onChange={handleChange}
								placeholder={t('contracts.enterCustomerName')}
							/>
						</div>

						<div>
							<label className="block text-sm font-medium text-gray-700 mb-2">
								{t('contracts.investor')}
							</label>
							<Input
								type="text"
								name="investor"
								value={form.investor || ""}
								onChange={handleChange}
								placeholder={t('contracts.enterInvestorName')}
							/>
						</div>

						<div>
							<label className="block text-sm font-medium text-gray-700 mb-2">
								{t('contracts.dateSigned')}
							</label>{" "}
							<Input
								type="date"
								name="date_signed"
								value={formatDateForInput(form.date_signed)}
								onChange={handleChange}
							/>
						</div>

						<div className="md:col-span-2">
							<label className="block text-sm font-medium text-gray-700 mb-2">
								{t('contracts.finishDate')}
							</label>{" "}
							<Input
								type="date"
								name="finish_date"
								value={formatDateForInput(form.finish_date)}
								onChange={handleChange}
							/>
						</div>
					</div>

					{/* Form Actions */}
					<div className="border-t pt-6 flex items-center justify-end gap-4">
						<Button
							type="button"
							variant="outline"
							onClick={() => router.back()}
							disabled={loading}
						>
							{t('common.cancel')}
						</Button>
						<Button type="submit" variant="primary" disabled={loading}>
							{loading ? (
								<>
									<svg
										className="animate-spin -ml-1 mr-3 h-4 w-4 text-white"
										xmlns="http://www.w3.org/2000/svg"
										fill="none"
										viewBox="0 0 24 24"
									>
										<circle
											className="opacity-25"
											cx="12"
											cy="12"
											r="10"
											stroke="currentColor"
											strokeWidth="4"
										></circle>
										<path
											className="opacity-75"
											fill="currentColor"
											d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
										></path>
									</svg>
									{t('common.creating')}
								</>
							) : (
								<>
									<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>
									{t('contracts.createContract')}
								</>
							)}
						</Button>
					</div>
				</form>
			</CardContent>
		</Card>
	);
}