import { Users } from "lucide-react";
import {
  Area,
  AreaChart,
  CartesianGrid,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";
import { Grid, Paper, Stack, Text } from "@mantine/core";

import type { IOverviewCustomersTab } from "@/types/overview";
import { OverviewDonutChart } from "../OverviewDonutChart";
import { OverviewHorizontalBarChart } from "../OverviewHorizontalBarChart";
import { OverviewKpiStrip } from "../OverviewKpiStrip";
import { overviewChartColors } from "../overview.styles";

function formatDateLabel(date: string) {
  const parsed = new Date(`${date}T00:00:00`);
  return parsed.toLocaleDateString(undefined, { month: "short", day: "numeric" });
}

interface OverviewCustomersTabPanelProps {
  data: IOverviewCustomersTab;
}

export function OverviewCustomersTabPanel({ data }: OverviewCustomersTabPanelProps) {
  const hasGrowth = data.customerGrowthTrend.some((point) => point.count > 0);

  return (
    <Stack gap="lg">
      <OverviewKpiStrip
        items={[
          {
            label: "Total customers",
            value: data.kpis.totalCustomers,
            icon: Users,
          },
          {
            label: "New this month",
            value: data.kpis.newCustomersThisMonth,
            icon: Users,
            accent: "emerald",
          },
        ]}
      />

      <Grid gap="md">
        <Grid.Col span={{ base: 12, lg: 7 }}>
          <Paper p="md" radius="lg" withBorder h="100%" style={{ minHeight: 260 }}>
            <Stack gap="sm">
              <Text fw={600}>Customer growth</Text>
              {!hasGrowth ? (
                <Text size="sm" c="dimmed" ta="center" py="xl">
                  No new customers in this period
                </Text>
              ) : (
                <ResponsiveContainer width="100%" height={210}>
                  <AreaChart data={data.customerGrowthTrend}>
                    <defs>
                      <linearGradient id="customerGrowthFill" x1="0" y1="0" x2="0" y2="1">
                        <stop
                          offset="5%"
                          stopColor={overviewChartColors.primary}
                          stopOpacity={0.35}
                        />
                        <stop
                          offset="95%"
                          stopColor={overviewChartColors.primary}
                          stopOpacity={0}
                        />
                      </linearGradient>
                    </defs>
                    <CartesianGrid strokeDasharray="3 3" stroke="#e5e7eb" />
                    <XAxis
                      dataKey="date"
                      tickFormatter={formatDateLabel}
                      tick={{ fontSize: 12 }}
                    />
                    <YAxis allowDecimals={false} tick={{ fontSize: 12 }} />
                    <Tooltip
                      labelFormatter={(value) => formatDateLabel(String(value))}
                      formatter={(value) => [value, "New customers"]}
                    />
                    <Area
                      type="monotone"
                      dataKey="count"
                      stroke={overviewChartColors.primary}
                      fill="url(#customerGrowthFill)"
                      strokeWidth={2}
                    />
                  </AreaChart>
                </ResponsiveContainer>
              )}
            </Stack>
          </Paper>
        </Grid.Col>
        <Grid.Col span={{ base: 12, lg: 5 }}>
          <OverviewDonutChart
            title="Customers by type"
            data={data.customersByType.map((item) => ({
              name: item.label,
              value: item.count,
            }))}
          />
        </Grid.Col>
      </Grid>

      <OverviewHorizontalBarChart
        title="Top customers by bookings"
        data={data.topCustomersByBookings.map((item) => ({
          label: item.label,
          value: item.count,
        }))}
        valueLabel="Bookings"
      />
    </Stack>
  );
}
