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

import type { IOverviewStaffTab } from "@/types/overview";
import { OverviewDonutChart } from "../OverviewDonutChart";
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 OverviewStaffTabPanelProps {
  data: IOverviewStaffTab;
}

export function OverviewStaffTabPanel({ data }: OverviewStaffTabPanelProps) {
  const hasGrowth = data.employeeGrowthTrend.some((point) => point.count > 0);

  return (
    <Stack gap="lg">
      <OverviewKpiStrip
        items={[
          {
            label: "Active employees",
            value: data.kpis.activeEmployees,
            icon: UserCheck,
            accent: "emerald",
          },
          {
            label: "Active users",
            value: data.kpis.activeUsers,
            icon: Users,
          },
        ]}
      />

      <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}>Employee onboarding trend</Text>
              {!hasGrowth ? (
                <Text size="sm" c="dimmed" ta="center" py="xl">
                  No new employees in this period
                </Text>
              ) : (
                <ResponsiveContainer width="100%" height={210}>
                  <AreaChart data={data.employeeGrowthTrend}>
                    <defs>
                      <linearGradient id="employeeGrowthFill" x1="0" y1="0" x2="0" y2="1">
                        <stop
                          offset="5%"
                          stopColor={overviewChartColors.primaryDark}
                          stopOpacity={0.35}
                        />
                        <stop
                          offset="95%"
                          stopColor={overviewChartColors.primaryDark}
                          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 employees"]}
                    />
                    <Area
                      type="monotone"
                      dataKey="count"
                      stroke={overviewChartColors.primaryDark}
                      fill="url(#employeeGrowthFill)"
                      strokeWidth={2}
                    />
                  </AreaChart>
                </ResponsiveContainer>
              )}
            </Stack>
          </Paper>
        </Grid.Col>
        <Grid.Col span={{ base: 12, lg: 5 }}>
          <OverviewDonutChart
            title="Active vs inactive users"
            data={data.activeUsersBreakdown.map((item) => ({
              name: item.label,
              value: item.count,
            }))}
          />
        </Grid.Col>
      </Grid>

      <OverviewDonutChart
        title="Users by account status"
        data={data.usersByStatus.map((item) => ({
          name: item.status.replace(/_/g, " "),
          value: item.count,
        }))}
      />
    </Stack>
  );
}
