'use client';
import { Badge } from '@/components/ui/badge';
import { CardHeader, CardTitle } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';

interface QueryRow {
    name: string;
    email: string;
    subject: string;
    phone: string;
    seen: boolean;
    createdAt: string;
}

export function RecentQueriesTable({ data = [] }: { data?: QueryRow[] }) {
    return (
        <div className="w-80 sm:w-full">
            <CardHeader className="flex flex-row items-center justify-between px-2 pb-4">
                <div>
                    <CardTitle className="text-lg font-bold text-foreground/80">Recent Customer Queries</CardTitle>
                    <p className="text-xs text-foreground/70">Last 10 contact form submissions</p>
                </div>
            </CardHeader>
            <div className="overflow-hidden rounded-xl border bg-card">
                <div className="overflow-x-auto">
                    <Table>
                        <TableHeader className="sticky top-0 z-10 bg-card">
                            <TableRow className="border-b hover:bg-transparent">
                                <TableHead className="px-6 whitespace-nowrap">Name</TableHead>
                                <TableHead className="px-6 whitespace-nowrap">Email</TableHead>
                                <TableHead className="px-6 whitespace-nowrap">Phone</TableHead>
                                <TableHead className="px-6 whitespace-nowrap">Subject</TableHead>
                                <TableHead className="px-6 whitespace-nowrap">Date</TableHead>
                                <TableHead className="px-6 text-center whitespace-nowrap">Status</TableHead>
                            </TableRow>
                        </TableHeader>
                        <TableBody>
                            {data.length === 0 ? (
                                <TableRow>
                                    <TableCell colSpan={6} className="px-6 py-8 text-center text-muted-foreground">
                                        No recent queries found.
                                    </TableCell>
                                </TableRow>
                            ) : (
                                data.map((query, i) => (
                                    <TableRow key={i} className="hover:bg-muted/50">
                                        <TableCell className="px-6 font-medium whitespace-nowrap">{query.name}</TableCell>
                                        <TableCell className="px-6 whitespace-nowrap text-muted-foreground">{query.email}</TableCell>
                                        <TableCell className="px-6 whitespace-nowrap text-muted-foreground">{query.phone || '—'}</TableCell>
                                        <TableCell className="px-6 whitespace-nowrap">{query.subject || '—'}</TableCell>
                                        <TableCell className="px-6 whitespace-nowrap text-muted-foreground">{query.createdAt}</TableCell>
                                        <TableCell className="px-6 text-center whitespace-nowrap">
                                            <Badge
                                                variant="secondary"
                                                className={query.seen ? 'bg-emerald-100 text-emerald-700' : 'bg-red-100 text-red-700'}
                                            >
                                                {query.seen ? 'Seen' : 'Unseen'}
                                            </Badge>
                                        </TableCell>
                                    </TableRow>
                                ))
                            )}
                        </TableBody>
                    </Table>
                </div>
            </div>
        </div>
    );
}