import { BytescaleUploader } from '@/components/BytescaleUploader/BytescaleUploader';
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';

interface Props {
	open: boolean;
	onOpenChange: (open: boolean) => void;
	editingPartner: any;
	partnerForm: any;
	setPartnerForm: any;
	onSave: () => void;
}

export default function InsurancePartnerModal({
	open,
	onOpenChange,
	editingPartner,
	partnerForm,
	setPartnerForm,
	onSave,
}: Props) {
	return (
		<Dialog open={open} onOpenChange={onOpenChange}>
			<DialogContent className="w-full !max-w-2xl h-auto max-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">
						{editingPartner ? 'Edit Insurance Partner' : 'Create Insurance Partner'}
					</DialogTitle>
				</DialogHeader>

				<div className="flex-1 overflow-y-auto p-6 space-y-6">
					<div className="space-y-4">
						<div className="border-b pb-2">
							<h3 className="text-lg font-bold">Company Information</h3>
							<p className="text-sm text-muted-foreground">Setup profile configurations for target insurance brand</p>
						</div>

						<div className="space-y-2">
							<Label className="font-semibold">Company / Provider Name</Label>
							<Input
								value={partnerForm.name || ''}
								placeholder="e.g., National Insurance, Star Health Care"
								onChange={(e) =>
									setPartnerForm({
										...partnerForm,
										name: e.target.value,
									})
								}
							/>
						</div>

						<div className="space-y-2">
							<Label className="font-semibold">Claim Portal Redirect Link (Optional)</Label>
							<Input
								value={partnerForm.websiteUrl || ''}
								placeholder="e.g., https://corporate-claims-portal.com"
								onChange={(e) =>
									setPartnerForm({
										...partnerForm,
										websiteUrl: e.target.value,
									})
								}
							/>
						</div>
					</div>

					<div className="space-y-4">
						<div className="space-y-2">
							<Label className="font-semibold">Brand Logo Image</Label>
							<p className="text-xs text-muted-foreground">
								Recommended: Clear layout, transparent background (PNG or SVG preferred)
							</p>
							<BytescaleUploader
								value={partnerForm.logo || ''}
								folderPath="/insurance-partners"
								onChange={(url) =>
									setPartnerForm({
										...partnerForm,
										logo: url,
									})
								}
							/>
						</div>

						<div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
							<div className="space-y-2">
								<Label className="font-semibold">Grid Layout Sorting Rank</Label>
								<Input
									type="number"
									value={partnerForm.sortOrder}
									onChange={(e) =>
										setPartnerForm({
											...partnerForm,
											sortOrder: Number(e.target.value),
										})
									}
								/>
							</div>

							<div className="flex items-center justify-between border rounded-xl p-4 bg-muted/30">
								<div>
									<p className="font-semibold">Active Visibility</p>
								</div>
								<Switch
									checked={partnerForm.isActive}
									onCheckedChange={(val) =>
										setPartnerForm({
											...partnerForm,
											isActive: val,
										})
									}
								/>
							</div>
						</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}>
						{editingPartner ? 'Save Changes' : 'Add Partner'}
					</Button>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
}