gg-backend/frontend/src/components/GoogleReviewModal/GoogleReviewModal.tsx

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 { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';

import { BytescaleUploader } from '@/components/BytescaleUploader/BytescaleUploader';

interface Props {
	open: boolean;
	onOpenChange: (open: boolean) => void;
	editingReview: any;
	reviewForm: any;
	setReviewForm: any;
	onSave: () => void;
}

export default function GoogleReviewModal({
	open,
	onOpenChange,
	editingReview,
	reviewForm,
	setReviewForm,
	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">
						{editingReview ? 'Edit Google Review' : 'Create Google Review'}
					</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">Reviewer Information</h3>
							<p className="text-sm text-muted-foreground">Details about the customer leaving the review</p>
						</div>

						<div className="space-y-2">
							<Label className="font-semibold">Reviewer Name</Label>
							<Input
								value={reviewForm.reviewerName || ''}
								placeholder="e.g., John Doe"
								onChange={(e) =>
									setReviewForm({
										...reviewForm,
										reviewerName: e.target.value,
									})
								}
							/>
						</div>

						<div className="space-y-2">
							<Label className="font-semibold">Reviewer Profile Picture (Optional)</Label>
							<BytescaleUploader
								value={reviewForm.reviewerImage || ''}
								folderPath="/reviews"
								onChange={(url) =>
									setReviewForm({
										...reviewForm,
										reviewerImage: url,
									})
								}
							/>
						</div>
					</div>

					<div className="space-y-4">
						<div className="border-b pb-2">
							<h3 className="text-lg font-bold">Review Content</h3>
							<p className="text-sm text-muted-foreground">Ratings and testimonial text</p>
						</div>

						<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
							<div className="space-y-2">
								<Label className="font-semibold">Rating (1-5)</Label>
								<Select
									value={String(reviewForm.rating || 5)}
									onValueChange={(val) =>
										setReviewForm({
											...reviewForm,
											rating: Number(val),
										})
									}
								>
									<SelectTrigger>
										<SelectValue placeholder="Select a rating" />
									</SelectTrigger>
									<SelectContent>
										<SelectItem value="1">1 Star</SelectItem>
										<SelectItem value="2">2 Stars</SelectItem>
										<SelectItem value="3">3 Stars</SelectItem>
										<SelectItem value="4">4 Stars</SelectItem>
										<SelectItem value="5">5 Stars</SelectItem>
									</SelectContent>
								</Select>
							</div>

							<div className="space-y-2">
								<Label className="font-semibold">Review Date (Optional)</Label>
								<Input
									type="date"
									value={reviewForm.reviewDate ? new Date(reviewForm.reviewDate).toISOString().split('T')[0] : ''}
									onChange={(e) =>
										setReviewForm({
											...reviewForm,
											reviewDate: e.target.value ? new Date(e.target.value).toISOString() : null,
										})
									}
								/>
							</div>
						</div>

						<div className="space-y-2">
							<Label className="font-semibold">Review Message</Label>
							<Textarea
								rows={4}
								value={reviewForm.review || ''}
								placeholder="Share the customer experience..."
								onChange={(e) =>
									setReviewForm({
										...reviewForm,
										review: e.target.value,
									})
								}
							/>
						</div>

						<div className="space-y-2">
							<Label className="font-semibold">Original Google Review URL (Optional)</Label>
							<Input
								value={reviewForm.googleReviewUrl || ''}
								placeholder="e.g., https://g.co/kgs/..."
								onChange={(e) =>
									setReviewForm({
										...reviewForm,
										googleReviewUrl: e.target.value,
									})
								}
							/>
						</div>
					</div>

					<div className="space-y-4 border-t pt-4">
						<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
							<div className="space-y-2">
								<Label className="font-semibold">Sorting Rank</Label>
								<Input
									type="number"
									value={reviewForm.sortOrder ?? 1000}
									onChange={(e) =>
										setReviewForm({
											...reviewForm,
											sortOrder: Number(e.target.value),
										})
									}
								/>
							</div>

							<div className="flex items-center justify-between border rounded-xl p-4 bg-muted/30 col-span-1 md:col-span-1">
								<div>
									<p className="font-semibold text-sm">Featured</p>
								</div>
								<Switch
									checked={!!reviewForm.isFeatured}
									onCheckedChange={(val) =>
										setReviewForm({
											...reviewForm,
											isFeatured: val,
										})
									}
								/>
							</div>

							<div className="flex items-center justify-between border rounded-xl p-4 bg-muted/30 col-span-1 md:col-span-1">
								<div>
									<p className="font-semibold text-sm">Active Visibility</p>
								</div>
								<Switch
									checked={!!reviewForm.isActive}
									onCheckedChange={(val) =>
										setReviewForm({
											...reviewForm,
											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}>
						{editingReview ? 'Save Changes' : 'Add Review'}
					</Button>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
}