/**
 * Ajax Search Analytics Tab
 * View search analytics and insights
 */

import { useState } from 'react';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Skeleton } from '@/components/ui/skeleton';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  BarChart3,
  TrendingUp,
  TrendingDown,
  Search,
  MousePointerClick,
  AlertCircle,
  RefreshCcw,
  Download,
  Trash2,
} from 'lucide-react';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from '@/components/ui/alert-dialog';
import { AjaxSearchSettings, SearchAnalytics } from '../config';

interface AnalyticsTabProps {
  analytics: SearchAnalytics | null;
  settings: AjaxSearchSettings;
  setSettings: React.Dispatch<React.SetStateAction<AjaxSearchSettings>>;
  isLoading: boolean;
  isPro: boolean;
  onRefresh: (period: string) => void;
  onClear: () => void;
  onExport: (format: string) => void;
}

export function AjaxSearchAnalyticsTab({
  analytics,
  settings,
  setSettings,
  isLoading,
  onRefresh,
  onClear,
  onExport,
}: AnalyticsTabProps) {
  const [period, setPeriod] = useState('30days');

  // Loading state
  if (isLoading) {
    return (
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <Skeleton className="h-10 w-48" />
          <Skeleton className="h-10 w-32" />
        </div>
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <Skeleton className="h-24" />
          <Skeleton className="h-24" />
          <Skeleton className="h-24" />
          <Skeleton className="h-24" />
        </div>
        <Skeleton className="h-64" />
        <Skeleton className="h-64" />
      </div>
    );
  }

  // No data state
  if (!analytics) {
    return (
      <div className="space-y-6">
        <Card>
          <CardContent className="flex flex-col items-center justify-center py-12">
            <BarChart3 className="h-12 w-12 text-muted-foreground" />
            <h3 className="mt-4 text-lg font-semibold">No Analytics Data</h3>
            <p className="mt-2 text-center text-muted-foreground">
              Analytics data will appear here once customers start using your search.
            </p>
            <Button onClick={() => onRefresh(period)} variant="outline" className="mt-4">
              <RefreshCcw className="mr-2 h-4 w-4" />
              Refresh Data
            </Button>
          </CardContent>
        </Card>
      </div>
    );
  }

  const data = analytics!;

  return (
    <div>
      <div className="space-y-6">
        {/* Header Actions */}
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div className="flex items-center gap-2">
            <Label>Time Period:</Label>
            <Select value={period} onValueChange={(value) => {
              setPeriod(value);
              onRefresh(value);
            }}>
              <SelectTrigger className="w-40">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="7days">Last 7 days</SelectItem>
                <SelectItem value="30days">Last 30 days</SelectItem>
                <SelectItem value="90days">Last 90 days</SelectItem>
                <SelectItem value="all">All time</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" onClick={() => onRefresh(period)}>
              <RefreshCcw className="mr-2 h-4 w-4" />
              Refresh
            </Button>
            <Button variant="outline" size="sm" onClick={() => onExport('csv')}>
              <Download className="mr-2 h-4 w-4" />
              Export
            </Button>
            <AlertDialog>
              <AlertDialogTrigger asChild>
                <Button variant="outline" size="sm" className="text-destructive">
                  <Trash2 className="mr-2 h-4 w-4" />
                  Clear
                </Button>
              </AlertDialogTrigger>
              <AlertDialogContent>
                <AlertDialogHeader>
                  <AlertDialogTitle>Clear Analytics Data?</AlertDialogTitle>
                  <AlertDialogDescription>
                    This will permanently delete all search analytics data. This action cannot be
                    undone.
                  </AlertDialogDescription>
                </AlertDialogHeader>
                <AlertDialogFooter>
                  <AlertDialogCancel>Cancel</AlertDialogCancel>
                  <AlertDialogAction onClick={onClear} className="bg-destructive text-destructive-foreground">
                    Clear Data
                  </AlertDialogAction>
                </AlertDialogFooter>
              </AlertDialogContent>
            </AlertDialog>
          </div>
        </div>

        <Card>
          <CardHeader>
            <CardTitle className="text-base">Analytics Collection</CardTitle>
            <CardDescription>Choose which storefront search events are recorded locally.</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center justify-between gap-4">
              <Label htmlFor="ajax-search-enable-analytics">Collect search analytics</Label>
              <Switch
                id="ajax-search-enable-analytics"
                checked={settings.enableAnalytics}
                onCheckedChange={(checked) => setSettings((previous) => ({ ...previous, enableAnalytics: checked }))}
              />
            </div>
            {settings.enableAnalytics && (
              <>
                <div className="flex items-center justify-between gap-4 border-t pt-4">
                  <Label htmlFor="ajax-search-track-searches">Track searches</Label>
                  <Switch
                    id="ajax-search-track-searches"
                    checked={settings.trackSearches}
                    onCheckedChange={(checked) => setSettings((previous) => ({ ...previous, trackSearches: checked }))}
                  />
                </div>
                <div className="flex items-center justify-between gap-4 border-t pt-4">
                  <Label htmlFor="ajax-search-track-clicks">Track result clicks</Label>
                  <Switch
                    id="ajax-search-track-clicks"
                    checked={settings.trackClicks}
                    onCheckedChange={(checked) => setSettings((previous) => ({ ...previous, trackClicks: checked }))}
                  />
                </div>
              </>
            )}
          </CardContent>
        </Card>

        {/* Stats Overview */}
        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <Card>
            <CardContent className="pt-6">
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <Search className="h-4 w-4" />
                Total Searches
              </div>
              <div className="mt-1 text-2xl font-bold">{data.totalSearches.toLocaleString()}</div>
              <div className="text-xs text-muted-foreground">
                {data.uniqueSearches.toLocaleString()} unique terms
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="pt-6">
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <MousePointerClick className="h-4 w-4" />
                Click-through Rate
              </div>
              <div className="mt-1 flex items-center gap-2">
                <span className="text-2xl font-bold">{data.clickThroughRate.toFixed(1)}%</span>
                {data.clickThroughRate >= 40 ? (
                  <Badge variant="secondary" className="text-green-600">
                    <TrendingUp className="mr-1 h-3 w-3" />
                    Good
                  </Badge>
                ) : (
                  <Badge variant="secondary" className="text-amber-600">
                    <TrendingDown className="mr-1 h-3 w-3" />
                    Needs Work
                  </Badge>
                )}
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="pt-6">
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <TrendingUp className="h-4 w-4" />
                Successful Searches
              </div>
              <div className="mt-1 text-2xl font-bold">
                {data.totalSearches > 0
                  ? ((data.searchesWithResults / data.totalSearches) * 100).toFixed(1)
                  : 0}
                %
              </div>
              <div className="text-xs text-muted-foreground">
                {data.searchesWithResults.toLocaleString()} found results
              </div>
            </CardContent>
          </Card>

          <Card>
            <CardContent className="pt-6">
              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                <AlertCircle className="h-4 w-4" />
                Zero Results Rate
              </div>
              <div className="mt-1 flex items-center gap-2">
                <span className="text-2xl font-bold">
                  {data.totalSearches > 0
                    ? ((data.searchesWithoutResults / data.totalSearches) * 100).toFixed(1)
                    : 0}
                  %
                </span>
                {data.searchesWithoutResults / data.totalSearches > 0.15 && (
                  <Badge variant="destructive" className="text-xs">
                    High
                  </Badge>
                )}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Top Search Terms */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Top Search Terms</CardTitle>
            <CardDescription>Most frequently searched terms by customers.</CardDescription>
          </CardHeader>
          <CardContent>
            {data.topSearchTerms.length > 0 ? (
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Search Term</TableHead>
                    <TableHead className="text-right">Searches</TableHead>
                    <TableHead className="text-right">Clicks</TableHead>
                    <TableHead className="text-right">CTR</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {data.topSearchTerms.map((term, index) => (
                    <TableRow key={index}>
                      <TableCell className="font-medium">{term.term}</TableCell>
                      <TableCell className="text-right">{term.count.toLocaleString()}</TableCell>
                      <TableCell className="text-right">{term.clicks.toLocaleString()}</TableCell>
                      <TableCell className="text-right">
                        <Badge
                          variant={term.ctr >= 40 ? 'secondary' : 'outline'}
                          className={term.ctr >= 40 ? 'text-green-600' : ''}
                        >
                          {term.ctr.toFixed(1)}%
                        </Badge>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            ) : (
              <p className="text-center text-muted-foreground py-8">No search terms recorded yet.</p>
            )}
          </CardContent>
        </Card>

        {/* No Results Searches */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base flex items-center gap-2">
              <AlertCircle className="h-5 w-5 text-amber-500" />
              Searches With No Results
            </CardTitle>
            <CardDescription>
              These searches returned no results. Consider adding products or synonyms.
            </CardDescription>
          </CardHeader>
          <CardContent>
            {data.noResultSearches.length > 0 ? (
              <div className="space-y-2">
                {data.noResultSearches.map((term, index) => (
                  <div
                    key={index}
                    className="flex items-center justify-between rounded-lg border p-3"
                  >
                    <span className="font-medium">{term.term}</span>
                    <Badge variant="outline">{term.count} searches</Badge>
                  </div>
                ))}
              </div>
            ) : (
              <div className="flex items-center gap-2 text-green-600 py-4">
                <TrendingUp className="h-5 w-5" />
                <span>All searches are returning results!</span>
              </div>
            )}
          </CardContent>
        </Card>

        {/* Popular Products */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">Most Clicked Products</CardTitle>
            <CardDescription>
              Products that customers click on most from search results.
            </CardDescription>
          </CardHeader>
          <CardContent>
            {data.popularProducts.length > 0 ? (
              <div className="space-y-3">
                {data.popularProducts.map((product, index) => (
                  <div
                    key={product.id}
                    className="flex items-center gap-3 rounded-lg border p-3"
                  >
                    <span className="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-sm font-medium">
                      {index + 1}
                    </span>
                    {product.image && (
                      <img
                        src={product.image}
                        alt={product.name}
                        className="h-10 w-10 rounded object-cover"
                      />
                    )}
                    <div className="flex-1">
                      <span className="font-medium">{product.name}</span>
                    </div>
                    <Badge variant="secondary">{product.clickCount} clicks</Badge>
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-center text-muted-foreground py-8">No product clicks recorded yet.</p>
            )}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}