import { useState } from 'react';
import { useQuery } from '@tanstack/react-query';
import { supabase } from '@/lib/supabaseClient';
import { AdminLayout } from '@/components/layout/AdminLayout';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Badge } from '@/components/ui/badge';
import { AlertCircle } from 'lucide-react';
import { RefreshButton } from '@/components/ui/refresh-button';
import { ErrorDetailsModal } from '@/components/admin/ErrorDetailsModal';
import { ErrorAnalytics } from '@/components/admin/ErrorAnalytics';
import { format } from 'date-fns';

// Helper to calculate date threshold for filtering
const getDateThreshold = (range: '1h' | '24h' | '7d' | '30d'): string => {
  const now = new Date();
  const msMap = {
    '1h': 60 * 60 * 1000,           // 1 hour in milliseconds
    '24h': 24 * 60 * 60 * 1000,     // 1 day
    '7d': 7 * 24 * 60 * 60 * 1000,  // 7 days
    '30d': 30 * 24 * 60 * 60 * 1000, // 30 days
  };
  
  const threshold = new Date(now.getTime() - msMap[range]);
  return threshold.toISOString();
};

export default function ErrorMonitoring() {
  const [selectedError, setSelectedError] = useState<any>(null);
  const [searchTerm, setSearchTerm] = useState('');
  const [errorTypeFilter, setErrorTypeFilter] = useState<string>('all');
  const [dateRange, setDateRange] = useState<'1h' | '24h' | '7d' | '30d'>('24h');

  // Fetch recent errors
  const { data: errors, isLoading, refetch, isFetching } = useQuery({
    queryKey: ['admin-errors', dateRange, errorTypeFilter, searchTerm],
    queryFn: async () => {
      let query = supabase
        .from('request_metadata')
        .select(`
          *,
          request_breadcrumbs(
            timestamp,
            category,
            message,
            level,
            sequence_order
          )
        `)
        .not('error_type', 'is', null)
        .gte('created_at', getDateThreshold(dateRange))
        .order('created_at', { ascending: false })
        .limit(100);

      if (errorTypeFilter !== 'all') {
        query = query.eq('error_type', errorTypeFilter);
      }

      if (searchTerm) {
        query = query.or(`request_id.ilike.%${searchTerm}%,error_message.ilike.%${searchTerm}%,endpoint.ilike.%${searchTerm}%`);
      }

      const { data, error } = await query;
      if (error) throw error;
      return data;
    },
    refetchInterval: 30000, // Auto-refresh every 30 seconds
  });

  // Fetch error summary
  const { data: errorSummary } = useQuery({
    queryKey: ['error-summary'],
    queryFn: async () => {
      const { data, error } = await supabase
        .from('error_summary')
        .select('*');
      if (error) throw error;
      return data;
    },
  });

  return (
    <AdminLayout>
      <div className="space-y-6">
        <div className="flex justify-between items-center">
          <div>
            <h1 className="text-3xl font-bold tracking-tight">Error Monitoring</h1>
            <p className="text-muted-foreground">Track and analyze application errors</p>
          </div>
          <RefreshButton
            onRefresh={async () => { await refetch(); }}
            isLoading={isFetching}
            variant="outline"
            size="sm"
          />
        </div>

        {/* Analytics Section */}
        <ErrorAnalytics errorSummary={errorSummary} />

        {/* Filters */}
        <Card>
          <CardHeader>
            <CardTitle>Error Log</CardTitle>
            <CardDescription>Recent errors across the application</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex gap-4 mb-6">
              <div className="flex-1">
                <Input
                  placeholder="Search by request ID, endpoint, or error message..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="w-full"
                />
              </div>
              <Select value={dateRange} onValueChange={(v: any) => setDateRange(v)}>
                <SelectTrigger className="w-[180px]">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="1h">Last Hour</SelectItem>
                  <SelectItem value="24h">Last 24 Hours</SelectItem>
                  <SelectItem value="7d">Last 7 Days</SelectItem>
                  <SelectItem value="30d">Last 30 Days</SelectItem>
                </SelectContent>
              </Select>
              <Select value={errorTypeFilter} onValueChange={setErrorTypeFilter}>
                <SelectTrigger className="w-[200px]">
                  <SelectValue placeholder="Error type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="all">All Types</SelectItem>
                  <SelectItem value="FunctionsFetchError">Functions Fetch</SelectItem>
                  <SelectItem value="FunctionsHttpError">Functions HTTP</SelectItem>
                  <SelectItem value="Error">Generic Error</SelectItem>
                </SelectContent>
              </Select>
            </div>

            {/* Error List */}
            {isLoading ? (
              <div className="text-center py-8 text-muted-foreground">Loading errors...</div>
            ) : errors && errors.length > 0 ? (
              <div className="space-y-2">
                {errors.map((error) => (
                  <div
                    key={error.id}
                    onClick={() => setSelectedError(error)}
                    className="p-4 border rounded-lg hover:bg-accent cursor-pointer transition-colors"
                  >
                    <div className="flex items-start justify-between">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-1">
                          <AlertCircle className="w-4 h-4 text-destructive" />
                          <span className="font-medium">{error.error_type}</span>
                          <Badge variant="outline" className="text-xs">
                            {error.endpoint}
                          </Badge>
                        </div>
                        <p className="text-sm text-muted-foreground mb-2">
                          {error.error_message}
                        </p>
                        <div className="flex items-center gap-4 text-xs text-muted-foreground">
                          <span>ID: {error.request_id.slice(0, 8)}</span>
                          <span>{format(new Date(error.created_at), 'PPp')}</span>
                          {error.duration_ms != null && <span>{error.duration_ms}ms</span>}
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="text-center py-8 text-muted-foreground">
                No errors found for the selected filters
              </div>
            )}
          </CardContent>
        </Card>
      </div>

      {/* Error Details Modal */}
      {selectedError && (
        <ErrorDetailsModal
          error={selectedError}
          onClose={() => setSelectedError(null)}
        />
      )}
    </AdminLayout>
  );
}
