import { Calendar as CalendarIcon, Download, Filter, Plus, X } from 'lucide-react';

import { useEffect, useState } from 'react';

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

import type { CalendarEntry } from '@/Components/Calendar/CalendarView';
import CalendarView from '@/Components/Calendar/CalendarView';
import EventCard from '@/Components/Calendar/EventCard';
import PageHeader from '@/Components/layout/PageHeader';
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, CardHeader, CardTitle } from '@/Components/ui/card';
import { EmptyState } from '@/Components/ui/empty-state';
import { Input } from '@/Components/ui/input';
import { Label } from '@/Components/ui/label';
import { LoadingButton } from '@/Components/ui/loading-button';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/Components/ui/select';
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/Components/ui/sheet';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/Components/ui/tabs';
import { useNavigationState } from '@/hooks/useNavigationState';
import DashboardLayout from '@/Layouts/DashboardLayout';
import { trackProductEvent } from '@/lib/analytics';
import { CALENDAR_VIEWED, FEATURE_USED } from '@/lib/event-catalog';
import { CALENDAR_STATUS_LABELS as STATUS_LABELS } from '@/lib/status';
import { cn } from '@/lib/utils';
import type { SiteBasic } from '@/types';

interface PaginatedEntries {
  data: CalendarEntry[];
  links: Array<{ url: string | null; label: string; active: boolean }>;
  current_page: number;
  last_page: number;
}

interface Filters {
  status: string | null;
  source_type: string | null;
  start_date: string | null;
  end_date: string | null;
  sort_by: string | null;
}

interface Counts {
  total: number;
  planned: number;
  in_progress: number;
  completed: number;
  overdue: number;
}

interface CalendarIndexPageProps {
  site: SiteBasic;
  entries: PaginatedEntries;
  filters: Filters;
  counts: Counts;
}

const SOURCE_TYPE_LABELS: Record<string, string> = {
  'App\\Models\\FreshnessRecommendation': 'Freshness',
  'App\\Models\\TopicGapSuggestion': 'Topic Gap',
  'App\\Models\\AnalysisRun': 'Analysis',
};

function buildFilterUrl(siteId: number, filters: Filters, updates: Partial<Filters>): string {
  const baseUrl = route('calendar.index', siteId);
  const params = new URLSearchParams();

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

  if (newFilters.status) params.set('status', newFilters.status);
  if (newFilters.source_type) params.set('source_type', newFilters.source_type);
  if (newFilters.start_date) params.set('start_date', newFilters.start_date);
  if (newFilters.end_date) params.set('end_date', newFilters.end_date);
  if (newFilters.sort_by) params.set('sort_by', newFilters.sort_by);

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

function buildClearFilterUrl(siteId: number, filters: Filters, keyToClear: string): string {
  const updates: Partial<Filters> = { [keyToClear]: null };
  return buildFilterUrl(siteId, filters, updates);
}

function buildExportUrl(siteId: number, filters: Filters): string {
  const baseUrl = route('calendar.export', siteId);
  const params = new URLSearchParams();

  if (filters.status) params.set('status', filters.status);
  if (filters.source_type) params.set('source_type', filters.source_type);
  if (filters.start_date) params.set('start_date', filters.start_date);
  if (filters.end_date) params.set('end_date', filters.end_date);

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

type CreateTaskStatus = 'planned' | 'in_progress' | 'completed' | 'overdue';

export default function CalendarIndex({ site, entries, filters, counts }: CalendarIndexPageProps) {
  useEffect(() => {
    trackProductEvent(CALENDAR_VIEWED, { site_id: String(site.id) });
    trackProductEvent(FEATURE_USED, { feature: 'seo_calendar' });
    // intentional: fire-once page-view events on site change
  }, [site.id]);

  const isNavigating = useNavigationState();
  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);
  const [createTaskOpen, setCreateTaskOpen] = useState(false);
  const [viewMode, setViewMode] = useState<'calendar' | 'list'>('calendar');
  const [selectedDate, setSelectedDate] = useState<Date>(new Date());

  const createForm = useForm<{
    title: string;
    description: string;
    scheduled_date: string;
    status: CreateTaskStatus;
    page_url: string;
  }>({
    title: '',
    description: '',
    scheduled_date: '',
    status: 'planned',
    page_url: '',
  });

  const handleCreateTask = (e: React.FormEvent) => {
    e.preventDefault();
    createForm.post(route('calendar.store', site.id), {
      onSuccess: () => {
        setCreateTaskOpen(false);
        createForm.reset();
      },
    });
  };

  // Get user's timezone
  const getTimezoneAbbr = (): string => {
    const formatter = new Intl.DateTimeFormat('en-US', {
      timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
      timeZoneName: 'short',
    });
    const parts = formatter.formatToParts(new Date());
    const tzPart = parts.find((p) => p.type === 'timeZoneName');
    return tzPart?.value || 'Local';
  };

  const timezoneAbbr = getTimezoneAbbr();

  const handleFilterChange = (key: keyof Filters, value: string | undefined) => {
    router.get(
      buildFilterUrl(site.id, filters, { [key]: value || null }),
      {},
      {
        preserveState: true,
        replace: true,
      },
    );
  };

  const clearAllFiltersUrl = route('calendar.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.source_type) {
    activeFilterChips.push({
      key: 'source_type',
      label: `Source: ${SOURCE_TYPE_LABELS[filters.source_type] ?? filters.source_type}`,
      clearUrl: buildClearFilterUrl(site.id, filters, 'source_type'),
    });
  }
  if (filters.start_date || filters.end_date) {
    const dateLabel =
      filters.start_date && filters.end_date
        ? `${filters.start_date} to ${filters.end_date}`
        : filters.start_date
          ? `From ${filters.start_date}`
          : `Until ${filters.end_date}`;
    activeFilterChips.push({
      key: 'date_range',
      label: `Dates: ${dateLabel}`,
      clearUrl: buildFilterUrl(site.id, filters, { start_date: null, end_date: null }),
    });
  }

  const hasActiveFilters = activeFilterChips.length > 0;

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

      <div className="container py-6">
        <SiteNav
          siteId={site.id}
          canAnalyze
          canRecommend
          canCannibalization
          canOpportunityMap
          canGeographic
          canDevice
        />

        <PageHeader
          title={`SEO Calendar (${timezoneAbbr})`}
          subtitle="Plan and track your content tasks and SEO activities"
          actions={
            <div className="flex gap-2">
              {counts.total > 0 && (
                <Button variant="outline" size="sm" asChild>
                  <a href={buildExportUrl(site.id, filters)} download>
                    <Download className="h-4 w-4 mr-1" />
                    Export ICS
                  </a>
                </Button>
              )}
              <Sheet open={createTaskOpen} onOpenChange={setCreateTaskOpen}>
                <SheetTrigger asChild>
                  <Button>
                    <Plus className="mr-2 h-4 w-4" />
                    Create Task
                  </Button>
                </SheetTrigger>
                <SheetContent>
                  <SheetHeader>
                    <SheetTitle>Create Task</SheetTitle>
                    <SheetDescription>Add a new task to your SEO calendar.</SheetDescription>
                  </SheetHeader>
                  <form onSubmit={handleCreateTask} className="mt-6 space-y-4">
                    <div className="space-y-2">
                      <Label htmlFor="create-title">Title</Label>
                      <Input
                        id="create-title"
                        value={createForm.data.title}
                        onChange={(e) => createForm.setData('title', e.target.value)}
                        required
                      />
                      {createForm.errors.title && (
                        <p className="text-sm text-destructive">{createForm.errors.title}</p>
                      )}
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="create-date">Scheduled Date</Label>
                      <Input
                        id="create-date"
                        type="date"
                        value={createForm.data.scheduled_date}
                        onChange={(e) => createForm.setData('scheduled_date', e.target.value)}
                      />
                      {createForm.errors.scheduled_date && (
                        <p className="text-sm text-destructive">
                          {createForm.errors.scheduled_date}
                        </p>
                      )}
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="create-status">Status</Label>
                      <Select
                        value={createForm.data.status}
                        onValueChange={(v) => createForm.setData('status', v as CreateTaskStatus)}
                      >
                        <SelectTrigger id="create-status">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          <SelectItem value="planned">Planned</SelectItem>
                          <SelectItem value="in_progress">In Progress</SelectItem>
                          <SelectItem value="completed">Completed</SelectItem>
                          <SelectItem value="overdue">Overdue</SelectItem>
                        </SelectContent>
                      </Select>
                      {createForm.errors.status && (
                        <p className="text-sm text-destructive">{createForm.errors.status}</p>
                      )}
                    </div>
                    <div className="space-y-2">
                      <Label htmlFor="create-url">
                        Page URL <span className="text-muted-foreground">(optional)</span>
                      </Label>
                      <Input
                        id="create-url"
                        type="url"
                        value={createForm.data.page_url}
                        onChange={(e) => createForm.setData('page_url', e.target.value)}
                      />
                      {createForm.errors.page_url && (
                        <p className="text-sm text-destructive">{createForm.errors.page_url}</p>
                      )}
                    </div>
                    <LoadingButton type="submit" className="w-full" loading={createForm.processing}>
                      Create Task
                    </LoadingButton>
                  </form>
                </SheetContent>
              </Sheet>
            </div>
          }
        />

        {/* Stats Cards */}
        <div className="grid gap-4 md:grid-cols-5 mb-6">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Tasks</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{counts.total}</div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Planned</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{counts.planned}</div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">In Progress</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{counts.in_progress}</div>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Completed</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{counts.completed}</div>
            </CardContent>
          </Card>
          <Card className={cn(counts.overdue > 0 && 'border-red-200 bg-red-50 dark:bg-red-950/20')}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Overdue</CardTitle>
            </CardHeader>
            <CardContent>
              <div
                className={cn(
                  'text-2xl font-bold',
                  counts.overdue > 0 && 'text-red-600 dark:text-red-400',
                )}
              >
                {counts.overdue}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Filters */}
        <Card className="mb-6">
          <CardHeader>
            <div className="flex items-center justify-between">
              <div>
                <CardTitle>Filters</CardTitle>
                <CardDescription>Narrow down your calendar tasks</CardDescription>
              </div>
              <Sheet open={mobileFiltersOpen} onOpenChange={setMobileFiltersOpen}>
                <SheetTrigger asChild>
                  <Button variant="outline" size="sm" className="md:hidden">
                    <Filter className="h-4 w-4 mr-2" />
                    Filters
                  </Button>
                </SheetTrigger>
                <SheetContent>
                  <SheetHeader>
                    <SheetTitle>Filter Tasks</SheetTitle>
                  </SheetHeader>
                  <div className="mt-6 space-y-4">
                    <FilterControls filters={filters} onFilterChange={handleFilterChange} />
                  </div>
                </SheetContent>
              </Sheet>
            </div>
          </CardHeader>
          <CardContent>
            <div className="hidden md:block">
              <FilterControls filters={filters} onFilterChange={handleFilterChange} />
            </div>

            {/* Active Filters */}
            {hasActiveFilters && (
              <div className="flex flex-wrap gap-2 mt-4 pt-4 border-t">
                <span className="text-sm font-medium">Active Filters:</span>
                {activeFilterChips.map((chip) => (
                  <Badge key={chip.key} variant="secondary" className="gap-1">
                    {chip.label}
                    <Link href={chip.clearUrl} preserveState replace>
                      <X className="h-3 w-3" />
                    </Link>
                  </Badge>
                ))}
                <Link href={clearAllFiltersUrl}>
                  <Button variant="ghost" size="sm">
                    Clear All
                  </Button>
                </Link>
              </div>
            )}
          </CardContent>
        </Card>

        {/* View Toggle */}
        <Tabs
          value={viewMode}
          onValueChange={(v) => setViewMode(v as 'calendar' | 'list')}
          className="mb-6"
        >
          <TabsList>
            <TabsTrigger value="calendar">
              <CalendarIcon className="h-4 w-4 mr-2" />
              Calendar View
            </TabsTrigger>
            <TabsTrigger value="list">List View</TabsTrigger>
          </TabsList>

          <TabsContent value="calendar" className="mt-6">
            {entries.data.length === 0 ? (
              <EmptyState
                icon={CalendarIcon}
                title="No calendar tasks"
                description="Schedule content updates, freshness checks, and publishing tasks — click 'Add Task' to get started."
                action={<Button onClick={() => setCreateTaskOpen(true)}>Add Task</Button>}
              />
            ) : (
              <CalendarView
                entries={entries.data}
                selectedDate={selectedDate}
                onDateSelect={(date) => date && setSelectedDate(date)}
              />
            )}
          </TabsContent>

          <TabsContent value="list" className="mt-6">
            {entries.data.length === 0 ? (
              <EmptyState
                icon={CalendarIcon}
                title="No tasks in list view"
                description="Schedule content updates, freshness checks, and publishing tasks — click 'Add Task' to get started."
                action={<Button onClick={() => setCreateTaskOpen(true)}>Add Task</Button>}
              />
            ) : (
              <div className={`space-y-4 transition-opacity ${isNavigating ? 'opacity-50' : ''}`}>
                {entries.data.map((entry) => (
                  <EventCard key={entry.id} entry={entry} siteId={site.id} />
                ))}
              </div>
            )}

            {/* Pagination */}
            {entries.data.length > 0 && (
              <div className="mt-6">
                <InertiaPagination
                  links={entries.links}
                  currentPage={entries.current_page}
                  lastPage={entries.last_page}
                />
              </div>
            )}
          </TabsContent>
        </Tabs>
      </div>
    </>
  );
}

CalendarIndex.layout = (page: React.ReactNode) => <DashboardLayout children={page} />;

// Filter Controls Component
interface FilterControlsProps {
  filters: Filters;
  onFilterChange: (key: keyof Filters, value: string | undefined) => void;
}

function FilterControls({ filters, onFilterChange }: FilterControlsProps) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
      <div className="space-y-2">
        <Label htmlFor="status-filter">Status</Label>
        <Select
          value={filters.status ?? 'all'}
          onValueChange={(value) => onFilterChange('status', value === 'all' ? undefined : value)}
        >
          <SelectTrigger id="status-filter">
            <SelectValue placeholder="All statuses" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Statuses</SelectItem>
            <SelectItem value="planned">Planned</SelectItem>
            <SelectItem value="in_progress">In Progress</SelectItem>
            <SelectItem value="completed">Completed</SelectItem>
            <SelectItem value="overdue">Overdue</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="space-y-2">
        <Label htmlFor="source-filter">Source Type</Label>
        <Select
          value={filters.source_type ?? 'all'}
          onValueChange={(value) =>
            onFilterChange('source_type', value === 'all' ? undefined : value)
          }
        >
          <SelectTrigger id="source-filter">
            <SelectValue placeholder="All sources" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All Sources</SelectItem>
            <SelectItem value="App\Models\FreshnessRecommendation">Freshness</SelectItem>
            <SelectItem value="App\Models\TopicGapSuggestion">Topic Gap</SelectItem>
            <SelectItem value="App\Models\AnalysisRun">Analysis</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="space-y-2">
        <Label htmlFor="start-date">Start Date</Label>
        <Input
          id="start-date"
          type="date"
          value={filters.start_date ?? ''}
          onChange={(e) => onFilterChange('start_date', e.target.value || undefined)}
        />
      </div>

      <div className="space-y-2">
        <Label htmlFor="end-date">End Date</Label>
        <Input
          id="end-date"
          type="date"
          value={filters.end_date ?? ''}
          onChange={(e) => onFilterChange('end_date', e.target.value || undefined)}
        />
      </div>
    </div>
  );
}