import { Phone, Check, X, Clock } from "lucide-react";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { toast } from "react-toastify";

import { CallModel, CallResult } from "@/contracts/client.schemas";
import { Button } from "@/shared";

import { CallStatusBadge } from "./CallStatusBadge";

type Props = {
	name: string;
	note?: string;
	phone1?: string;
	phone2?: string;
	calls: CallModel[];
	currentPersonId: string | null;
	personId: string;
	hasPBX: boolean;
	handleStartCall: (personId: string, phone?: string) => void;
	handleEndCall: (personId: string, result: CallResult) => void;
};

export const AssetAsPersonId = "ASSET_PERSON_ID";

export function ResponsibleCall(props: Props) {
	const { t } = useTranslation("translation");
	const [callNote, setCallNote] = useState("");

	function getStatusBadge() {
		const logs = props.calls.filter(
			(call) => call.responsiblePersonId === props.personId,
		);
		if (logs.length === 0) return null;

		const lastLog = logs[logs.length - 1];

		return <CallStatusBadge callResult={lastLog.result} />;
	}

	function copyPhoneNumberToClipboard(phone: string) {
		try {
			navigator.clipboard.writeText(phone);
			toast.success(t("phoneNumberCopied"));
		} catch (error) {
			toast.error(t("phoneNumberCopyFailed"));
			console.error("Failed to copy phone number:", error);
		}
	}

	function renderCallButton(phone: string) {
		if (props.hasPBX) {
			return (
				<a href={`tel:${phone}`} className="flex-1">
					<Button
						variant="outline"
						size="sm"
						onClick={() =>
							props.handleStartCall(props.personId, phone)
						}
						className="w-full cursor-pointer"
						disabled={!!props.currentPersonId}
					>
						<Phone className="mr-2 h-4 w-4" />
						<span>{phone}</span>
						<span>{t("call")}</span>
					</Button>
				</a>
			);
		}

		return (
			<Button
				variant="outline"
				size="sm"
				onClick={() => {
					copyPhoneNumberToClipboard(phone);
					props.handleStartCall(props.personId, phone);
				}}
				className="w-full cursor-pointer"
				disabled={!!props.currentPersonId}
			>
				<Phone className="mr-2 h-4 w-4" />
				<span>{phone}</span>
				<span>{t("copyPhoneNumber")}</span>
			</Button>
		);
	}

	return (
		<div className="space-y-3 rounded-lg border bg-white p-4">
			<div className="flex items-center justify-between">
				<div>
					<p className="font-medium text-gray-900">{props.name}</p>
					{props.note && (
						<p className="mt-1 text-sm text-gray-500">
							{props.note}
						</p>
					)}
					<div className="mt-1 flex gap-2 text-sm text-gray-600">
						{props.phone1 && <span>{props.phone1}</span>}
						{props.phone2 && <span>• {props.phone2}</span>}
					</div>
				</div>
				{getStatusBadge()}
			</div>

			{props.currentPersonId !== props.personId ? (
				(props.phone1 || props.phone2) && (
					<div className="flex gap-2">
						{props.phone1 && renderCallButton(props.phone1)}
						{props.phone2 && renderCallButton(props.phone2)}
					</div>
				)
			) : (
				<div className="space-y-3 border-t pt-2">
					<textarea
						value={callNote}
						onChange={(e) => setCallNote(e.target.value)}
						placeholder={t("operatorNote")}
						className="w-full p-2 border rounded text-sm"
						rows={2}
					/>
					<div className="flex gap-2">
						<Button
							size="sm"
							onClick={() =>
								props.handleEndCall(props.personId, "Answered")
							}
							className="flex-1 bg-green-600 hover:bg-green-700"
						>
							<Check className="mr-1 h-4 w-4" />
							{t("answered")}
						</Button>
						<Button
							size="sm"
							variant="secondary"
							onClick={() =>
								props.handleEndCall(props.personId, "NoAnswer")
							}
							className="flex-1"
						>
							<X className="mr-1 h-4 w-4" />
							{t("noAnswer")}
						</Button>
						<Button
							size="sm"
							variant="outline"
							onClick={() =>
								props.handleEndCall(props.personId, "Busy")
							}
							className="flex-1"
						>
							<Clock className="mr-1 h-4 w-4" />
							{t("busy")}
						</Button>
					</div>
				</div>
			)}
		</div>
	);
}
