import { useState } from "react";
import { useQuery } from "@tanstack/react-query";
import { MainLayout } from "@/components/layouts/main-layout";
import { DnsUpdateChart } from "@/components/charts/dns-update-chart";
import { ProviderDistributionChart } from "@/components/charts/provider-distribution-chart";
import { RecordTypeChart } from "@/components/charts/record-type-chart";
import { Domain, DnsRecord } from "@shared/schema";
import { useOrganization } from "@/context/organization-context";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { BarChart, LineChart, PieChart, Home, BarChart2, Activity, Clock } from "lucide-react";

export default function MetricsPage() {
  const { currentOrganization } = useOrganization();
  const [selectedTimeframe, setSelectedTimeframe] = useState("day");
  const [selectedDomain, setSelectedDomain] = useState<string>("all");
  
  // Fetch domains for filter
  const { data: domains = [] } = useQuery<Domain[]>({
    queryKey: ["/api/domains", currentOrganization?.id],
    enabled: !!currentOrganization?.id,
  });

  // Fetch DNS records stats (would be from actual API)
  const { data: recordsStats } = useQuery({
    queryKey: ["/api/metrics/records", selectedTimeframe, selectedDomain],
    enabled: false, // Would be enabled in a real implementation
  });
  
  return (
    <MainLayout
      title="Metrics & Statistics"
      description="View performance metrics for your DNS configuration."
    >
      {/* Filter controls */}
      <div className="flex flex-col sm:flex-row justify-between mb-6 gap-4">
        <div className="flex items-center space-x-4">
          <Select
            value={selectedDomain}
            onValueChange={setSelectedDomain}
          >
            <SelectTrigger className="w-[200px]">
              <SelectValue placeholder="Select domain" />
            </SelectTrigger>
            <SelectContent>
              <SelectItem value="all">All Domains</SelectItem>
              {domains.map(domain => (
                <SelectItem key={domain.id} value={domain.id.toString()}>
                  {domain.name}
                </SelectItem>
              ))}
            </SelectContent>
          </Select>
        </div>
      </div>

      {/* Update Activity Chart */}
      <Card className="mb-8">
        <CardHeader>
          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center">
            <div>
              <CardTitle>DNS Update Activity</CardTitle>
              <CardDescription>
                Frequency of DNS record updates over time
              </CardDescription>
            </div>
            <Tabs defaultValue="day" className="mt-2 sm:mt-0">
              <TabsList>
                <TabsTrigger 
                  value="day" 
                  onClick={() => setSelectedTimeframe("day")}
                >
                  Day
                </TabsTrigger>
                <TabsTrigger 
                  value="week" 
                  onClick={() => setSelectedTimeframe("week")}
                >
                  Week
                </TabsTrigger>
                <TabsTrigger 
                  value="month" 
                  onClick={() => setSelectedTimeframe("month")}
                >
                  Month
                </TabsTrigger>
              </TabsList>
            </Tabs>
          </div>
        </CardHeader>
        <CardContent>
          <div className="h-80">
            <DnsUpdateChart timeframe={selectedTimeframe} domainId={selectedDomain !== "all" ? parseInt(selectedDomain) : undefined} />
          </div>
        </CardContent>
      </Card>

      {/* Distribution Charts */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <Card>
          <CardHeader>
            <CardTitle>DNS Provider Distribution</CardTitle>
            <CardDescription>
              Breakdown of domains by DNS provider
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-72">
              <ProviderDistributionChart />
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Record Type Distribution</CardTitle>
            <CardDescription>
              Breakdown of DNS records by type
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="h-72">
              <RecordTypeChart />
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Performance Metrics */}
      <Card className="mb-8">
        <CardHeader>
          <CardTitle>DNS Performance Metrics</CardTitle>
          <CardDescription>
            Key metrics for your DNS configuration
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <div className="bg-muted/30 rounded-lg p-4">
              <div className="flex items-center mb-2">
                <Activity className="mr-2 h-5 w-5 text-primary" />
                <h3 className="text-sm font-medium">Avg. Response Time</h3>
              </div>
              <p className="text-2xl font-bold">38 ms</p>
              <p className="text-xs text-muted-foreground mt-1">5% faster than last week</p>
            </div>
            
            <div className="bg-muted/30 rounded-lg p-4">
              <div className="flex items-center mb-2">
                <Clock className="mr-2 h-5 w-5 text-primary" />
                <h3 className="text-sm font-medium">Uptime</h3>
              </div>
              <p className="text-2xl font-bold">99.98%</p>
              <p className="text-xs text-muted-foreground mt-1">Last 30 days</p>
            </div>
            
            <div className="bg-muted/30 rounded-lg p-4">
              <div className="flex items-center mb-2">
                <BarChart className="mr-2 h-5 w-5 text-primary" />
                <h3 className="text-sm font-medium">Update Frequency</h3>
              </div>
              <p className="text-2xl font-bold">4.2/day</p>
              <p className="text-xs text-muted-foreground mt-1">Avg. updates per day</p>
            </div>
            
            <div className="bg-muted/30 rounded-lg p-4">
              <div className="flex items-center mb-2">
                <BarChart2 className="mr-2 h-5 w-5 text-primary" />
                <h3 className="text-sm font-medium">Propagation Time</h3>
              </div>
              <p className="text-2xl font-bold">43 sec</p>
              <p className="text-xs text-muted-foreground mt-1">Avg. global propagation</p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* DNS Records Health */}
      <Card>
        <CardHeader>
          <CardTitle>DNS Records Health</CardTitle>
          <CardDescription>
            Health status of your DNS records
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            <div className="flex items-center justify-between pb-4 border-b">
              <div className="flex items-center">
                <Home className="mr-3 h-5 w-5 text-primary" />
                <div>
                  <p className="font-medium">example.com</p>
                  <p className="text-sm text-muted-foreground">A, CNAME, MX records</p>
                </div>
              </div>
              <div className="flex items-center">
                <span className="inline-block w-2 h-2 bg-success rounded-full mr-2"></span>
                <span className="text-sm font-medium">Healthy</span>
              </div>
            </div>
            
            <div className="flex items-center justify-between pb-4 border-b">
              <div className="flex items-center">
                <Home className="mr-3 h-5 w-5 text-primary" />
                <div>
                  <p className="font-medium">api.example.org</p>
                  <p className="text-sm text-muted-foreground">A, CNAME records</p>
                </div>
              </div>
              <div className="flex items-center">
                <span className="inline-block w-2 h-2 bg-warning rounded-full mr-2"></span>
                <span className="text-sm font-medium">Outdated</span>
              </div>
            </div>
            
            <div className="flex items-center justify-between pb-4 border-b">
              <div className="flex items-center">
                <Home className="mr-3 h-5 w-5 text-primary" />
                <div>
                  <p className="font-medium">cdn.testsite.com</p>
                  <p className="text-sm text-muted-foreground">A, AAAA records</p>
                </div>
              </div>
              <div className="flex items-center">
                <span className="inline-block w-2 h-2 bg-destructive rounded-full mr-2"></span>
                <span className="text-sm font-medium">Error</span>
              </div>
            </div>
            
            <div className="flex items-center justify-between">
              <div className="flex items-center">
                <Home className="mr-3 h-5 w-5 text-primary" />
                <div>
                  <p className="font-medium">prod-db.example.net</p>
                  <p className="text-sm text-muted-foreground">A record</p>
                </div>
              </div>
              <div className="flex items-center">
                <span className="inline-block w-2 h-2 bg-success rounded-full mr-2"></span>
                <span className="text-sm font-medium">Healthy</span>
              </div>
            </div>
          </div>
        </CardContent>
      </Card>
    </MainLayout>
  );
}