import { FileText, Filter, X, Download, Eye, Trash2 } from 'lucide-react';
import { toast } from 'sonner';

import { useEffect, useState } from 'react';

import { Head, Link, router } from '@inertiajs/react';


import SiteNav from '@/Components/Navigation/SiteNav';
import InertiaPagination from '@/Components/Shared/InertiaPagination';
import { Badge } from '@/Components/ui/badge';
import { Button } from '@/Components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/Components/ui/card';
import { ConfirmDialog } from '@/Components/ui/confirm-dialog';
import { EmptyState } from '@/Components/ui/empty-state';
import { Input } from '@/Components/ui/input';
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/Components/ui/sheet';
import DashboardLayout from '@/Layouts/DashboardLayout';
import { trackProductEvent } from '@/lib/analytics';
import { REPORTS_VIEWED } from '@/lib/event-catalog';
import { formatDate } from '@/lib/format';
import { JOB_STATUS_LABELS as STATUS_LABELS, JOB_STATUS_VARIANTS as STATUS_VARIANTS } from '@/lib/status';

interface Report {
  id: number;
  name: string;
  status: string;
  sections: string[];
  generated_at: string | null;
  created_at: string;
  has_pdf: boolean;
}

interface Props {
  site: { id: number; name: string; domain: string };
  reports: Report[];
  filters: { status: string | null; search: string | null; sort: string | null };
  counts: {
    total: number;
    pending: number;
    processing: number;
    completed: number;
    failed: number;
  };
  pagination: {
    current_page: number;
    last_page: number;
    per_page: number;
    total: number;
    links: { url: string | null; label: string; active: boolean }[];
  };
}


function buildFilterUrl(
  siteId: number,
  filters: Props['filters'],
  newFilters: Partial<Props['filters']>,
): string {
  const baseUrl = route('sites.reports.index', siteId);
  const params = new URLSearchParams();

  const mergedFilters = { ...filters, ...newFilters };

  if (mergedFilters.status) params.set('status', mergedFilters.status);
  if (mergedFilters.search) params.set('search', mergedFilters.search);
  if (mergedFilters.sort) params.set('sort', mergedFilters.sort);

  const qs = params.toString();
  return qs ? `${baseUrl}?${qs}` : baseUrl;
}

function buildClearFilterUrl(
  siteId: number,
  filters: Props['filters'],
  keyToClear: string,
): string {
  const baseUrl = route('sites.reports.index', siteId);
  const params = new URLSearchParams();

  if (filters.status && keyToClear !== 'status') params.set('status', filters.status);
  if (filters.search && keyToClear !== 'search') params.set('search', filters.search);
  if (filters.sort && keyToClear !== 'sort') params.set('sort', filters.sort);

  const qs = params.toString();
  return qs ? `${baseUrl}?${qs}` : baseUrl;
}

export default function ReportsIndex({ site, reports, filters, counts, pagination }: Props) {
  useEffect(() => {
    trackProductEvent(REPORTS_VIEWED, { feature: 'reports', site_id: String(site.id) });
  }, [site.id]);

  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
  const [searchInput, setSearchInput] = useState(filters.search ?? '');
  const [confirmingDelete, setConfirmingDelete] = useState<number | null>(null);

  const handleFilterByStatus = (status: string | null) => {
    router.get(
      buildFilterUrl(site.id, filters, { status }),
      {},
      { preserveState: true, replace: true },
    );
  };

  const handleSortChange = (sort: string | null) => {
    router.get(
      buildFilterUrl(site.id, filters, { sort }),
      {},
      { preserveState: true, replace: true },
    );
  };

  const handleSearch = () => {
    router.get(
      buildFilterUrl(site.id, filters, { search: searchInput || null }),
      {},
      { preserveState: true, replace: true },
    );
  };

  const handleClearSearch = () => {
    setSearchInput('');
    router.get(
      buildFilterUrl(site.id, filters, { search: null }),
      {},
      { preserveState: true, replace: true },
    );
  };

  const handleDelete = (reportId: number) => {
    router.delete(route('sites.reports.destroy', { site: site.id, report: reportId }), {
      preserveScroll: true,
      onSuccess: () => toast.success('Report deleted.'),
      onFinish: () => setConfirmingDelete(null),
    });
  };

  const clearAllFiltersUrl = route('sites.reports.index', site.id);

  // Active filter chips
  const activeFilterChips: Array<{ key: string; label: string; clearUrl: string }> = [];
  if (filters.status) {
    activeFilterChips.push({
      key: 'status',
      label: `Status: ${STATUS_LABELS[filters.status] ?? filters.status}`,
      clearUrl: buildClearFilterUrl(site.id, filters, 'status'),
    });
  }
  if (filters.search) {
    activeFilterChips.push({
      key: 'search',
      label: `Search: ${filters.search}`,
      clearUrl: buildClearFilterUrl(site.id, filters, 'search'),
    });
  }
  if (filters.sort) {
    activeFilterChips.push({
      key: 'sort',
      label: `Sort: ${filters.sort === 'oldest' ? 'Oldest First' : 'Newest First'}`,
      clearUrl: buildClearFilterUrl(site.id, filters, 'sort'),
    });
  }

  const hasActiveFilters = activeFilterChips.length > 0;

  const FiltersPanel = () => (
    <div className="space-y-6">
      <div>
        <h3 className="mb-3 text-sm font-semibold">Status</h3>
        <div className="space-y-2">
          <Button
            variant={!filters.status ? 'default' : 'ghost'}
            size="sm"
            className="w-full justify-start"
            onClick={() => handleFilterByStatus(null)}
          >
            All ({counts.total})
          </Button>
          <Button
            variant={filters.status === 'pending' ? 'default' : 'ghost'}
            size="sm"
            className="w-full justify-start"
            onClick={() => handleFilterByStatus('pending')}
          >
            Pending ({counts.pending})
          </Button>
          <Button
            variant={filters.status === 'processing' ? 'default' : 'ghost'}
            size="sm"
            className="w-full justify-start"
            onClick={() => handleFilterByStatus('processing')}
          >
            Processing ({counts.processing})
          </Button>
          <Button
            variant={filters.status === 'completed' ? 'default' : 'ghost'}
            size="sm"
            className="w-full justify-start"
            onClick={() => handleFilterByStatus('completed')}
          >
            Completed ({counts.completed})
          </Button>
          <Button
            variant={filters.status === 'failed' ? 'default' : 'ghost'}
            size="sm"
            className="w-full justify-start"
            onClick={() => handleFilterByStatus('failed')}
          >
            Failed ({counts.failed})
          </Button>
        </div>
      </div>

      <div>
        <h3 className="mb-3 text-sm font-semibold">Sort By</h3>
        <div className="space-y-2">
          <Button
            variant={!filters.sort ? 'default' : 'ghost'}
            size="sm"
            className="w-full justify-start"
            onClick={() => handleSortChange(null)}
          >
            Newest First
          </Button>
          <Button
            variant={filters.sort === 'oldest' ? 'default' : 'ghost'}
            size="sm"
            className="w-full justify-start"
            onClick={() => handleSortChange('oldest')}
          >
            Oldest First
          </Button>
        </div>
      </div>

      {hasActiveFilters && (
        <div className="pt-4">
          <Button
            variant="outline"
            size="sm"
            className="w-full"
            onClick={() => {
              setSearchInput('');
              router.get(clearAllFiltersUrl, {}, { preserveState: true, replace: true });
            }}
          >
            Clear All Filters
          </Button>
        </div>
      )}
    </div>
  );

  return (
    <DashboardLayout>
      <Head title={`Reports - ${site.name}`} />

      <SiteNav siteId={site.id} />

      <div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
        <div className="mb-8 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h1 className="text-3xl font-bold text-foreground">Reports</h1>
            <p className="mt-1 text-muted-foreground">
              Create and manage custom SEO reports for {site.name}
            </p>
          </div>
          <Button asChild>
            <Link href={route('sites.reports.create', site.id)}>
              <FileText className="mr-2 h-4 w-4" />
              Create Report
            </Link>
          </Button>
        </div>

        <div className="flex gap-6">
          {/* Desktop sidebar */}
          <aside className="hidden w-64 shrink-0 lg:block">
            <div className="sticky top-8">
              <Card>
                <CardHeader>
                  <CardTitle className="text-lg">Filters</CardTitle>
                </CardHeader>
                <CardContent>
                  <FiltersPanel />
                </CardContent>
              </Card>
            </div>
          </aside>

          {/* Main content */}
          <div className="flex-1">
            {/* Mobile filter sheet + search */}
            <div className="mb-6 space-y-4">
              <div className="flex gap-2">
                <div className="relative flex-1">
                  <Input
                    type="text"
                    placeholder="Search reports..."
                    value={searchInput}
                    onChange={(e) => setSearchInput(e.target.value)}
                    onKeyDown={(e) => {
                      if (e.key === 'Enter') {
                        handleSearch();
                      }
                    }}
                  />
                  {filters.search && (
                    <Button
                      variant="ghost"
                      size="sm"
                      className="absolute right-0 top-0"
                      onClick={handleClearSearch}
                      aria-label="Clear search"
                    >
                      <X className="h-4 w-4" />
                    </Button>
                  )}
                </div>
                <Button onClick={handleSearch}>Search</Button>
                <Sheet open={mobileFiltersOpen} onOpenChange={setMobileFiltersOpen}>
                  <SheetTrigger asChild>
                    <Button variant="outline" className="lg:hidden">
                      <Filter className="mr-2 h-4 w-4" />
                      Filters
                      {hasActiveFilters && (
                        <Badge variant="secondary" className="ml-2">
                          {activeFilterChips.length}
                        </Badge>
                      )}
                    </Button>
                  </SheetTrigger>
                  <SheetContent>
                    <SheetHeader>
                      <SheetTitle>Filters</SheetTitle>
                    </SheetHeader>
                    <div className="mt-6">
                      <FiltersPanel />
                    </div>
                  </SheetContent>
                </Sheet>
              </div>

              {/* Active filter chips */}
              {hasActiveFilters && (
                <div className="flex flex-wrap items-center gap-2">
                  <span className="text-sm text-muted-foreground">Active filters:</span>
                  {activeFilterChips.map((chip) => (
                    <Badge key={chip.key} variant="secondary" className="gap-1">
                      {chip.label}
                      <button
                        type="button"
                        aria-label={`Remove ${chip.label} filter`}
                        onClick={() => {
                          if (chip.key === 'search') {
                            setSearchInput('');
                          }
                          router.get(chip.clearUrl, {}, { preserveState: true, replace: true });
                        }}
                        className="ml-1 rounded-full hover:bg-secondary-foreground/20 outline-none focus-visible:ring-2 focus-visible:ring-ring"
                      >
                        <X className="h-3 w-3" />
                      </button>
                    </Badge>
                  ))}
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => {
                      setSearchInput('');
                      router.get(clearAllFiltersUrl, {}, { preserveState: true, replace: true });
                    }}
                  >
                    Clear all
                  </Button>
                </div>
              )}
            </div>

            {/* Reports list */}
            {reports.length === 0 ? (
              <EmptyState
                icon={FileText}
                title={hasActiveFilters ? 'No reports found' : 'No reports yet'}
                description={
                  hasActiveFilters
                    ? 'Try adjusting your filters to see more reports.'
                    : 'Create your first custom SEO report to get started.'
                }
                action={
                  hasActiveFilters ? (
                    <Button
                      variant="outline"
                      onClick={() => {
                        setSearchInput('');
                        router.get(clearAllFiltersUrl, {}, { preserveState: true, replace: true });
                      }}
                    >
                      Clear filters
                    </Button>
                  ) : (
                    <Button asChild>
                      <Link href={route('sites.reports.create', site.id)}>
                        <FileText className="mr-2 h-4 w-4" />
                        Create Report
                      </Link>
                    </Button>
                  )
                }
              />
            ) : (
              <div className="space-y-4">
                {reports.map((report) => (
                  <Card key={report.id}>
                    <CardHeader>
                      <div className="flex items-start justify-between">
                        <div className="space-y-1">
                          <CardTitle className="text-lg">{report.name}</CardTitle>
                          <CardDescription>
                            Created {formatDate(report.created_at)}
                            {report.generated_at && (
                              <> • Generated {formatDate(report.generated_at)}</>
                            )}
                          </CardDescription>
                        </div>
                        <Badge variant={STATUS_VARIANTS[report.status]}>
                          {STATUS_LABELS[report.status]}
                        </Badge>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <div className="flex flex-wrap gap-2">
                        {report.sections.map((section) => (
                          <Badge key={section} variant="outline">
                            {section.replace(/_/g, ' ')}
                          </Badge>
                        ))}
                        {report.has_pdf && (
                          <Badge variant="secondary">
                            <Download className="mr-1 h-3 w-3" />
                            PDF Available
                          </Badge>
                        )}
                      </div>
                    </CardContent>
                    <CardFooter className="flex justify-between">
                      <Button variant="outline" size="sm" asChild>
                        <Link
                          href={route('sites.reports.show', { site: site.id, report: report.id })}
                        >
                          <Eye className="mr-2 h-4 w-4" />
                          View Report
                        </Link>
                      </Button>
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => setConfirmingDelete(report.id)}
                        aria-label={`Delete ${report.name}`}
                      >
                        <Trash2 className="h-4 w-4 text-destructive" />
                      </Button>
                    </CardFooter>
                  </Card>
                ))}
              </div>
            )}

            {/* Pagination */}
            <InertiaPagination
              links={pagination.links}
              currentPage={pagination.current_page}
              lastPage={pagination.last_page}
              perPage={pagination.per_page}
              total={pagination.total}
            />
          </div>
        </div>
      </div>

      <ConfirmDialog
        open={confirmingDelete !== null}
        onOpenChange={(open) => {
          if (!open) setConfirmingDelete(null);
        }}
        title="Delete report"
        description="Deleting this report will remove all generated content and any active share links. This cannot be undone."
        variant="destructive"
        confirmLabel="Delete"
        onConfirm={() => {
          if (confirmingDelete) handleDelete(confirmingDelete);
        }}
      />
    </DashboardLayout>
  );
}