import { programsApi } from '@/admin/api/programs';
import { GoogleIntegrationAlert } from '@/admin/components/google-integration-alert';
import { Route } from '@/admin/routes/_app/programs.$programId.edit';
import { Button, buttonVariants } from '@/components/ui/button';
import {
	DropdownMenu,
	DropdownMenuContent,
	DropdownMenuItem,
	DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import { Field, FieldError } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { Separator } from '@/components/ui/separator';
import { Skeleton } from '@/components/ui/skeleton';
import {
	Tooltip,
	TooltipContent,
	TooltipTrigger,
} from '@/components/ui/tooltip';
import copy from '@/lib/copy-to-clipboard';
import { cn } from '@/lib/utils';
import { useForm } from '@tanstack/react-form';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { useNavigate } from '@tanstack/react-router';
import { __ } from '@wordpress/i18n';
import {
	Activity,
	ArrowLeft,
	CalendarDays,
	Link,
	MoreVertical,
	Pencil,
	Settings2,
} from 'lucide-react';
import { useCallback, useEffect, useRef, useState } from 'react';
import { toast } from 'sonner';
import ProgramActivities from './program-activities';
import {
	defaultSettingsValues,
	formContext,
	useAppForm,
} from './program-form-context';
import ProgramSessions from './program-sessions';
import ProgramSettings from './program-settings';

const EditProgram = () => {
	const { programId } = Route.useParams();
	const navigate = useNavigate();
	const queryClient = useQueryClient();

	const { data: program, isLoading } = useQuery({
		queryKey: ['program', programId],
		queryFn: () => programsApi.get(Number(programId)),
	});

	const settingsForm = useAppForm({ defaultValues: defaultSettingsValues });

	// Sync settingsForm from program data on initial load
	const settingsInitialized = useRef(false);
	useEffect(() => {
		if (program && !settingsInitialized.current) {
			settingsInitialized.current = true;
			settingsForm.setFieldValue(
				'category_ids',
				program.categories.map((c) => c.id),
			);
			settingsForm.setFieldValue('max_enrollments', program.max_enrollments);
			settingsForm.setFieldValue('price_is_free', program.price.is_free);
			settingsForm.setFieldValue('price_amount', program.price.amount);
		}
	}, [program]);

	const updateProgram = useMutation({
		mutationFn: (data: {
			title: string;
			is_active?: boolean;
			category_ids?: number[];
			max_enrollments?: number;
			price_amount?: number;
		}) => programsApi.update(Number(programId), data),
		onSuccess: (updated) => {
			queryClient.setQueryData(['program', programId], updated);
			queryClient.invalidateQueries({ queryKey: ['programs'] });
			toast.success(__('Program updated.', 'allcoach'));
		},
		onError: () => {
			toast.error(__('Failed to update program.', 'allcoach'));
		},
	});

	const form = useForm({
		defaultValues: {
			title: program?.title ?? '',
		},
		onSubmit: async () => {
			await updateProgram.mutateAsync(buildPayload());
		},
	});

	const buildPayload = (is_active?: boolean) => {
		const { price_is_free, price_amount, category_ids, max_enrollments } =
			settingsForm.state.values;
		return {
			title: form.getFieldValue('title'),
			category_ids,
			max_enrollments,
			price_amount: price_is_free ? 0 : price_amount,
			...(is_active !== undefined ? { is_active } : {}),
		};
	};

	const [activeTab, setActiveTab] = useState<
		'sessions' | 'activities' | 'settings'
	>('sessions');

	const handleCopy = useCallback((id: string) => {
		return async () => {
			try {
				await copy(__ALLCOACH_ADMIN__.homeUrl + `?allcoach-add-to-cart=${id}`);
				toast.success(__('Checkout link copied to clipboard', 'allcoach'));
			} catch {
				toast.error(__('Failed to copy checkout link', 'allcoach'));
			}
		};
	}, []);

	if (isLoading || !program) {
		return (
			<div className="flex min-h-screen flex-col bg-gray-100">
				<header className="sticky top-[calc(var(--wp-admin--admin-bar--height,32px)+55px)] z-50 flex h-[50px] items-center gap-3 border-b border-gray-200 bg-white px-4 md:px-7">
					<Skeleton className="h-6 w-20" />
					<div className="h-4 w-px bg-gray-200" />
					<Skeleton className="h-6 w-48" />
					<div className="ms-auto flex gap-2">
						<Skeleton className="h-8 w-20" />
						<Skeleton className="h-8 w-20" />
					</div>
				</header>
				<div className="mx-auto w-full max-w-7xl px-4 py-5 md:px-9 md:py-7">
					<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:gap-5">
						<div className="rounded-xl bg-white lg:w-[280px] lg:shrink-0 lg:py-5">
							<div className="space-y-2 px-3 py-3">
								<Skeleton className="h-9 w-full rounded-lg" />
								<Skeleton className="h-9 w-full rounded-lg" />
								<Skeleton className="h-9 w-full rounded-lg" />
							</div>
						</div>
						<div className="min-w-0 flex-1 rounded-xl bg-white p-6">
							<Skeleton className="mb-4 h-5 w-32" />
							<div className="space-y-3">
								<Skeleton className="h-12 w-full" />
								<Skeleton className="h-12 w-full" />
								<Skeleton className="h-12 w-full" />
							</div>
						</div>
					</div>
				</div>
			</div>
		);
	}

	return (
		<div className="flex min-h-screen flex-col bg-gray-100">
			{/* Builder topbar */}
			<header className="sticky top-[calc(var(--wp-admin--admin-bar--height,32px)+55px)] z-50 flex h-[50px] items-center justify-between border-b border-gray-200 bg-white px-4 md:px-7">
				{/* Left */}
				<div className="flex min-w-0 flex-1 items-center gap-2 md:gap-3">
					<Button
						variant="ghost"
						size="sm"
						// @ts-ignore
						onClick={() => navigate({ to: '/programs' })}
						className="cursor-pointer text-[13px] text-gray-500 hover:bg-transparent hover:text-teal-600"
					>
						<ArrowLeft className="size-[14px]" />
						<span className="ep-desktop-only">
							{__('Programs', 'allcoach')}
						</span>
					</Button>

					<div className="ep-desktop-only ep-block h-4 w-px bg-gray-200" />

					{/* Editable title */}
					<form
						className="flex min-w-0 flex-1 items-center gap-1.5"
						onSubmit={(e) => {
							e.preventDefault();
							form.handleSubmit();
						}}
					>
						<form.Field
							name="title"
							validators={{
								onChange: ({ value }) =>
									!value ? 'Title is required' : undefined,
								onChangeAsyncDebounceMs: 500,
							}}
						>
							{(field) => {
								const isInvalid =
									field.state.meta.isTouched && !field.state.meta.isValid;
								return (
									<Field data-invalid={isInvalid} orientation={'horizontal'}>
										<div className="group relative flex items-center">
											<Input
												placeholder="Program Title (eg. 12-Week Strength Training)"
												type="text"
												value={field.state.value}
												onChange={(e) => field.setValue(e.target.value)}
												autoFocus={
													program.title === __('Untitled Program', 'allcoach')
												}
												spellCheck={false}
												className={cn(
													'h-auto cursor-pointer rounded-[5px] px-1.5 py-0.5 pe-6 transition-colors md:w-2xl',
													'text-[13px] font-semibold text-gray-900',
													'!placeholder-gray-300',
													'!bg-transparent !shadow-none',
													'hover:!bg-gray-100 focus:cursor-text focus:!bg-teal-50',
													'focus-visible:!ring-0',
													isInvalid
														? '!border !border-red-400 focus-visible:!border-red-400'
														: '!border-0 focus-visible:!border-0',
												)}
											/>
											<span className="ep-desktop-only pointer-events-none absolute end-1.5 flex items-center opacity-0 transition-opacity group-focus-within:opacity-0 group-hover:opacity-100">
												<Pencil className="size-3 text-gray-400" />
											</span>
										</div>
										{isInvalid && (
											<FieldError
												errors={field.state.meta.errors?.map((e) =>
													typeof e === 'string' ? { message: e } : e,
												)}
											/>
										)}
									</Field>
								);
							}}
						</form.Field>
					</form>
				</div>

				{/* Right */}
				<div className="flex shrink-0 items-center gap-2">
					{/* Buy URL — desktop only */}
					<Tooltip>
						<TooltipTrigger asChild>
							<span className="ep-desktop-only">
								<button
									type="button"
									disabled={!program.is_active}
									className={cn(
										buttonVariants({ variant: 'outline', size: 'sm' }),
										'cursor-pointer border-teal-200 bg-teal-50 text-[13px] text-teal-600 hover:bg-teal-100',
										!program.is_active && 'pointer-events-none opacity-50',
									)}
									onClick={handleCopy(programId)}
								>
									<Link className="size-[13px]" />
									{__('Copy Checkout Link', 'allcoach')}
								</button>
							</span>
						</TooltipTrigger>
						<TooltipContent side="bottom">
							{program.is_active
								? __(
										'Sends clients directly to checkout for this program',
										'allcoach',
									)
								: __(
										'Checkout link will be generated once the program is published',
										'allcoach',
									)}
						</TooltipContent>
					</Tooltip>

					<Separator className="h-8!" orientation="vertical" />

					{/* Save Draft — desktop only */}
					<Button
						variant="outline"
						size="sm"
						className="ep-desktop-only cursor-pointer text-[13px]"
						disabled={updateProgram.isPending}
						onClick={() => updateProgram.mutate(buildPayload(false))}
					>
						{__('Save Draft', 'allcoach')}
					</Button>

					{/* Publish / Update — always visible */}
					<Button
						size="sm"
						className="cursor-pointer bg-teal-600 text-[13px] hover:bg-teal-700"
						onClick={() => updateProgram.mutate(buildPayload(true))}
						disabled={updateProgram.isPending}
					>
						{program.is_active
							? __('Update', 'allcoach')
							: __('Publish', 'allcoach')}
					</Button>

					{/* 3-dot menu — mobile only */}
					<DropdownMenu>
						<DropdownMenuTrigger
							className={cn(
								buttonVariants({ variant: 'ghost', size: 'icon-sm' }),
								'ep-mobile-only cursor-pointer text-gray-500',
							)}
						>
							<MoreVertical className="size-[16px]" />
						</DropdownMenuTrigger>
						<DropdownMenuContent align="end">
							<Tooltip>
								<TooltipTrigger asChild>
									<span>
										<DropdownMenuItem
											className={cn(
												'cursor-pointer text-[13px] text-teal-600 focus:bg-teal-50 focus:text-teal-600',
												!program.is_active && 'pointer-events-none opacity-50',
											)}
											disabled={!program.is_active}
											onClick={handleCopy(programId)}
										>
											<Link className="size-[13px]" />
											{__('Buy URL', 'allcoach')}
										</DropdownMenuItem>
									</span>
								</TooltipTrigger>
								<TooltipContent side="left">
									{program.is_active
										? __('Copy buy URL to clipboard.', 'allcoach')
										: __(
												'Buy URL will be generated once the program is published.',
												'allcoach',
											)}
								</TooltipContent>
							</Tooltip>
							<DropdownMenuItem
								className="cursor-pointer text-[13px]"
								disabled={updateProgram.isPending}
								onClick={() => updateProgram.mutate(buildPayload(false))}
							>
								{__('Save Draft', 'allcoach')}
							</DropdownMenuItem>
						</DropdownMenuContent>
					</DropdownMenu>
				</div>
			</header>

			{/* Body */}
			<div className="mx-auto w-full max-w-7xl px-4 py-5 md:px-9 md:py-7">
				{activeTab === 'sessions' && <GoogleIntegrationAlert />}
				<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:gap-5">
					{/* Sidebar */}
					<div className="rounded-xl bg-white lg:w-[280px] lg:shrink-0 lg:py-5">
						<p className="mb-3 hidden px-5 text-[11px] font-semibold tracking-widest text-gray-400 uppercase lg:block">
							{__('Program Builder', 'allcoach')}
						</p>
						<nav className="flex gap-1 overflow-x-auto px-3 py-3 lg:flex-col lg:gap-1.5 lg:py-0">
							<button
								type="button"
								onClick={() => setActiveTab('sessions')}
								className={cn(
									'group flex shrink-0 cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-[13px] font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 lg:w-full lg:text-start',
									activeTab === 'sessions' && 'bg-teal-50 text-teal-700',
								)}
							>
								<CalendarDays
									className={cn(
										'size-4 shrink-0 text-gray-400',
										activeTab === 'sessions' && 'text-teal-600',
									)}
								/>
								<span className="whitespace-nowrap">
									{__('Sessions', 'allcoach')}
								</span>
							</button>

							<button
								type="button"
								onClick={() => setActiveTab('activities')}
								className={cn(
									'group flex shrink-0 cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-[13px] font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 lg:w-full lg:text-start',
									activeTab === 'activities' && 'bg-teal-50 text-teal-700',
								)}
							>
								<Activity
									className={cn(
										'size-4 shrink-0 text-gray-400',
										activeTab === 'activities' && 'text-teal-600',
									)}
								/>
								<span className="whitespace-nowrap">
									{__('Activities', 'allcoach')}
								</span>
							</button>

							<button
								type="button"
								onClick={() => setActiveTab('settings')}
								className={cn(
									'group flex shrink-0 cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-[13px] font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 lg:w-full lg:text-start',
									activeTab === 'settings' && 'bg-teal-50 text-teal-700',
								)}
							>
								<Settings2
									className={cn(
										'size-4 shrink-0 text-gray-400',
										activeTab === 'settings' && 'text-teal-600',
									)}
								/>
								<span className="whitespace-nowrap">
									{__('Settings', 'allcoach')}
								</span>
							</button>
						</nav>
					</div>

					{/* Content panel — sessions stays in flex layout, settings spans full remaining width */}
					<div className="min-w-0 flex-1 overflow-hidden">
						{activeTab === 'sessions' && (
							<div className="rounded-xl bg-white">
								<ProgramSessions
									programId={programId}
									session={program.session}
								/>
							</div>
						)}
						{activeTab === 'activities' && (
							<div className="rounded-xl bg-white">
								<ProgramActivities programId={programId} />
							</div>
						)}
						{activeTab === 'settings' && (
							<formContext.Provider value={settingsForm}>
								<ProgramSettings currency={program.price.currency} />
							</formContext.Provider>
						)}
					</div>
				</div>
			</div>
		</div>
	);
};

export default EditProgram;