"use client"

import React from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Bar, BarChart, XAxis, YAxis } from 'recharts';
import { ChartConfig, ChartContainer, ChartTooltip } from '@/components/ui/chart';

const formatLabel = (value: string) => {
  const labels: Record<string, string> = {
    incorrect: "Incorrect",
    no_answer: "No answer",
    lvm: "LVM",
    emailed: "Emailed",
    called_and_emailed: "Called and emailed",
    converted_lead: "Converted lead to CRM"
  };
  return labels[value] || value;
};

const CustomTooltip = ({ active, payload }: any) => {
  if (active && payload && payload.length) {
    return (
      <div className="rounded-lg  bg-white p-2 shadow-md border border-gray-200">
        <p className="text-xs text-gray-700">
          {formatLabel(payload[0].payload.status)}: {payload[0].value}
        </p>
      </div>
    );
  }
  return null;
};

const chartConfig = {
  desktop: {
    label: "Desktop",
    color: "hsl(var(--chart-1))",
  },
  mobile: {
    label: "Mobile",
    color: "hsl(var(--chart-2))",
  },
} satisfies ChartConfig;

const BarGraph = ({ data }: any) => {
  const barGraphData = [
    {
      status: "incorrect",
      value: data?.incorrectDetails,
      fill: "#808080"
    },
    {
      status: "no_answer",
      value: data?.noAnwere,
      fill: "#FF4444"
    },
    {
      status: "lvm",
      value: data?.lvm,
      fill: "#8844FF"
    },
    {
      status: "called_and_emailed",
      value: data?.calledAndemailed,
      fill: "#44DDAA"
    },
    {
      status: "converted_lead",
      value: data?.crm,
      fill: "#4488FF"
    }
  ];

  return (
    <Card className="w-full h-full">
      <CardHeader>
        <CardTitle>Lead conversion rate</CardTitle>
      </CardHeader>
      <CardContent className="p-0 px-6">
        <div>
          <ChartContainer className="h-[300px] w-[500px]" config={chartConfig}>
            <BarChart
              width={500}
              height={300}
              data={barGraphData}
              margin={{
                top: 5,
                right: 0,
                left: 0,
                bottom: 0
              }}
            >
              <XAxis
                dataKey="status"
                tickFormatter={formatLabel}
                axisLine={false}
                tickLine={false}
                interval={0}
                tick={{ fontSize: 12, color: "#BBBBBB", width: "100%" }}
                height={60}
              />
              <YAxis
                axisLine={false}
                tickLine={false}
                domain={[0, 100]}
                ticks={[0, 20, 40, 60, 80, 100]}
                width={30}
                tick={{ fontSize: 12 }}
                color="text-gray"
                fontWeight={400}
              />
              <ChartTooltip content={<CustomTooltip />} cursor={false} />
              <Bar
                dataKey="value"
                radius={[4, 4, 0, 0]}
                maxBarSize={50}
              />
            </BarChart>
          </ChartContainer>
        </div>
      </CardContent>
    </Card>
  );
};

export default BarGraph;