import { BytescaleUploader } from '@/components/BytescaleUploader/BytescaleUploader';
import { useEffect } from 'react';
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

interface Props {
	open: boolean;
	onOpenChange: (open: boolean) => void;
	editingBanner: any;
	bannerForm: any;
	setBannerForm: any;
	onSave: () => void;
}

export default function HomepageBannerModal({
	open,
	onOpenChange,
	editingBanner,
	bannerForm,
	setBannerForm,
	onSave,
}: Props) {
	return (
		<Dialog open={open} onOpenChange={onOpenChange}>
			<DialogContent className="w-full !max-w-4xl h-[90vh] flex flex-col p-0 overflow-hidden">
				<DialogHeader className="px-6 py-5 border-b bg-background sticky top-0 z-20">
					<DialogTitle className="text-2xl font-bold">
						{editingBanner ? 'Edit Homepage Banner' : 'Create Homepage Banner'}
					</DialogTitle>
				</DialogHeader>

				<div className="flex-1 overflow-y-auto p-6 space-y-8">
					<div className="space-y-5">
						<div className="border-b pb-2">
							<h3 className="text-lg font-bold">Media Configuration</h3>
							<p className="text-sm text-muted-foreground">Manage your banner files for desktop and mobile layouts</p>
						</div>

						<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
							<div className="space-y-2">
								<Label className="font-semibold">Media Type</Label>
								<Select
									value={bannerForm.mediaType}
									onValueChange={(v) =>
										setBannerForm({
											...bannerForm,
											mediaType: v,
										})
									}
								>
									<SelectTrigger>
										<SelectValue placeholder="Select media type" />
									</SelectTrigger>
									<SelectContent>
										<SelectItem value="IMAGE">Image Asset</SelectItem>
										<SelectItem value="VIDEO">Video Loop</SelectItem>
									</SelectContent>
								</Select>
							</div>

							<div className="flex items-center justify-between border rounded-xl p-4 bg-muted/30">
								<div>
									<p className="font-semibold">Active Visibility</p>
									<p className="text-sm text-muted-foreground">Publish this banner live on the homepage</p>
								</div>
								<Switch
									checked={bannerForm.isActive}
									onCheckedChange={(val) =>
										setBannerForm({
											...bannerForm,
											isActive: val,
										})
									}
								/>
							</div>
						</div>

						<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
							<div className="space-y-2">
								<Label className="font-semibold">Desktop Media URL</Label>
								<p className="text-xs text-muted-foreground">
									{bannerForm.mediaType === 'VIDEO'
										? 'Recommended: 1920 × 650 MP4 Format '
										: 'Recommended: 1920 × 650 Widescreen'}
								</p>
								<BytescaleUploader
									value={bannerForm.desktopMediaUrl || ''}
									folderPath="/homepage-banners"
									onChange={(url) =>
										setBannerForm({
											...bannerForm,
											desktopMediaUrl: url,
										})
									}
								/>
							</div>

							<div className="space-y-2">
								<Label className="font-semibold">Mobile Media URL (Optional)</Label>
								<p className="text-xs text-muted-foreground">
									{bannerForm.mediaType === 'VIDEO' ? 'Recommended:  340 × 390 MP4 Format' : 'Recommended: 340 × 390 '}
								</p>
								<BytescaleUploader
									value={bannerForm.mobileMediaUrl || ''}
									folderPath="/homepage-banners"
									onChange={(url) =>
										setBannerForm({
											...bannerForm,
											mobileMediaUrl: url,
										})
									}
								/>
							</div>
						</div>
					</div>

					<div className="space-y-5">
						<div className="border-b pb-2">
							<h3 className="text-lg font-bold">Banner Copy & Styles</h3>
							<p className="text-sm text-muted-foreground">Modify text details and text alignment configurations</p>
						</div>

						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
							<div className="space-y-2">
								<Label className="font-semibold">Main Heading / Title</Label>
								<Input
									value={bannerForm.title || ''}
									placeholder="e.g., Advanced Healthcare, Exceptional Compassion"
									onChange={(e) =>
										setBannerForm({
											...bannerForm,
											title: e.target.value,
										})
									}
								/>
							</div>

							<div className="space-y-2">
								<Label className="font-semibold">Sub-Heading / Subtitle</Label>
								<Input
									value={bannerForm.subtitle || ''}
									placeholder="e.g., Book appointments online with top multi-specialty doctors."
									onChange={(e) =>
										setBannerForm({
											...bannerForm,
											subtitle: e.target.value,
										})
									}
								/>
							</div>
						</div>

						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
							<div className="space-y-2">
								<Label className="font-semibold">Text Alignment Alignment</Label>
								<Select
									value={bannerForm.textAlignment || 'left'}
									onValueChange={(v) =>
										setBannerForm({
											...bannerForm,
											textAlignment: v,
										})
									}
								>
									<SelectTrigger>
										<SelectValue placeholder="Select text position" />
									</SelectTrigger>
									<SelectContent>
										<SelectItem value="left">Left Aligned</SelectItem>
										<SelectItem value="center">Center Aligned</SelectItem>
										<SelectItem value="right">Right Aligned</SelectItem>
									</SelectContent>
								</Select>
							</div>

							<div className="space-y-2">
								<Label className="font-semibold">Display Priority Order</Label>
								<Input
									type="number"
									value={bannerForm.sortOrder}
									onChange={(e) =>
										setBannerForm({
											...bannerForm,
											sortOrder: Number(e.target.value),
										})
									}
								/>
							</div>
						</div>
					</div>

					<div className="space-y-5">
						<div className="border-b pb-2">
							<h3 className="text-lg font-bold">Call To Action (CTA Button)</h3>
							<p className="text-sm text-muted-foreground">Hyperlinks for optional button element overlays</p>
						</div>

						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
							<div className="space-y-2">
								<Label className="font-semibold">Button Label</Label>
								<Input
									value={bannerForm.buttonText || ''}
									placeholder="e.g., Find a Doctor"
									onChange={(e) =>
										setBannerForm({
											...bannerForm,
											buttonText: e.target.value,
										})
									}
								/>
							</div>

							<div className="space-y-2">
								<Label className="font-semibold">Button Redirect Link</Label>
								<Input
									value={bannerForm.buttonLink || ''}
									placeholder="e.g., /doctors or https://..."
									onChange={(e) =>
										setBannerForm({
											...bannerForm,
											buttonLink: e.target.value,
										})
									}
								/>
							</div>
						</div>

						<div className="flex items-center justify-between border rounded-xl p-4 bg-muted/30">
							<div>
								<p className="font-semibold">Target Tab Redirection</p>
								<p className="text-sm text-muted-foreground">
									Force-launch the button link target into a completely new browser tab window
								</p>
							</div>
							<Switch
								checked={bannerForm.openInNewTab}
								onCheckedChange={(val) =>
									setBannerForm({
										...bannerForm,
										openInNewTab: val,
									})
								}
							/>
						</div>
					</div>
				</div>

				<DialogFooter className="p-6 border-t bg-background sticky bottom-0 z-20">
					<Button variant="ghost" onClick={() => onOpenChange(false)}>
						Cancel
					</Button>
					<Button className="px-10" onClick={onSave}>
						{editingBanner ? 'Save Changes' : 'Create Banner'}
					</Button>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
}