'use client';

import { useEffect } from 'react';
import type { ContactMessage } from '@/types/contact';
import CustomResponsiveDialog from '@/components/dialog/CustomResponsiveDialog';
import RHFSelect from '@/components/forms/RHFSelect';
import { zodResolver } from '@hookform/resolvers/zod';
import {
	UpdateContactStatusInput,
	UpdateContactStatusSchema,
} from '@/lib/modules/contact/contact.validation';
import { useForm } from 'react-hook-form';
import { motion } from 'framer-motion';
import FormProvider from '@/components/forms/FormProvider';
import useFormSubmitHandler from '@/hooks/formHandler';
import RHFTextArea from '@/components/forms/RHFTextArea';
import { Mail, Phone, Calendar, MessageSquare, FileText } from 'lucide-react';
import { useUpdateContactMessageMutation } from '@/store/slice/contactApi';

export const messageStatusOptions = [
	{ value: 'NEW', label: 'New' },
	{ value: 'IN_PROGRESS', label: 'In Progress' },
	{ value: 'RESPONDED', label: 'Responded' },
	{ value: 'ARCHIVED', label: 'Archived' },
];

const ContactDetail = ({
	isOpen,
	handleClose,
	selectedContact,
}: {
	isOpen: boolean;
	handleClose: (close: boolean) => void;
	selectedContact: ContactMessage;
}) => {
	const [updateContact, { isLoading }] = useUpdateContactMessageMutation();

	const methods = useForm<UpdateContactStatusInput>({
		resolver: zodResolver(UpdateContactStatusSchema),
		mode: 'onChange',
		defaultValues: {
			status: selectedContact?.status,
			notes: selectedContact?.notes || '',
			isRead: true,
		},
	});

	/** ✅ Reset form when selected contact changes */
	useEffect(() => {
		if (selectedContact) {
			methods.reset({
				status: selectedContact.status,
				notes: selectedContact.notes || '',
				isRead: true,
			});
		}
	}, [selectedContact, methods]);

	const handleSubmitForm = useFormSubmitHandler(
		async (data: UpdateContactStatusInput) => {
			try {
				const response = await updateContact({
					id: selectedContact.id,
					data,
				});
				return response;
			} catch (error) {
				throw new Error(`Something went wrong ${error}`);
			}
		},
		() => {
			handleClose(false);
		},
		'Contact updated successfully'
	);

	return (
		<CustomResponsiveDialog
			open={isOpen}
			setOpen={handleClose}
			header={
				<div className="w-full">
					<h2 className="text-lg font-semibold text-foreground/90">
						Contact Message Details
					</h2>
					<p className="mt-1 text-sm text-foreground/60">
						View and manage contact message
					</p>
				</div>
			}
			classNameContent="max-w-[640px] p-6 rounded-lg bg-background border-none max-h-[90vh] overflow-y-auto"
			classNameCloseBtn="absolute top-4 right-4 text-[#CD3232] cursor-pointer"
		>
			<FormProvider
				methods={methods}
				onSubmit={methods.handleSubmit(handleSubmitForm)}
			>
				<div className="space-y-8">
					{/* Header */}
					<div>
						<h3 className="text-2xl font-serif text-foreground mb-2">
							{selectedContact?.name}
						</h3>
						<div className="luxury-line w-24" />
					</div>

					{/* Contact Info Grid */}
					<div
						className="grid grid-cols-1 md:grid-cols-2 gap-6 p-6 rounded-lg"
						style={{
							backgroundColor: '#1A1612',
							border: '1px solid #2A2520',
						}}
					>
						{/* Email */}
						<InfoItem
							icon={
								<Mail
									className="h-5 w-5"
									style={{ color: '#CBB26A' }}
								/>
							}
							label="Email"
							value={selectedContact?.email}
						/>

						{/* Phone */}
						<InfoItem
							icon={
								<Phone
									className="h-5 w-5"
									style={{ color: '#CBB26A' }}
								/>
							}
							label="Phone"
							value={selectedContact?.phone || 'Not provided'}
						/>

						{/* Date */}
						<InfoItem
							icon={
								<Calendar
									className="h-5 w-5"
									style={{ color: '#CBB26A' }}
								/>
							}
							label="Submitted"
							value={new Date(
								selectedContact?.createdAt
							).toLocaleDateString('en-US', {
								year: 'numeric',
								month: 'long',
								day: 'numeric',
								hour: '2-digit',
								minute: '2-digit',
							})}
						/>

						{/* Status Select */}
						<div className="flex items-start gap-3">
							<FileText
								className="h-5 w-5 mt-1"
								style={{ color: '#CBB26A' }}
							/>
							<div className="flex-1">
								<p className="text-xs uppercase tracking-wider mb-2 text-[#CBB26A]">
									Update Status
								</p>
								<RHFSelect
									name="status"
									options={messageStatusOptions}
								/>
							</div>
						</div>
					</div>

					{/* Admin Notes */}
					<div className="space-y-3">
						<SectionTitle icon={<FileText />} title="Admin Notes" />
						<RHFTextArea
							name="notes"
							rows={4}
							placeholder="Add internal notes about this contact..."
							label={''}
						/>
					</div>

					{/* Message */}
					<div className="space-y-3">
						<SectionTitle icon={<MessageSquare />} title="Message" />
						<div
							className="p-5 rounded-lg"
							style={{
								backgroundColor: '#1A1612',
								border: '1px solid #2A2520',
							}}
						>
							<p className="leading-relaxed whitespace-pre-wrap text-[#EDEBE6]">
								{selectedContact?.message}
							</p>
						</div>
					</div>

					{/* Buttons */}
					<div
						className="flex gap-4 pt-6 border-t"
						style={{ borderColor: '#2A2520' }}
					>
						<motion.button
							type="submit"
							disabled={isLoading}
							whileHover={{ scale: 1.02 }}
							whileTap={{ scale: 0.98 }}
							className="flex-1 py-3 rounded-lg font-semibold gold-glow"
							style={{
								backgroundColor: '#CBB26A',
								color: '#110D09',
							}}
						>
							{isLoading ? 'Updating...' : 'Save Changes'}
						</motion.button>

						<motion.button
							type="button"
							onClick={() => handleClose(false)}
							whileHover={{ scale: 1.02 }}
							whileTap={{ scale: 0.98 }}
							className="flex-1 py-3 rounded-lg font-semibold"
							style={{
								backgroundColor: '#1F1A16',
								color: '#CBB26A',
								border: '1px solid #CBB26A',
							}}
						>
							Cancel
						</motion.button>
					</div>
				</div>
			</FormProvider>
		</CustomResponsiveDialog>
	);
};

export default ContactDetail;

/* ---------- Small UI Helpers ---------- */

const InfoItem = ({
	icon,
	label,
	value,
}: {
	icon: React.ReactNode;
	label: string;
	value: string;
}) => (
	<div className="flex items-start gap-3">
		{icon}
		<div>
			<p className="text-xs uppercase tracking-wider mb-1 text-[#CBB26A]">
				{label}
			</p>
			<p className="text-sm text-[#EDEBE6] break-all">{value}</p>
		</div>
	</div>
);

const SectionTitle = ({
	icon,
	title,
}: {
	icon: React.ReactNode;
	title: string;
}) => (
	<div className="flex items-center gap-2 text-[#CBB26A] uppercase tracking-wider text-sm">
		{icon}
		{title}
	</div>
);