import React, { useEffect, useState } from 'react';
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  ChartConfig,
  ChartContainer,
  ChartTooltip,
} from '@/components/ui/chart';
import apis from '@/utils/apis';
import enums from '@/utils/enums';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import {  useSearchParams } from 'next/navigation';


const chartConfig = {
  value: {
    label: "Job",
    color: "hsl(var(--chart-1))",
  },
} satisfies ChartConfig;

export function AreaGraph({ handleValueChange }: any) {

  const searchParams = useSearchParams()
  const queryParams = Object.fromEntries(searchParams.entries());
  const [scrapData, setScrapData] = useState({
    total_count: 0,
    data: []
  })





  // getJobGraphData.............
  const getJobGraphData = async () => {
    try {
      const apiRes = await apis.DashBoard.userGraph(queryParams?.type || enums?.jobGraph?.DAILY);
      const formattedData = apiRes?.data?.data?.map((item: any) => ({
        type: item.date || item.day || item.hour || item.month,
        value: item.total_req,
      }));
      setScrapData({
        total_count: apiRes?.data?.total_count,
        data: formattedData,
      });
    } catch (error) {
      console.error("Error fetching graph data:", error);
    }
  };


  useEffect(() => {
    getJobGraphData()
  }, [queryParams?.type])





  return (
    <Card className="w-full max-h-[300px]">
      <CardHeader className="flex md:flex-row md:justify-between items-start gap-2 space-y-0 py-5 ">
        <div className="grid flex-1 gap-1 text-center sm:text-left">
          <CardTitle>No. of jobs scraped</CardTitle>
        </div>
        <div className='flex items-center gap-2 border-common border max-w-fit   rounded-full px-3 text-primary'>
         
          <Select defaultValue={enums?.jobGraph?.DAILY} onValueChange={(value) => handleValueChange(value, "type")}>
            {/* [&_svg]:hidden */}
            <SelectTrigger className="w-[123px] text-sm inline-flex justify-between border-0 shadow-none"  >
              <SelectValue placeholder="Select" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectItem value={enums?.jobGraph?.DAILY}>Daily</SelectItem>
                <SelectItem value={enums?.jobGraph?.WEEKLY}>Weekly</SelectItem>
                <SelectItem value={enums?.jobGraph?.MONTHLY}>Monthly</SelectItem>
                <SelectItem value={enums?.jobGraph?.YEARLY}>Yearly</SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>

        </div>
      </CardHeader>
      <CardContent className="p-0 pb-4">
        <ChartContainer className="h-[210px] w-full" config={chartConfig}>

          <AreaChart
            data={scrapData?.data}
            margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
            width={800}
            height={200}
          >
            <CartesianGrid vertical={false} strokeDasharray="3 3" opacity={0.2} />
            <XAxis
              dataKey="type"
              tickLine={false}
              axisLine={false}
              tickMargin={8}
              fontSize={12}
              tick={{ fill: '#888888' }}
              // interval={0}
            />
            <YAxis
              axisLine={false}
              tickLine={false}
              tickMargin={8}
              fontSize={12}
              tickCount={5}
              // domain={[0, 'dataMax']}
            />
            <ChartTooltip   cursor={false} />
            <Area
              dataKey="value"
              type="monotone" // Changed from "natural"
              fill="var(--color-value)"
              fillOpacity={0.2}
              stroke="var(--color-value)"
              strokeWidth={2}
            />
          </AreaChart>

        </ChartContainer>
      </CardContent>
    </Card>
  );
}