import { MessageSquare } from 'lucide-react';

import { Link } from '@inertiajs/react';

import { AdminDataTable } from '@/Components/admin/AdminDataTable';
import AdminPage from '@/Components/admin/AdminPage';
import { PerPageSelector } from '@/Components/admin/PerPageSelector';
import { SortHeader } from '@/Components/admin/SortHeader';
import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import { Input } from '@/Components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/Components/ui/select';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/Components/ui/table';
import { useAdminFilters } from '@/hooks/useAdminFilters';
import { useNavigationState } from '@/hooks/useNavigationState';
import AdminLayout from '@/Layouts/AdminLayout';
import { formatRelativeTime } from '@/lib/format';
import type { AdminFeedbackSubmissionsIndexProps } from '@/types/admin';

export default function FeedbackSubmissionsIndex({
  submissions,
  filters,
  statuses,
  categories,
}: AdminFeedbackSubmissionsIndexProps) {
  const { search, setSearch, updateFilter, handleSort, handlePage, clearFilters } = useAdminFilters({
    route: '/admin/feedback-submissions',
    filters,
  });
  const isNavigating = useNavigationState();

  const hasFilters = !!(filters.search || filters.status || filters.category);

  return (
    <AdminLayout>
      <AdminPage
        title="Feedback Submissions"
        subtitle="User-submitted feedback and bug reports"
        breadcrumbs={[{ label: 'Admin', href: '/admin' }, { label: 'Feedback Submissions' }]}
      >
        <fieldset className="flex flex-col sm:flex-row gap-3">
          <legend className="sr-only">Feedback Filters</legend>
          <Input
            placeholder="Search message..."
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            className="max-w-sm"
            aria-label="Search feedback"
          />
          <Select
            value={filters.status ?? 'all'}
            onValueChange={(value) => updateFilter({ status: value === 'all' ? undefined : value })}
          >
            <SelectTrigger className="w-[160px]" aria-label="Filter by status">
              <SelectValue placeholder="Status: All" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">Status: All</SelectItem>
              {statuses.map((s) => (
                <SelectItem key={s} value={s}>
                  {s.charAt(0).toUpperCase() + s.slice(1)}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
          {categories.length > 0 && (
            <Select
              value={filters.category ?? 'all'}
              onValueChange={(value) =>
                updateFilter({ category: value === 'all' ? undefined : value })
              }
            >
              <SelectTrigger className="w-[170px]" aria-label="Filter by category">
                <SelectValue placeholder="Category: All" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">Category: All</SelectItem>
                {categories.map((c) => (
                  <SelectItem key={c} value={c}>
                    {c}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          )}
          {hasFilters && (
            <Button variant="ghost" size="sm" onClick={clearFilters}>
              Clear filters
            </Button>
          )}
          <div className="sm:ml-auto">
            <PerPageSelector
              value={filters.per_page ?? 25}
              onChange={(perPage) => updateFilter({ per_page: perPage })}
            />
          </div>
        </fieldset>

        <AdminDataTable
          isEmpty={submissions.data.length === 0}
          isNavigating={isNavigating}
          pagination={submissions}
          onPage={handlePage}
          paginationLabel="submissions"
          emptyVariant={hasFilters ? 'filtered' : undefined}
          emptyIcon={MessageSquare}
          emptyTitle={hasFilters ? 'No submissions match your filters' : 'No feedback submissions yet'}
          emptyDescription={hasFilters ? undefined : 'Feedback submissions from users will appear here.'}
          emptyPrimaryAction={
            hasFilters ? { label: 'Clear filters', onClick: clearFilters } : undefined
          }
        >
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Category</TableHead>
                <TableHead>Message</TableHead>
                <TableHead>User</TableHead>
                <TableHead>Status</TableHead>
                <SortHeader
                  column="created_at"
                  label="Submitted"
                  currentSort={filters.sort}
                  currentDir={filters.dir}
                  onSort={handleSort}
                />
                <SortHeader
                  column="resolved_at"
                  label="Resolved"
                  currentSort={filters.sort}
                  currentDir={filters.dir}
                  onSort={handleSort}
                />
              </TableRow>
            </TableHeader>
            <TableBody>
              {submissions.data.map((s) => (
                <TableRow key={s.id}>
                  <TableCell className="text-sm text-muted-foreground">{s.category ?? '—'}</TableCell>
                  <TableCell className="max-w-xs">
                    <Link
                      href={route('admin.feedback-submissions.show', s.id)}
                      className="font-medium hover:underline line-clamp-2"
                    >
                      {s.message}
                    </Link>
                  </TableCell>
                  <TableCell>
                    {s.user_id ? (
                      <Link
                        href={`/admin/users/${s.user_id}`}
                        className="text-sm hover:underline"
                      >
                        {s.user_name}
                      </Link>
                    ) : (
                      <span className="text-sm text-muted-foreground">Guest</span>
                    )}
                  </TableCell>
                  <TableCell>
                    <Badge variant={s.status === 'resolved' ? 'success' : 'warning'}>
                      {s.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {formatRelativeTime(s.created_at)}
                  </TableCell>
                  <TableCell className="text-sm text-muted-foreground">
                    {s.resolved_at ? formatRelativeTime(s.resolved_at) : '—'}
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </AdminDataTable>
      </AdminPage>
    </AdminLayout>
  );
}