"use client";

import * as React from "react";
import { useRouter } from "next/navigation";
import { ArrowDown, ArrowUp, Eye, Users } from "lucide-react";

import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip";
import { buildSalesTargetsTeamPath } from "@/components/sales-targets/sales-targets-period";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { SalesTargetProgressBar } from "@/components/sales-targets/sales-target-progress-bar";
import { SalesTargetPanel } from "@/components/sales-targets/sales-target-surfaces";
import {
  formatDateTime,
  formatMoney,
  parseNum,
  teamInitials,
  type TeamRowState,
} from "@/components/sales-targets/sales-targets-helpers";

type Attainment = {
  attained: number;
  pct: number | null;
  target: number | null;
};

type SortKey = "progress" | "name" | "attained";

function SortDirectionIcon({
  active,
  sortAsc,
}: {
  active: boolean;
  sortAsc: boolean;
}) {
  if (!active) return null;
  return sortAsc ? (
    <ArrowUp className="ml-1 inline size-3" aria-hidden />
  ) : (
    <ArrowDown className="ml-1 inline size-3" aria-hidden />
  );
}

function formatTeamTargetDisplay(
  row: TeamRowState,
  attainment?: Attainment,
): string {
  if (attainment?.target != null) return formatMoney(attainment.target);
  const fromRow = parseNum(row.aeTarget);
  if (fromRow != null) return formatMoney(fromRow);
  return "—";
}

export type SalesTargetsTeamsOverviewProps = {
  teamRows: TeamRowState[];
  attainmentByTeam: Map<string, Attainment>;
  canAssignForTeam: (teamId: string) => boolean;
  onAssignTeam: (teamId: string) => void;
  onTeamFilterChange: (teamId: string) => void;
  periodYear?: number;
  periodMonth?: number;
};

export function SalesTargetsTeamsOverview({
  teamRows,
  attainmentByTeam,
  canAssignForTeam,
  onAssignTeam,
  periodYear,
  periodMonth,
}: SalesTargetsTeamsOverviewProps) {
  const router = useRouter();
  const [sortKey, setSortKey] = React.useState<SortKey>("progress");
  const [sortAsc, setSortAsc] = React.useState(true);

  const teamDetailPath = React.useCallback(
    (teamId: string) => {
      if (periodYear != null && periodMonth != null) {
        return buildSalesTargetsTeamPath(teamId, periodYear, periodMonth);
      }
      return `/sales-targets/teams/${teamId}`;
    },
    [periodYear, periodMonth],
  );

  const sortedRows = React.useMemo(() => {
    const rows = [...teamRows];
    rows.sort((a, b) => {
      const attA = attainmentByTeam.get(a.teamId);
      const attB = attainmentByTeam.get(b.teamId);
      let cmp = 0;
      if (sortKey === "name") {
        cmp = a.teamName.localeCompare(b.teamName);
      } else if (sortKey === "attained") {
        cmp = (attA?.attained ?? 0) - (attB?.attained ?? 0);
      } else {
        const pctA = attA?.pct ?? -1;
        const pctB = attB?.pct ?? -1;
        cmp = pctA - pctB;
      }
      return sortAsc ? cmp : -cmp;
    });
    return rows;
  }, [teamRows, attainmentByTeam, sortKey, sortAsc]);

  const toggleSort = (key: SortKey) => {
    if (sortKey === key) {
      setSortAsc((v) => !v);
    } else {
      setSortKey(key);
      setSortAsc(key === "progress");
    }
  };

  return (
    <TooltipProvider>
    <div className="flex flex-col gap-4">


      <div className="flex flex-col gap-4 md:hidden">
        {sortedRows.map((row) => {
          const att = attainmentByTeam.get(row.teamId);
          const showAssign = canAssignForTeam(row.teamId);
          return (
            <SalesTargetPanel
              key={row.teamId}
              className="p-4"
              role="button"
              tabIndex={0}
              onClick={() => router.push(teamDetailPath(row.teamId))}
              onKeyDown={(e) => {
                if (e.key === "Enter" || e.key === " ") {
                  e.preventDefault();
                  router.push(teamDetailPath(row.teamId));
                }
              }}
            >
              <div className="flex items-start gap-3">
                <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-accent text-sm font-bold text-white">
                  {teamInitials(row.teamName)}
                </span>
                <div className="min-w-0 flex-1">
                  <p className="truncate font-['Lexend'] text-sm font-bold text-text">
                    {row.teamName}
                  </p>
                  <p className="mt-1 font-['Lexend_Deca'] text-xs text-muted-foreground">
                    Team target {formatTeamTargetDisplay(row, att)} · Attained{" "}
                    {formatMoney(att?.attained)}
                  </p>
                  <div className="mt-2">
                    <SalesTargetProgressBar pct={att?.pct} />
                  </div>
                </div>
              </div>
              <div
                className="mt-3 flex justify-end"
                onClick={(e) => e.stopPropagation()}
                onKeyDown={(e) => e.stopPropagation()}
              >
                <ButtonGroup aria-label={`Actions for ${row.teamName}`}>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <Button
                        type="button"
                        size="icon-sm"
                        variant="outline"
                        aria-label={`View reps for ${row.teamName}`}
                        onClick={() =>
                          router.push(teamDetailPath(row.teamId))
                        }
                      >
                        <Eye className="size-3.5" aria-hidden />
                      </Button>
                    </TooltipTrigger>
                    <TooltipContent>View reps</TooltipContent>
                  </Tooltip>
                  {showAssign && (
                    <Tooltip>
                      <TooltipTrigger asChild>
                        <Button
                          type="button"
                          size="icon-sm"
                          variant="outline"
                          aria-label={`Assign rep targets for ${row.teamName}`}
                          onClick={() => onAssignTeam(row.teamId)}
                        >
                          <Users className="size-3.5" aria-hidden />
                        </Button>
                      </TooltipTrigger>
                      <TooltipContent>Assign rep targets</TooltipContent>
                    </Tooltip>
                  )}
                </ButtonGroup>
              </div>
            </SalesTargetPanel>
          );
        })}
      </div>

      <SalesTargetPanel className="hidden md:block">
        <div className="overflow-x-auto scrollbar-themed">
          <Table variant="transparent" className="min-w-[640px]">
            <TableHeader>
              <TableRow className="hover:bg-transparent">
                <TableHead>
                  <button
                    type="button"
                    className="font-bold uppercase tracking-wider"
                    onClick={() => toggleSort("name")}
                  >
                    Team
                    <SortDirectionIcon active={sortKey === "name"} sortAsc={sortAsc} />
                  </button>
                </TableHead>
                <TableHead className="text-right">Total team target</TableHead>
                <TableHead className="text-right">
                  <button
                    type="button"
                    className="font-bold uppercase tracking-wider"
                    onClick={() => toggleSort("attained")}
                  >
                    Attained
                    <SortDirectionIcon
                      active={sortKey === "attained"}
                      sortAsc={sortAsc}
                    />
                  </button>
                </TableHead>
                <TableHead className="min-w-[180px]">
                  <button
                    type="button"
                    className="font-bold uppercase tracking-wider"
                    onClick={() => toggleSort("progress")}
                  >
                    Progress
                    <SortDirectionIcon
                      active={sortKey === "progress"}
                      sortAsc={sortAsc}
                    />
                  </button>
                </TableHead>
                <TableHead className="text-right font-bold uppercase tracking-wider">Created at</TableHead>
                <TableHead className="text-right font-bold uppercase tracking-wider">Updated at</TableHead>
                <TableHead className="text-right font-bold uppercase tracking-wider">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {sortedRows.map((row) => {
                const att = attainmentByTeam.get(row.teamId);
                const showAssign = canAssignForTeam(row.teamId);
                return (
                  <TableRow
                    key={row.teamId}
                    className="cursor-pointer"
                    onClick={() => router.push(teamDetailPath(row.teamId))}
                  >
                    <TableCell>
                      <div className="flex items-center gap-2.5">
                        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-accent text-xs font-bold text-white">
                          {teamInitials(row.teamName)}
                        </span>
                        <span className="font-semibold text-text">
                          {row.teamName}
                        </span>
                      </div>
                    </TableCell>
                    <TableCell className="text-right tabular-nums font-semibold">
                      {formatTeamTargetDisplay(row, att)}
                    </TableCell>
                    <TableCell className="text-right tabular-nums font-semibold">
                      {formatMoney(att?.attained)}
                    </TableCell>
                    <TableCell>
                      <SalesTargetProgressBar pct={att?.pct} />
                    </TableCell>
                    <TableCell className="text-right whitespace-nowrap text-xs text-muted-foreground">
                      {formatDateTime(row.createdAt)}
                    </TableCell>
                    <TableCell className="text-right whitespace-nowrap text-xs text-muted-foreground">
                      {formatDateTime(row.updatedAt)}
                    </TableCell>
                    <TableCell className="text-right">
                      <div
                        className="flex justify-end"
                        onClick={(e) => e.stopPropagation()}
                        onKeyDown={(e) => e.stopPropagation()}
                      >
                        <ButtonGroup aria-label={`Actions for ${row.teamName}`}>
                          <Tooltip>
                            <TooltipTrigger asChild>
                              <Button
                                type="button"
                                size="icon-sm"
                                variant="outline"
                                aria-label={`View reps for ${row.teamName}`}
                                onClick={() =>
                                  router.push(teamDetailPath(row.teamId))
                                }
                              >
                                <Eye className="size-3.5" aria-hidden />
                              </Button>
                            </TooltipTrigger>
                            <TooltipContent>View reps</TooltipContent>
                          </Tooltip>
                          {showAssign && (
                            <Tooltip>
                              <TooltipTrigger asChild>
                                <Button
                                  type="button"
                                  size="icon-sm"
                                  variant="outline"
                                  aria-label={`Assign rep targets for ${row.teamName}`}
                                  onClick={() => onAssignTeam(row.teamId)}
                                >
                                  <Users className="size-3.5" aria-hidden />
                                </Button>
                              </TooltipTrigger>
                              <TooltipContent>Assign rep targets</TooltipContent>
                            </Tooltip>
                          )}
                        </ButtonGroup>
                      </div>
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>
        </div>
      </SalesTargetPanel>
    </div>
    </TooltipProvider>
  );
}