import { ArrowRight, CalendarClock, FileText, Filter, Lightbulb, Search, X } from 'lucide-react';

import { type FormEvent, useEffect, useState } from 'react';

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

import { UpgradePrompt } from '@/Components/billing/UpgradePrompt';
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 { LoadingButton } from '@/Components/ui/loading-button';
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/Components/ui/sheet';
import { Skeleton } from '@/Components/ui/skeleton';
import { useNavigationState } from '@/hooks/useNavigationState';
import DashboardLayout from '@/Layouts/DashboardLayout';
import { trackFilterApplied, trackProductEvent } from '@/lib/analytics';
import { CONTENT_BRIEFS_VIEWED } from '@/lib/event-catalog';
import { formatDateOnly } from '@/lib/format';
import { BRIEF_STATUS_LABELS as STATUS_LABELS, BRIEF_STATUS_VARIANTS as STATUS_VARIANTS } from '@/lib/status';
import type { PageProps, SiteBasic } from '@/types';

interface ContentBrief {
  id: number;
  target_keyword: string;
  source_type: string;
  source_id: number;
  status: string;
  generated_at: string | null;
  created_at: string;
  suggested_publish_date: string | null;
}

function formatPublishWeek(isoDate: string): string {
  const date = new Date(isoDate);
  return `Week of ${date.toLocaleDateString(undefined, { timeZone: 'UTC', month: 'short', day: 'numeric' })}`;
}

interface Props {
  site: SiteBasic;
  briefs: ContentBrief[];
  filters: { status: string | null; source_type: string | null; sort: string | null };
  counts: {
    total: number;
    pending: number;
    generating: number;
    completed: number;
    failed: number;
    TopicCluster: number;
    TopicGapSuggestion: number;
    FreshnessRecommendation: number;
  };
  pagination: {
    current_page: number;
    last_page: number;
    per_page: number;
    total: number;
    links: { url: string | null; label: string; active: boolean }[];
  };
}


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

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

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

  if (mergedFilters.status) params.set('status', mergedFilters.status);
  if (mergedFilters.source_type) params.set('source_type', mergedFilters.source_type);
  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('content-briefs.index', siteId);
  const params = new URLSearchParams();

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

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

function KeywordSearchForm({ siteId }: { siteId: number }) {
  const [keyword, setKeyword] = useState('');
  const isNavigating = useNavigationState();

  const handleSubmit = (e: FormEvent) => {
    e.preventDefault();
    const trimmed = keyword.trim();
    if (!trimmed) return;

    const params = new URLSearchParams({
      type: 'keyword_opportunity',
    });
    router.visit(`${route('opportunity-map.index', siteId)}?${params.toString()}`, {
      preserveState: false,
    });
  };

  return (
    <form onSubmit={handleSubmit} className="mt-4 flex items-center gap-2">
      <div className="relative flex-1">
        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
        <input
          type="text"
          value={keyword}
          onChange={(e) => setKeyword(e.target.value)}
          placeholder="Enter a keyword..."
          aria-label="Target keyword for content brief"
          className="w-full rounded-md border border-input bg-background px-3 py-2 pl-9 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        />
      </div>
      <LoadingButton type="submit" loading={isNavigating} loadingText="Generating..." disabled={!keyword.trim()} className="whitespace-nowrap">
        Generate Brief
        {!isNavigating && <ArrowRight className="ml-2 h-4 w-4" />}
      </LoadingButton>
    </form>
  );
}

export default function ContentBriefsIndex({ site, briefs, filters, counts, pagination }: Props) {
  const { limits } = usePage<PageProps>().props;
  const isNavigating = useNavigationState();
  const [mobileFiltersOpen, setMobileFiltersOpen] = useState(false);

  useEffect(() => {
    trackProductEvent(CONTENT_BRIEFS_VIEWED, { site_id: String(site.id), feature: 'content_briefs' });
  }, [site.id]);

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

  const handleFilterBySourceType = (sourceType: string | null) => {
    trackFilterApplied('source_type', sourceType ?? 'cleared');
    router.get(
      buildFilterUrl(site.id, filters, { source_type: sourceType }),
      {},
      { preserveState: true, replace: true },
    );
  };

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

  const clearAllFiltersUrl = route('content-briefs.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.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 === 'generating' ? 'default' : 'ghost'}
            size="sm"
            className="w-full justify-start"
            onClick={() => handleFilterByStatus('generating')}
          >
            Generating ({counts.generating})
          </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">Source Type</h3>
        <div className="space-y-2">
          <Button
            variant={!filters.source_type ? 'default' : 'ghost'}
            size="sm"
            className="w-full justify-start"
            onClick={() => handleFilterBySourceType(null)}
          >
            All Sources
          </Button>
          <Button
            variant={filters.source_type === 'TopicCluster' ? 'default' : 'ghost'}
            size="sm"
            className="w-full justify-start"
            onClick={() => handleFilterBySourceType('TopicCluster')}
          >
            Topic Clusters ({counts.TopicCluster})
          </Button>
          <Button
            variant={filters.source_type === 'TopicGapSuggestion' ? 'default' : 'ghost'}
            size="sm"
            className="w-full justify-start"
            onClick={() => handleFilterBySourceType('TopicGapSuggestion')}
          >
            Gap Suggestions ({counts.TopicGapSuggestion})
          </Button>
          <Button
            variant={filters.source_type === 'FreshnessRecommendation' ? 'default' : 'ghost'}
            size="sm"
            className="w-full justify-start"
            onClick={() => handleFilterBySourceType('FreshnessRecommendation')}
          >
            Freshness ({counts.FreshnessRecommendation})
          </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>
    </div>
  );

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

      <PageHeader
        title="Content Briefs"
        subtitle="AI-generated content briefs from your topic clusters and recommendations"
        actions={
          <Sheet open={mobileFiltersOpen} onOpenChange={setMobileFiltersOpen}>
            <SheetTrigger asChild>
              <Button variant="outline" size="sm" className="md:hidden">
                <Filter className="mr-2 h-4 w-4" />
                Filters
                {hasActiveFilters && (
                  <Badge variant="secondary" className="ml-2">
                    {activeFilterChips.length}
                  </Badge>
                )}
              </Button>
            </SheetTrigger>
            <SheetContent side="left">
              <SheetHeader>
                <SheetTitle>Filters</SheetTitle>
              </SheetHeader>
              <div className="mt-6">
                <FiltersPanel />
              </div>
            </SheetContent>
          </Sheet>
        }
      />

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

        <div className="flex gap-6">
          {/* Desktop filters sidebar */}
          <aside className="hidden md:block w-64 shrink-0">
            <div className="sticky top-6">
              <FiltersPanel />
            </div>
          </aside>

          {/* Main content */}
          <div className="flex-1 min-w-0">
            {/* Active filters */}
            {hasActiveFilters && (
              <div className="mb-4 flex flex-wrap items-center gap-2">
                <span className="text-sm text-muted-foreground">Filters:</span>
                {activeFilterChips.map((chip) => (
                  <Badge key={chip.key} variant="secondary" className="gap-1">
                    {chip.label}
                    <Link
                      href={chip.clearUrl}
                      aria-label={`Clear ${chip.label} filter`}
                      className="ml-1 hover:bg-secondary-foreground/10 rounded-full p-0.5"
                    >
                      <X className="h-3 w-3" />
                    </Link>
                  </Badge>
                ))}
                <Link href={clearAllFiltersUrl}>
                  <Button variant="ghost" size="sm">
                    Clear all
                  </Button>
                </Link>
              </div>
            )}

            {/* BILL-003: Upgrade prompt when brief limit reached */}
            {limits && limits.max_briefs_per_month !== null && limits.max_briefs_per_month > 0 && counts.total >= limits.max_briefs_per_month && (
              <div className="mb-4">
                <UpgradePrompt
                  limitType="briefs"
                  currentUsage={counts.total}
                  maxUsage={limits.max_briefs_per_month}
                  proLimit="Unlimited"
                  ctaLabel="Create Unlimited Content Briefs"
                  customMessage="You've reached your content brief limit for this month."
                  dismissible={false}
                />
              </div>
            )}

            {/* Empty state when no briefs */}
            {counts.total === 0 && (
              <div className="space-y-6">
                {/* Keyword-first CTA */}
                <Card className="border-dashed">
                  <CardContent className="pt-8 pb-8">
                    <div className="mx-auto max-w-md text-center">
                      <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
                        <FileText className="h-6 w-6 text-primary" />
                      </div>
                      <h2 className="text-lg font-semibold">Start a new content brief</h2>
                      <p className="mt-1 text-sm text-muted-foreground">
                        Enter a keyword to find content opportunities and generate a brief
                      </p>
                      <KeywordSearchForm siteId={site.id} />
                    </div>
                  </CardContent>
                </Card>

                {/* Secondary: existing sources */}
                <Card>
                  <CardHeader>
                    <div className="flex items-center gap-2">
                      <Lightbulb className="h-5 w-5 text-primary" />
                      <CardTitle className="text-base">Or create from your analysis</CardTitle>
                    </div>
                    <CardDescription>
                      Generate briefs directly from your content intelligence results:
                    </CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="grid gap-3 sm:grid-cols-3">
                      <Button variant="outline" className="h-auto py-3 justify-start" asChild>
                        <Link href={route('topic-clusters.index', site.id)}>
                          <div className="text-left">
                            <p className="font-medium text-sm">Topic Clusters</p>
                            <p className="text-xs text-muted-foreground mt-0.5">
                              Fill content gaps in your topic coverage
                            </p>
                          </div>
                        </Link>
                      </Button>
                      <Button variant="outline" className="h-auto py-3 justify-start" asChild>
                        <Link href={route('opportunity-map.index', site.id)}>
                          <div className="text-left">
                            <p className="font-medium text-sm">Opportunity Map</p>
                            <p className="text-xs text-muted-foreground mt-0.5">
                              Find keyword opportunities to target
                            </p>
                          </div>
                        </Link>
                      </Button>
                      <Button variant="outline" className="h-auto py-3 justify-start" asChild>
                        <Link href={route('freshness.index', site.id)}>
                          <div className="text-left">
                            <p className="font-medium text-sm">Freshness Analysis</p>
                            <p className="text-xs text-muted-foreground mt-0.5">
                              Refresh content that&apos;s losing traffic
                            </p>
                          </div>
                        </Link>
                      </Button>
                    </div>
                  </CardContent>
                </Card>
              </div>
            )}

            {/* Empty state when filtered with no results */}
            {counts.total > 0 && briefs.length === 0 && (
              <EmptyState
                title="No briefs match your filters"
                description="Try adjusting your filters to see more results."
                action={
                  <Link href={clearAllFiltersUrl}>
                    <Button>Clear Filters</Button>
                  </Link>
                }
              />
            )}

            {/* Brief cards */}
            {briefs.length > 0 && isNavigating ? (
              <div
                className="space-y-4"
                aria-label="Loading content briefs"
                aria-busy="true"
                aria-live="polite"
              >
                {[1, 2, 3, 4, 5, 6].map((i) => (
                  <Card key={i}>
                    <CardHeader>
                      <div className="flex items-start justify-between gap-4">
                        <div className="flex-1 min-w-0 space-y-2">
                          <Skeleton className="h-5 w-2/3" />
                          <div className="flex items-center gap-2">
                            <Skeleton className="h-5 w-20 rounded-full" />
                            <Skeleton className="h-3 w-28" />
                            <Skeleton className="h-3 w-24" />
                          </div>
                          <div className="flex items-center gap-1.5 mt-1">
                            <Skeleton className="h-3.5 w-3.5 rounded-full" />
                            <Skeleton className="h-3 w-40" />
                          </div>
                        </div>
                        <Skeleton className="h-5 w-16 rounded-full" />
                      </div>
                    </CardHeader>
                  </Card>
                ))}
              </div>
            ) : briefs.length > 0 ? (
              <div className="space-y-4">
                {briefs.map((brief) => (
                  <Link
                    key={brief.id}
                    href={route('content-briefs.show', { site: site.id, contentBrief: brief.id })}
                  >
                    <Card className="hover:shadow-md transition-shadow cursor-pointer">
                      <CardHeader>
                        <div className="flex items-start justify-between gap-4">
                          <div className="flex-1 min-w-0">
                            <CardTitle className="text-lg truncate">
                              {brief.target_keyword}
                            </CardTitle>
                            <div className="mt-1 text-sm text-muted-foreground">
                              <div className="flex flex-wrap items-center gap-2 text-xs">
                                <Badge variant="outline" className="font-normal">
                                  {SOURCE_TYPE_LABELS[brief.source_type] ?? brief.source_type}
                                </Badge>
                                <span className="text-muted-foreground">•</span>
                                <span className="text-muted-foreground">
                                  Created {formatDateOnly(brief.created_at)}
                                </span>
                                {brief.generated_at && (
                                  <>
                                    <span className="text-muted-foreground">•</span>
                                    <span className="text-muted-foreground">
                                      Generated {formatDateOnly(brief.generated_at)}
                                    </span>
                                  </>
                                )}
                              </div>
                              {brief.suggested_publish_date && (
                                <div className="mt-1.5 flex items-center gap-1.5">
                                  <CalendarClock className="h-3.5 w-3.5 text-primary" />
                                  <span className="text-xs font-medium text-primary">
                                    Best time to publish:{' '}
                                    {formatPublishWeek(brief.suggested_publish_date)}
                                  </span>
                                </div>
                              )}
                            </div>
                          </div>
                          <Badge variant={STATUS_VARIANTS[brief.status] ?? 'default'}>
                            {STATUS_LABELS[brief.status] ?? brief.status}
                          </Badge>
                        </div>
                      </CardHeader>
                    </Card>
                  </Link>
                ))}
              </div>
            ) : null}

            {/* Pagination — hidden while navigating to prevent cascading loads */}
            {!isNavigating && (
              <InertiaPagination
                links={pagination.links}
                currentPage={pagination.current_page}
                lastPage={pagination.last_page}
                perPage={pagination.per_page}
                total={pagination.total}
              />
            )}

            {/* Results count */}
            {briefs.length > 0 && (
              <p className="text-sm text-muted-foreground text-center mt-4">
                Showing {(pagination.current_page - 1) * pagination.per_page + 1} to{' '}
                {Math.min(pagination.current_page * pagination.per_page, pagination.total)} of{' '}
                {pagination.total} briefs
              </p>
            )}
          </div>
        </div>
      </div>
    </>
  );
}

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