gg-backend/frontend/src/pages/GoogleReviewPage.tsx

import { useState, useEffect, useCallback } from 'react';
import toast from 'react-hot-toast';
import { AxiosError } from 'axios';

import {
	getGoogleReviewsApi,
	createGoogleReviewApi,
	updateGoogleReviewApi,
	deleteGoogleReviewApi,
	GoogleReview,
} from '@/api/googleReview';

import GoogleReviewModal from '@/components/GoogleReviewModal/GoogleReviewModal';

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Switch } from '@/components/ui/switch';
import { Input } from '@/components/ui/input';

import { Loader2, RefreshCw, Plus, Pencil, Trash2, ExternalLink, Star } from 'lucide-react';

export default function GoogleReviewPage() {
	const [reviews, setReviews] = useState<GoogleReview[]>([]);
	const [loading, setLoading] = useState(true);
	const [error, setError] = useState('');

	const [reviewModal, setReviewModal] = useState(false);
	const [editingReview, setEditingReview] = useState<GoogleReview | null>(null);

	const [searchText, setSearchText] = useState('');

	const [reviewForm, setReviewForm] = useState<Partial<GoogleReview>>({
		reviewerName: '',
		reviewerImage: '',
		rating: 5,
		review: '',
		reviewDate: null,
		googleReviewUrl: '',
		isFeatured: false,
		isActive: true,
		sortOrder: 1000,
	});

	const fetchData = useCallback(async () => {
		setLoading(true);
		setError('');
		try {
			const res = await getGoogleReviewsApi();
			setReviews(res.data || []);
		} catch (err) {
			if (err instanceof AxiosError) {
				setError(err.response?.data?.message || 'Failed to sync Google review records.');
			} else {
				setError('An unhandled database communication error occurred.');
			}
		} finally {
			setLoading(false);
		}
	}, []);

	useEffect(() => {
		fetchData();
	}, [fetchData]);

	const handleToggleStatus = async (review: GoogleReview) => {
		if (review.id === undefined) return;
		try {
			await updateGoogleReviewApi(review.id, { isActive: !review.isActive });
			toast.success(`Review status updated successfully`);
			fetchData();
		} catch (err) {
			console.error(err);
		}
	};

	const handleToggleFeatured = async (review: GoogleReview) => {
		if (review.id === undefined) return;
		try {
			await updateGoogleReviewApi(review.id, { isFeatured: !review.isFeatured });
			toast.success(`Review featured status updated`);
			fetchData();
		} catch (err) {
			console.error(err);
		}
	};

	const handleDeleteReview = async (id: number) => {
		const confirmDelete = window.confirm(
			'Are you completely sure you want to remove this testimonial record? This step is irreversible.'
		);
		if (!confirmDelete) return;

		try {
			await deleteGoogleReviewApi(id);
			fetchData();
		} catch (err) {
			console.error(err);
		}
	};

	const openAddReview = () => {
		setEditingReview(null);
		setReviewForm({
			reviewerName: '',
			reviewerImage: '',
			rating: 5,
			review: '',
			reviewDate: null,
			googleReviewUrl: '',
			isFeatured: false,
			isActive: true,
			sortOrder: 1000,
		});
		setReviewModal(true);
	};

	const openEditReview = (review: GoogleReview) => {
		setEditingReview(review);
		setReviewForm({ ...review });
		setReviewModal(true);
	};

	const saveReview = async () => {
		if (!reviewForm.reviewerName) return toast.error('Reviewer name is required.');
		if (!reviewForm.review) return toast.error('Review message content is required.');

		try {
			const finalData = { ...reviewForm };

			if (editingReview?.id) {
				const changedFields: Record<string, any> = {};
				Object.keys(finalData).forEach((key) => {
					const k = key as keyof GoogleReview;
					if (JSON.stringify(finalData[k]) !== JSON.stringify(editingReview[k])) {
						changedFields[k] = finalData[k];
					}
				});

				delete changedFields.id;

				if (Object.keys(changedFields).length === 0) {
					setReviewModal(false);
					return;
				}

				await updateGoogleReviewApi(editingReview.id, changedFields);
			} else {
				await createGoogleReviewApi(finalData as GoogleReview);
			}

			setReviewModal(false);
			fetchData();
		} catch (err) {
			console.error(err);
		}
	};

	const filteredReviews = reviews.filter((r) => r.reviewerName.toLowerCase().includes(searchText.toLowerCase()));

	return (
		<div className="p-6 space-y-6">
			<div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
				<div>
					<h1 className="text-3xl font-bold">Google Reviews</h1>
				</div>

				<div className="flex flex-wrap gap-3">
					<Input
						placeholder="Search reviews by name..."
						value={searchText}
						onChange={(e) => setSearchText(e.target.value)}
						className="w-[260px] text-base"
					/>

					<Button variant="outline" onClick={fetchData} disabled={loading} className="text-base">
						<RefreshCw className="mr-2 h-5 w-5" />
						Refresh
					</Button>

					<Button onClick={openAddReview} className="text-base">
						<Plus className="mr-2 h-5 w-5" />
						Add Review
					</Button>
				</div>
			</div>

			{error && <div className="p-4 text-red-600 bg-red-50 border rounded-md text-base">{error}</div>}

			<Card>
				<CardHeader>
					<CardTitle className="text-xl">Testimonials Sequence Directory</CardTitle>
				</CardHeader>
				<CardContent className="p-0 sm:p-6">
					<div className="rounded-md border overflow-x-auto overflow-y-auto max-h-[680px] relative">
						<Table className="w-full min-w-[900px] table-fixed border-separate border-spacing-0">
							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
								<TableRow>
									<TableHead className="w-[70px] bg-background text-sm font-bold">Order</TableHead>
									<TableHead className="w-[110px] bg-background text-sm font-bold">Avatar</TableHead>
									<TableHead className="w-[170px] bg-background text-sm font-bold">Reviewer</TableHead>
									<TableHead className="w-[90px] bg-background text-sm font-bold">Rating</TableHead>
									<TableHead className="w-[260px] bg-background text-sm font-bold">Testimonial</TableHead>
									<TableHead className="w-[110px] bg-background text-sm font-bold">Source Link</TableHead>
									<TableHead className="w-[100px] bg-background text-sm font-bold">Featured</TableHead>
									<TableHead className="w-[100px] bg-background text-sm font-bold">Status</TableHead>
									<TableHead className="w-[100px] bg-background text-right text-sm font-bold">Actions</TableHead>
								</TableRow>
							</TableHeader>
							<TableBody>
								{loading ? (
									<TableRow>
										<TableCell colSpan={9} className="text-center py-10">
											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
										</TableCell>
									</TableRow>
								) : filteredReviews.length === 0 ? (
									<TableRow>
										<TableCell colSpan={9} className="text-center text-muted-foreground py-10 text-base">
											No reviews found matching your criteria.
										</TableCell>
									</TableRow>
								) : (
									filteredReviews.map((review) => (
										<TableRow key={review.id} className="hover:bg-muted/50">
											<TableCell className="font-mono text-sm">{review.sortOrder}</TableCell>
											<TableCell>
												{review.reviewerImage ? (
													<img
														src={review.reviewerImage}
														alt={review.reviewerName}
														className="w-10 h-10 rounded-full object-cover border"
													/>
												) : (
													<div className="w-10 h-10 rounded-full bg-secondary flex items-center justify-center border text-muted-foreground font-bold">
														{review.reviewerName.charAt(0).toUpperCase()}
													</div>
												)}
											</TableCell>
											<TableCell>
												<div className="font-semibold text-base truncate" title={review.reviewerName}>
													{review.reviewerName}
												</div>
												{review.reviewDate && (
													<div className="text-xs text-muted-foreground">
														{new Date(review.reviewDate).toLocaleDateString()}
													</div>
												)}
											</TableCell>
											<TableCell>
												<div className="flex items-center gap-1 font-medium text-sm">
													{review.rating}
													<Star className="h-4 w-4 fill-amber-400 text-amber-500" />
												</div>
											</TableCell>
											<TableCell>
												<div className="text-sm truncate max-w-[240px]" title={review.review}>
													"{review.review}"
												</div>
											</TableCell>
											<TableCell>
												{review.googleReviewUrl ? (
													<a
														href={review.googleReviewUrl}
														target="_blank"
														rel="noopener noreferrer"
														className="text-xs text-sky-600 hover:underline flex items-center gap-1"
													>
														Link <ExternalLink className="h-3 w-3" />
													</a>
												) : (
													<span className="text-xs text-muted-foreground italic">-</span>
												)}
											</TableCell>
											<TableCell>
												<Switch checked={review.isFeatured} onCheckedChange={() => handleToggleFeatured(review)} />
											</TableCell>
											<TableCell>
												<div className="flex items-center gap-2">
													<Switch checked={review.isActive} onCheckedChange={() => handleToggleStatus(review)} />
													<Badge variant={review.isActive ? 'default' : 'secondary'}>
														{review.isActive ? 'Active' : 'Disabled'}
													</Badge>
												</div>
											</TableCell>
											<TableCell className="text-right">
												<div className="flex justify-end gap-1">
													<Button
														size="icon"
														variant="ghost"
														className="h-8 w-8 text-muted-foreground hover:text-foreground"
														onClick={() => openEditReview(review)}
													>
														<Pencil className="h-4 w-4" />
													</Button>
													<Button
														size="icon"
														variant="ghost"
														className="h-8 w-8 text-red-500 hover:text-red-600"
														onClick={() => review.id && handleDeleteReview(review.id)}
													>
														<Trash2 className="h-4 w-4" />
													</Button>
												</div>
											</TableCell>
										</TableRow>
									))
								)}
							</TableBody>
						</Table>
					</div>
				</CardContent>
			</Card>

			<GoogleReviewModal
				open={reviewModal}
				onOpenChange={setReviewModal}
				editingReview={editingReview}
				reviewForm={reviewForm}
				setReviewForm={setReviewForm}
				onSave={saveReview}
			/>
		</div>
	);
}