"use client";

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { LineChart, Sprout, Droplets, Sun } from "lucide-react";
import type { Crop, CropAnalytics } from "@/types";

interface AnalyticsDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  crop: Crop;
  analytics: CropAnalytics;
}

export function AnalyticsDialog({ open, onOpenChange, crop, analytics }: AnalyticsDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[800px] dark:bg-background">
        <DialogHeader>
          <DialogTitle>Crop Analytics - {crop.name}</DialogTitle>
        </DialogHeader>

        <Tabs defaultValue="overview">
          <TabsList className="grid w-full grid-cols-3">
            <TabsTrigger value="overview">Overview</TabsTrigger>
            <TabsTrigger value="growth">Growth</TabsTrigger>
            <TabsTrigger value="environment">Environment</TabsTrigger>
          </TabsList>

          <TabsContent value="overview" className="space-y-4">
            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
              <Card className="dark:bg-slate-800">
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Growth Rate</CardTitle>
                  <Sprout className="h-4 w-4 text-muted-foreground dark:text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">+2.5%</div>
                  <p className="text-xs text-muted-foreground">+20.1% from last week</p>
                </CardContent>
              </Card>
              <Card className="dark:bg-slate-800">
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Water Usage</CardTitle>
                  <Droplets className="h-4 w-4 text-muted-foreground dark:text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">15.2L</div>
                  <p className="text-xs text-muted-foreground">per day average</p>
                </CardContent>
              </Card>
              <Card className="dark:bg-slate-800">
                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                  <CardTitle className="text-sm font-medium">Sunlight</CardTitle>
                  <Sun className="h-4 w-4 text-muted-foreground dark:text-muted-foreground" />
                </CardHeader>
                <CardContent>
                  <div className="text-2xl font-bold">{analytics.sunlight}%</div>
                  <p className="text-xs text-muted-foreground">optimal conditions</p>
                </CardContent>
              </Card>
            </div>

            <Card className="dark:bg-slate-800">
              <CardHeader>
                <CardTitle>Growth Timeline</CardTitle>
                <CardDescription>Daily growth rate over time</CardDescription>
              </CardHeader>
              <CardContent className="h-[200px] flex items-center justify-center text-muted-foreground">
                <LineChart className="h-8 w-8" />
                <span className="ml-2">Growth chart placeholder</span>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="growth" className="space-y-4">
            <Card className="dark:bg-slate-800">
              <CardHeader>
                <CardTitle>Detailed Growth Analysis</CardTitle>
                <CardDescription>Comprehensive growth metrics</CardDescription>
              </CardHeader>
              <CardContent className="h-[300px] flex items-center justify-center text-muted-foreground">
                Detailed growth analysis placeholder
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="environment" className="space-y-4">
            <Card className="dark:bg-slate-800">
              <CardHeader>
                <CardTitle>Environmental Conditions</CardTitle>
                <CardDescription>Temperature, humidity, and more</CardDescription>
              </CardHeader>
              <CardContent className="h-[300px] flex items-center justify-center text-muted-foreground">
                Environmental metrics placeholder
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </DialogContent>
    </Dialog>
  );
}
