import { ArrowRight, Building2 } from "lucide-react";
import { Button } from "@/shared/common/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/shared/common/ui/table";
import { SectorRecordReport } from "./types";

interface SectorOverviewTableProps {
  reports: SectorRecordReport[];
  getName: (name: SectorRecordReport["sectorName"]) => string;
  onSelect?: (sectorId: string) => void;
  hasDateRange?: boolean;
}

export function SectorOverviewTable({
  reports,
  getName,
  onSelect,
  hasDateRange,
}: SectorOverviewTableProps) {
  return (
    <section className="overflow-hidden rounded-xl border bg-card shadow-sm">
      <div className="flex items-center gap-3 border-b px-5 py-4">
        <Building2 className="size-5 text-primary" />
        <div>
          <h2 className="font-semibold">Sector reporting grid</h2>
          <p className="text-xs text-muted-foreground">
            Record activity for every sector and group in the selected scope
          </p>
        </div>
      </div>
      <div className="overflow-x-auto">
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Sector</TableHead>
              <TableHead>Group</TableHead>
              <TableHead>Status</TableHead>
              <TableHead className="text-emerald-600">
                Incoming {hasDateRange ? "(selected range)" : "(all time)"}
              </TableHead>
              <TableHead className="text-violet-600">
                Outgoing {hasDateRange ? "(selected range)" : "(all time)"}
              </TableHead>
              <TableHead>Today</TableHead>
              <TableHead>This week</TableHead>
              <TableHead>This month</TableHead>
              {onSelect && <TableHead className="w-12" />}
            </TableRow>
          </TableHeader>
          <TableBody>
            {reports.map((report) => (
              <TableRow
                key={`${report.sectorId}-${report.groupId ?? ""}`}
                className={onSelect ? "cursor-pointer" : undefined}
                onClick={() => onSelect?.(report.sectorId)}>
                <TableCell className="font-medium">{getName(report.sectorName)}</TableCell>
                <TableCell>
                  {report.groupName ? getName(report.groupName) : "—"}
                </TableCell>
                <TableCell>
                  <span className="rounded-full bg-emerald-500/10 px-2 py-1 text-[10px] font-semibold uppercase text-emerald-700">
                    Active stream
                  </span>
                </TableCell>
                <TableCell>
                  <span className="rounded-full bg-emerald-500/10 px-2.5 py-1 font-semibold text-emerald-600">
                    {report.incoming.allTime.toLocaleString()}
                  </span>
                </TableCell>
                <TableCell>
                  <span className="rounded-full bg-violet-500/10 px-2.5 py-1 font-semibold text-violet-600">
                    {report.outgoing.allTime.toLocaleString()}
                  </span>
                </TableCell>
                <TableCell>{(report.incoming.today + report.outgoing.today).toLocaleString()}</TableCell>
                <TableCell>{(report.incoming.thisWeek + report.outgoing.thisWeek).toLocaleString()}</TableCell>
                <TableCell>{(report.incoming.thisMonth + report.outgoing.thisMonth).toLocaleString()}</TableCell>
                {onSelect && <TableCell>
                  <Button variant="ghost" size="icon" aria-label="View sector report">
                    <ArrowRight className="size-4" />
                  </Button>
                </TableCell>}
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>
    </section>
  );
}
