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

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

import {
	getInsurancePartnersApi,
	createInsurancePartnerApi,
	updateInsurancePartnerApi,
	deleteInsurancePartnerApi,
	InsurancePartner,
} from '@/api/insurancePartner';

import InsurancePartnerModal from '@/components/InsurancePartnerModal/InsurancePartnerModal';

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, Link2 } from 'lucide-react';

export default function InsurancePartnerPage() {
	const [partners, setPartners] = useState<InsurancePartner[]>([]);
	const [loading, setLoading] = useState(true);
	const [error, setError] = useState('');

	const [partnerModal, setPartnerModal] = useState(false);
	const [editingPartner, setEditingPartner] = useState<InsurancePartner | null>(null);

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

	const [partnerForm, setPartnerForm] = useState<Partial<InsurancePartner>>({
		name: '',
		logo: '',
		websiteUrl: '',
		sortOrder: 1000,
		isActive: true,
	});

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

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

	const handleToggleStatus = async (partner: InsurancePartner) => {
		if (!partner.id) return;
		try {
			await updateInsurancePartnerApi(partner.id, { isActive: !partner.isActive });
			toast.success(`Partner status updated successfully`);
			fetchData();
		} catch (err) {
			console.error(err);
			toast.error('Could not overwrite corporate status configurations.');
		}
	};

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

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

	const openAddPartner = () => {
		setEditingPartner(null);
		setPartnerForm({
			name: '',
			logo: '',
			websiteUrl: '',
			sortOrder: 1000,
			isActive: true,
		});
		setPartnerModal(true);
	};

	const openEditPartner = (partner: InsurancePartner) => {
		setEditingPartner(partner);
		setPartnerForm({ ...partner });
		setPartnerModal(true);
	};

	const savePartner = async () => {
		if (!partnerForm.name) return toast.error('Insurance Partner Name is required.');
		if (!partnerForm.logo) return toast.error('Partner Corporate Logo Asset is required.');

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

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

				delete changedFields.id;
				delete changedFields.createdAt;
				delete changedFields.updatedAt;

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

				await updateInsurancePartnerApi(editingPartner.id, changedFields);
			} else {
				await createInsurancePartnerApi(finalData);
			}

			setPartnerModal(false);
			fetchData();
		} catch (err) {
			console.error(err);
			toast.error('An unexpected service exception halted corporate resource persistence runtime.');
		}
	};

	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">Insurance Partners</h1>
				</div>

				<div className="flex flex-wrap gap-3">
					<Input
						placeholder="Search partners 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={openAddPartner} className="text-base">
						<Plus className="mr-2 h-5 w-5" />
						Add Partner
					</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">Network Panels 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-[800px] table-fixed border-separate border-spacing-0">
							<TableHeader className="sticky top-0 z-20 bg-background shadow-sm">
								<TableRow>
									<TableHead className="w-[80px] bg-background text-sm font-bold">Order</TableHead>
									<TableHead className="w-[160px] bg-background text-sm font-bold">Logo Preview</TableHead>
									<TableHead className="w-[260px] bg-background text-sm font-bold">Company Identity</TableHead>
									<TableHead className="w-[240px] bg-background text-sm font-bold">Portal Website</TableHead>
									<TableHead className="w-[120px] bg-background text-sm font-bold">Status</TableHead>
									<TableHead className="w-[120px] bg-background text-right text-sm font-bold">Actions</TableHead>
								</TableRow>
							</TableHeader>
							<TableBody>
								{loading ? (
									<TableRow>
										<TableCell colSpan={6} className="text-center py-10">
											<Loader2 className="h-8 w-8 animate-spin mx-auto" />
										</TableCell>
									</TableRow>
								) : partners.length === 0 ? (
									<TableRow>
										<TableCell colSpan={6} className="text-center text-muted-foreground py-10 text-base">
											No active healthcare insurance tie-ups found matching criteria.
										</TableCell>
									</TableRow>
								) : (
									partners.map((partner) => (
										<TableRow key={partner.id} className="hover:bg-muted/50">
											<TableCell className="font-mono text-sm">{partner.sortOrder}</TableCell>
											<TableCell>
												<div className="w-28 h-14 rounded-md overflow-hidden bg-white p-1 relative border flex items-center justify-center">
													<img
														src={partner.logo}
														alt={`${partner.name} logo`}
														className="w-full h-full object-contain"
													/>
												</div>
											</TableCell>
											<TableCell>
												<div className="font-semibold text-base truncate" title={partner.name}>
													{partner.name}
												</div>
											</TableCell>
											<TableCell>
												{partner.websiteUrl ? (
													<a
														href={partner.websiteUrl}
														target="_blank"
														rel="noopener noreferrer"
														className="text-sm text-sky-600 hover:underline flex items-center gap-1.5 truncate max-w-[220px]"
														title={partner.websiteUrl}
													>
														<Link2 className="h-3.5 w-3.5 flex-shrink-0" />
														{partner.websiteUrl}
													</a>
												) : (
													<span className="text-xs text-muted-foreground italic">No external URL linked</span>
												)}
											</TableCell>
											<TableCell>
												<div className="flex items-center gap-2">
													<Switch checked={partner.isActive} onCheckedChange={() => handleToggleStatus(partner)} />
													<Badge variant={partner.isActive ? 'default' : 'secondary'}>
														{partner.isActive ? 'Active' : 'Disabled'}
													</Badge>
												</div>
											</TableCell>
											<TableCell className="text-right">
												<div className="flex justify-end gap-2">
													<Button
														size="icon"
														variant="ghost"
														className="h-9 w-9 text-muted-foreground hover:text-foreground"
														onClick={() => openEditPartner(partner)}
													>
														<Pencil className="h-4 w-4" />
													</Button>
													<Button
														size="icon"
														variant="ghost"
														className="h-9 w-9 text-red-500 hover:text-red-600 hover:bg-red-50"
														onClick={() => partner.id && handleDeletePartner(partner.id)}
													>
														<Trash2 className="h-4 w-4" />
													</Button>
												</div>
											</TableCell>
										</TableRow>
									))
								)}
							</TableBody>
						</Table>
					</div>
				</CardContent>
			</Card>

			<InsurancePartnerModal
				open={partnerModal}
				onOpenChange={setPartnerModal}
				editingPartner={editingPartner}
				partnerForm={partnerForm}
				setPartnerForm={setPartnerForm}
				onSave={savePartner}
			/>
		</div>
	);
}