import { useState } from "react";
import { useDebounce } from "@/hooks/use-debounce";
import { useTeamMembersList } from "@/domain/team-members/use-cases/use-team-members-list";
import type { TeamMemberListItem } from "@/domain/team-members/types/team-member";
import { Alert, Box, Button, Stack, Tab, Tabs, TextField, Typography } from "@mui/material";
import { TeamMembersTable } from "./_components/team-members-table";
import { AddTeamMemberDialog } from "./_components/add-team-member-dialog";
import { TeamMemberDetailDrawer } from "./_components/team-member-detail-drawer";

type StatusTab = "active" | "inactive";

const STATUS_LABELS: Record<StatusTab, "Active" | "Inactive"> = {
  active: "Active",
  inactive: "Inactive",
};

export default function TeamMembersListPage() {
  const [search, setSearch] = useState("");
  const [tab, setTab] = useState<StatusTab>("active");
  const [selectedMember, setSelectedMember] = useState<TeamMemberListItem | null>(null);
  const [addMemberOpen, setAddMemberOpen] = useState(false);
  const debouncedSearch = useDebounce(search, 300).trim().toLowerCase();
  const { data, isLoading, error } = useTeamMembersList();
  const allMembers = data?.items ?? [];

  const activeCount = allMembers.filter((member) => member.status === "Active").length;
  const inactiveCount = allMembers.length - activeCount;
  const rows = allMembers
    .filter((member) => member.status === STATUS_LABELS[tab])
    .filter((member) => !debouncedSearch || member.name.toLowerCase().includes(debouncedSearch));

  return (
    <Box
      className="flex h-full flex-col overflow-hidden"
      sx={{ backgroundColor: "var(--color-bg-page)" }}
    >
      <Stack
        direction={{ xs: "column", sm: "row" }}
        spacing={2}
        sx={{
          alignItems: { xs: "stretch", sm: "center" },
          justifyContent: "space-between",
          p: 2.5,
          backgroundColor: "var(--color-bg-surface)",
          borderBottom: "1px solid var(--color-border)",
        }}
      >
        <Box>
          <Typography variant="h4" component="h1">
            Team Members
          </Typography>
          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.75 }}>
            {allMembers.length} team member{allMembers.length === 1 ? "" : "s"} · {activeCount}{" "}
            active
          </Typography>
        </Box>
        <Stack direction="row" spacing={1} sx={{ alignItems: "center" }}>
          <TextField
            size="small"
            value={search}
            onChange={(event) => setSearch(event.target.value)}
            placeholder="Search team member…"
            aria-label="Search team member"
            sx={{ width: 224 }}
          />
          <Button variant="contained" size="small" onClick={() => setAddMemberOpen(true)}>
            Add Member
          </Button>
        </Stack>
      </Stack>

      <Tabs
        value={tab}
        onChange={(_event, value: StatusTab) => setTab(value)}
        aria-label="Team member status"
      >
        <Tab value="active" label={`Active ${activeCount}`} />
        <Tab value="inactive" label={`Inactive ${inactiveCount}`} />
      </Tabs>

      {Boolean(error) && (
        <Alert severity="error">
          {error instanceof Error ? error.message : "Failed to load team members"}
        </Alert>
      )}

      <Box sx={{ flex: 1, overflow: "auto", p: 2 }}>
        <TeamMembersTable
          rows={rows}
          isLoading={isLoading}
          hasError={Boolean(error)}
          tab={tab}
          onOpen={setSelectedMember}
        />
      </Box>

      <Stack
        direction="row"
        sx={{
          justifyContent: "space-between",
          px: 2,
          py: 1,
          borderTop: "1px solid var(--color-border)",
          backgroundColor: "var(--color-bg-surface)",
        }}
      >
        <Typography variant="caption" color="text.secondary">
          {rows.length} {tab} team member{rows.length === 1 ? "" : "s"}
          {debouncedSearch ? " · filtered" : ""}
        </Typography>
        <Typography variant="caption" color="text.secondary">
          {activeCount} active · {inactiveCount} inactive
        </Typography>
      </Stack>

      <TeamMemberDetailDrawer member={selectedMember} onClose={() => setSelectedMember(null)} />
      <AddTeamMemberDialog open={addMemberOpen} onClose={() => setAddMemberOpen(false)} />
    </Box>
  );
}