import { useState, useMemo, useEffect, Fragment } from 'react';
import { useSearchParams } from 'react-router-dom';
import {
  Card, Stack, Button, TextField, InputAdornment, Box, Tabs, Tab, Grid,
  Table, TableBody, TableCell, TableContainer, TableHead, TableRow, IconButton,
  TablePagination, Typography, Collapse, CircularProgress, Alert, Tooltip, Chip, Divider, Link,
  useMediaQuery, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
import SearchIcon from '@mui/icons-material/Search';
import AddIcon from '@mui/icons-material/Add';
import RefreshIcon from '@mui/icons-material/Refresh';
import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import ApartmentOutlinedIcon from '@mui/icons-material/ApartmentOutlined';
import FiberNewOutlinedIcon from '@mui/icons-material/FiberNewOutlined';
import Inventory2OutlinedIcon from '@mui/icons-material/Inventory2Outlined';
import HandshakeOutlinedIcon from '@mui/icons-material/HandshakeOutlined';
import PhoneOutlinedIcon from '@mui/icons-material/PhoneOutlined';
import PlaceOutlinedIcon from '@mui/icons-material/PlaceOutlined';
import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
import StorefrontOutlinedIcon from '@mui/icons-material/StorefrontOutlined';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import NotesOutlinedIcon from '@mui/icons-material/NotesOutlined';
import ArrowRightAltIcon from '@mui/icons-material/ArrowRightAlt';
import MapOutlinedIcon from '@mui/icons-material/MapOutlined';
import BadgeOutlinedIcon from '@mui/icons-material/BadgeOutlined';

import PageHeader from '@/components/PageHeader';
import StatCard from '@/components/StatCard';
import StatusChip from '@/components/StatusChip';
import EmptyState from '@/components/EmptyState';
import UserAvatar from '@/components/UserAvatar';
import TabLabelCount from '@/components/TabLabelCount';
import { fetchClients, deleteClient } from '@/utils/apiClient';
import { toClient } from '@/utils/mappers';
import { titleCase } from '@/utils/format';
import ClientFormDialog from './ClientFormDialog';

// Map categorical enum values to a semantic palette color.
const consentTone = (v) => ({ full: 'success', basiconly: 'info', none: 'default' }[String(v || '').toLowerCase()] || 'default');
const efficiencyTone = (v) => {
  const k = String(v || '').toLowerCase();
  if (/high|good|excellent/.test(k)) return 'success';
  if (/med|average|moderate/.test(k)) return 'warning';
  if (/low|poor|bad/.test(k)) return 'error';
  return 'info';
};

const FIELD_LABEL_SX = { textTransform: 'uppercase', letterSpacing: 0.4, fontSize: '0.68rem', fontWeight: 700, color: 'grey.700' };

// A soft, theme-tinted pill for categorical values. Falls back to a dash placeholder.
function Pill({ label, color = 'default' }) {
  if (label === undefined || label === null || label === '') {
    return <Typography variant="body2" sx={{ fontWeight: 500, color: 'grey.500' }}>—</Typography>;
  }
  return (
    <Chip
      size="small"
      label={label}
      sx={{
        fontWeight: 600,
        ...(color === 'default'
          ? { bgcolor: 'grey.100', color: 'grey.700' }
          : { bgcolor: `${color}.lighter`, color: `${color}.dark` })
      }}
    />
  );
}

// Label + arbitrary node value (text, pill, or grouped chips).
function Field({ label, children }) {
  return (
    <Box>
      <Typography variant="caption" color="text.secondary" sx={FIELD_LABEL_SX}>{label}</Typography>
      <Box sx={{ mt: 0.5 }}>{children}</Box>
    </Box>
  );
}

function ReadField({ label, value }) {
  return (
    <Field label={label}>
      <Typography variant="body2" sx={{ fontWeight: 500, color: value ? 'grey.800' : 'grey.500', wordBreak: 'break-word' }}>
        {value || '—'}
      </Typography>
    </Field>
  );
}

// A bordered sub-card with a tinted header strip — frames each group of fields.
function SectionCard({ icon: Icon, title, accent = 'primary', children }) {
  return (
    <Box sx={{ height: '100%', borderRadius: 2, border: 1, borderColor: 'divider', bgcolor: 'background.paper', overflow: 'hidden' }}>
      <Stack direction="row" spacing={1} alignItems="center" sx={{ px: 2, py: 1.25, borderBottom: 1, borderColor: 'divider', bgcolor: `${accent}.lighter`, opacity: 0.999 }}>
        <Icon sx={{ fontSize: 18, color: `${accent}.main` }} />
        <Typography variant="overline" sx={{ fontWeight: 700, color: 'grey.800', letterSpacing: 0.6, lineHeight: 1 }}>{title}</Typography>
      </Stack>
      <Stack spacing={1.75} sx={{ p: 2 }}>{children}</Stack>
    </Box>
  );
}

// Mini KPI tile used inside the Business card for the headline numbers.
function StatTile({ label, value, icon: Icon, color = 'primary' }) {
  return (
    <Box sx={{ flex: 1, p: 1.5, borderRadius: 1.5, border: 1, borderColor: 'divider', bgcolor: 'grey.50' }}>
      <Stack direction="row" spacing={1} alignItems="center">
        <Box sx={{ width: 32, height: 32, borderRadius: 1, bgcolor: `${color}.lighter`, color: `${color}.main`, display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
          <Icon sx={{ fontSize: 18 }} />
        </Box>
        <Box>
          <Typography variant="h5" sx={{ fontWeight: 700, color: 'grey.800', lineHeight: 1.1 }}>{value}</Typography>
          <Typography variant="caption" color="text.secondary">{label}</Typography>
        </Box>
      </Stack>
    </Box>
  );
}

// Compact metric used inline in the table so key numbers show without expanding.
function Metric({ label, value, color = 'grey.800' }) {
  return (
    <Box sx={{ textAlign: 'center', minWidth: 56 }}>
      <Typography variant="body2" sx={{ fontWeight: 700, color, lineHeight: 1.2 }}>{value}</Typography>
      <Typography variant="caption" color="text.secondary" sx={{ fontSize: '0.65rem' }}>{label}</Typography>
    </Box>
  );
}

// The expandable detail panel — shared by the desktop table row and the mobile card.
function ClientDetail({ row, onEdit }) {
  return (
    <Box sx={{ m: 2, borderRadius: 2.5, border: 1, borderColor: 'divider', overflow: 'hidden', boxShadow: '0 4px 16px rgba(0,0,0,0.06)' }}>
      <Stack
        direction={{ xs: 'column', sm: 'row' }}
        justifyContent="space-between"
        alignItems={{ xs: 'flex-start', sm: 'center' }}
        spacing={1.5}
        sx={{
          px: 2.5, py: 1.75, borderBottom: 1, borderColor: 'divider',
          background: (theme) => `linear-gradient(90deg, ${theme.palette.primary.lighter}88 0%, ${theme.palette.background.paper} 75%)`
        }}
      >
        <Stack direction="row" spacing={1.5} alignItems="center">
          <UserAvatar name={row.name} size={40} />
          <Box>
            <Typography variant="subtitle1" sx={{ fontWeight: 700, lineHeight: 1.2 }}>{row.name}</Typography>
            <Stack direction="row" spacing={0.75} alignItems="center" sx={{ mt: 0.25 }}>
              <BadgeOutlinedIcon sx={{ fontSize: 14, color: 'grey.400' }} />
              <Typography variant="caption" color="text.secondary">{row.clientId}</Typography>
            </Stack>
          </Box>
          <StatusChip status={row.status} sx={{ ml: 0.5 }} />
        </Stack>
        <Button size="small" variant="contained" startIcon={<EditOutlinedIcon />} onClick={() => onEdit(row)} sx={{ width: { xs: '100%', sm: 'auto' } }}>Edit Client</Button>
      </Stack>

      <Box sx={{ p: { xs: 1.5, sm: 2.5 }, bgcolor: 'grey.50' }}>
        <Grid container spacing={2.5} alignItems="stretch">
          <Grid item xs={12} md={4}>
            <SectionCard icon={StorefrontOutlinedIcon} title="Business" accent="primary">
              <Stack direction="row" spacing={1.5}>
                <StatTile label="Parcel Volume" value={Number(row.parcelVolume).toLocaleString()} icon={Inventory2OutlinedIcon} color="primary" />
                <StatTile label="Active Contracts" value={row.activeContracts} icon={HandshakeOutlinedIcon} color="primary" />
              </Stack>
              <Field label="Client ID">
                <Typography variant="body2" sx={{ fontFamily: 'monospace', fontWeight: 600, color: 'grey.800' }}>{row.clientId}</Typography>
              </Field>
              <Field label="Business Type"><Pill label={row.businessType && titleCase(row.businessType)} color="primary" /></Field>
              <Field label="Order Frequency"><Pill label={row.frequency && titleCase(row.frequency)} color="info" /></Field>
            </SectionCard>
          </Grid>

          <Grid item xs={12} md={4}>
            <SectionCard icon={LocalShippingOutlinedIcon} title="Logistics" accent="primary">
              <Field label="Logistics Segment">
                {row.logisticsSegment ? (
                  <Stack direction="row" spacing={0.75} flexWrap="wrap" useFlexGap>
                    {String(row.logisticsSegment).split(/[,/]/).map((seg) => seg.trim()).filter(Boolean).map((seg) => (
                      <Pill key={seg} label={titleCase(seg)} color="primary" />
                    ))}
                  </Stack>
                ) : <Pill label={null} />}
              </Field>
              <ReadField label="Current Provider" value={row.provider} />
              <Field label="Efficiency"><Pill label={row.efficiency && titleCase(row.efficiency)} color={efficiencyTone(row.efficiency)} /></Field>
              <Field label="Transit Route">
                {(() => {
                  const stops = [row.transitFrom, ...String(row.transitTo || '').split(',')]
                    .map((s) => s.trim()).filter(Boolean);
                  if (!stops.length) return <Pill label={null} />;
                  return (
                    <Stack direction="row" spacing={0.75} alignItems="center" flexWrap="wrap" useFlexGap>
                      {stops.map((stop, idx) => (
                        <Fragment key={`${stop}-${idx}`}>
                          {idx > 0 && <ArrowRightAltIcon sx={{ fontSize: 20, color: 'primary.main' }} />}
                          <Pill label={titleCase(stop)} color={idx === 0 ? 'default' : 'info'} />
                        </Fragment>
                      ))}
                    </Stack>
                  );
                })()}
              </Field>
            </SectionCard>
          </Grid>

          <Grid item xs={12} md={4}>
            <SectionCard icon={PlaceOutlinedIcon} title="Location & Survey" accent="primary">
              <Field label="City / State">
                <Typography variant="body2" sx={{ fontWeight: 500, color: 'grey.800' }}>{[row.city, row.businessState].filter(Boolean).join(', ') || '—'}</Typography>
              </Field>
              <ReadField label="Neighbourhood" value={row.neighbourhood} />
              <Field label="Survey Address">
                <Stack direction="row" spacing={1} sx={{ p: 1.25, borderRadius: 1.5, bgcolor: 'grey.50', border: 1, borderColor: 'divider' }}>
                  <PlaceOutlinedIcon sx={{ fontSize: 16, color: 'grey.400', mt: '2px' }} />
                  <Typography variant="body2" sx={{ color: 'grey.800', lineHeight: 1.5 }}>{row.surveyAddress || '—'}</Typography>
                </Stack>
              </Field>
              <Field label="Coordinates">
                {row.surveyLat && row.surveyLng ? (
                  <Stack direction="row" spacing={1.25} alignItems="center" flexWrap="wrap" useFlexGap>
                    <Tooltip title={`${row.surveyLat}, ${row.surveyLng}`} arrow placement="top">
                      <Stack direction="row" spacing={0.5} alignItems="center" sx={{ cursor: 'default' }}>
                        <PlaceOutlinedIcon sx={{ fontSize: 16, color: 'grey.400' }} />
                        <Typography variant="body2" sx={{ fontWeight: 500, color: 'grey.800', borderBottom: '1px dotted', borderColor: 'grey.300' }}>
                          {[row.neighbourhood, row.city].filter(Boolean).join(', ') || 'Pinned location'}
                        </Typography>
                      </Stack>
                    </Tooltip>
                    <Button
                      component="a"
                      href={`https://www.google.com/maps?q=${row.surveyLat},${row.surveyLng}`}
                      target="_blank" rel="noopener"
                      size="small" variant="outlined" startIcon={<MapOutlinedIcon sx={{ fontSize: 16 }} />}
                      sx={{
                        py: 0.25, px: 1.25, minWidth: 0, fontSize: '0.75rem', fontWeight: 600, borderRadius: 5,
                        color: 'primary.main', borderColor: 'primary.100', bgcolor: 'primary.lighter',
                        '&:hover': { borderColor: 'primary.main', bgcolor: 'primary.lighter' }
                      }}
                    >
                      View on map
                    </Button>
                  </Stack>
                ) : <Typography variant="body2" sx={{ color: 'grey.500' }}>—</Typography>}
              </Field>
            </SectionCard>
          </Grid>

          <Grid item xs={12}>
            <SectionCard icon={InfoOutlinedIcon} title="Contact & Compliance" accent="primary">
              <Grid container spacing={2.5}>
                <Grid item xs={12} sm={6} md={4}><ReadField label="Phone" value={row.phone} /></Grid>
                <Grid item xs={12} sm={6} md={4}><Field label="Data Consent"><Pill label={row.dataConsent && titleCase(row.dataConsent)} color={consentTone(row.dataConsent)} /></Field></Grid>
                <Grid item xs={12} sm={6} md={4}><ReadField label="Last Updated" value={row.lastUpdated} /></Grid>
                {row.notes && (
                  <Grid item xs={12}>
                    <Box sx={{ p: 2, borderRadius: 1.5, bgcolor: 'warning.lighter', border: 1, borderColor: 'warning.light' }}>
                      <Stack direction="row" spacing={1} alignItems="center" sx={{ mb: 0.5 }}>
                        <NotesOutlinedIcon sx={{ fontSize: 16, color: 'warning.dark' }} />
                        <Typography variant="caption" sx={{ color: 'warning.dark', textTransform: 'uppercase', letterSpacing: 0.4, fontSize: '0.68rem', fontWeight: 700 }}>Notes</Typography>
                      </Stack>
                      <Typography variant="body2" sx={{ color: 'grey.800' }}>{row.notes}</Typography>
                    </Box>
                  </Grid>
                )}
              </Grid>
            </SectionCard>
          </Grid>
        </Grid>
      </Box>
    </Box>
  );
}

// Mobile presentation of a client — summary card with an expandable detail panel.
function ClientCard({ row, onEdit, onDelete }) {
  const [open, setOpen] = useState(false);
  return (
    <Box sx={{ borderRadius: 3, border: 1, borderColor: open ? 'primary.light' : 'divider', bgcolor: 'background.paper', overflow: 'hidden' }}>
      <Box sx={{ p: 2 }}>
        <Stack direction="row" spacing={1.25} alignItems="center">
          <UserAvatar name={row.name} size={42} />
          <Box sx={{ minWidth: 0, flexGrow: 1 }}>
            <Typography variant="body2" sx={{ fontWeight: 700, color: 'grey.800' }} noWrap>{row.name}</Typography>
            <Typography variant="caption" sx={{ fontFamily: 'monospace', fontWeight: 700, color: 'primary.main' }}>{row.logicalId}</Typography>
          </Box>
          <StatusChip status={row.status} />
        </Stack>

        <Stack spacing={1} sx={{ mt: 1.75 }}>
          <Stack direction="row" spacing={1} alignItems="center">
            <PhoneOutlinedIcon sx={{ fontSize: 16, color: 'grey.400', flexShrink: 0 }} />
            <Typography variant="body2">{row.phone || '—'}</Typography>
          </Stack>
          <Stack direction="row" spacing={1} alignItems="center">
            <PlaceOutlinedIcon sx={{ fontSize: 16, color: 'grey.400', flexShrink: 0 }} />
            <Typography variant="body2" noWrap>{row.city || '—'}{row.businessState ? `, ${row.businessState}` : ''}</Typography>
          </Stack>
        </Stack>

        <Stack direction="row" spacing={1.5} alignItems="center" divider={<Divider orientation="vertical" flexItem />} sx={{ mt: 1.75 }}>
          <Metric label="Parcels" value={Number(row.parcelVolume).toLocaleString()} />
          <Metric label="Contracts" value={row.activeContracts} color="primary.main" />
        </Stack>

        <Divider sx={{ my: 1.5 }} />
        <Stack direction="row" spacing={1} justifyContent="space-between" alignItems="center">
          <Button size="small" onClick={() => setOpen((o) => !o)} endIcon={open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}>
            {open ? 'Hide' : 'Details'}
          </Button>
          <Stack direction="row" spacing={1}>
            <Button size="small" variant="outlined" startIcon={<EditOutlinedIcon fontSize="small" />} onClick={() => onEdit(row)}>Edit</Button>
            <Button size="small" variant="outlined" color="error" startIcon={<DeleteOutlineIcon fontSize="small" />} onClick={() => onDelete(row)}>Delete</Button>
          </Stack>
        </Stack>
      </Box>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <Box sx={{ borderTop: 1, borderColor: 'divider' }}>
          <ClientDetail row={row} onEdit={onEdit} />
        </Box>
      </Collapse>
    </Box>
  );
}

function ClientRow({ row, index, onEdit, onDelete }) {
  const [open, setOpen] = useState(false);

  return (
    <Fragment>
      <TableRow
        hover
        sx={{
          cursor: 'pointer',
          '& > *': { borderBottom: open ? 'unset' : undefined },
          ...(open && { bgcolor: 'primary.lighter', '&:hover': { bgcolor: 'primary.lighter' } })
        }}
        onClick={() => setOpen((o) => !o)}
      >
        <TableCell padding="checkbox">
          <IconButton size="small" onClick={(e) => { e.stopPropagation(); setOpen((o) => !o); }}>
            {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
          </IconButton>
        </TableCell>
        <TableCell sx={{ whiteSpace: 'nowrap' }}>
          <Typography variant="caption" sx={{ fontFamily: 'monospace', fontWeight: 700, color: 'primary.main', bgcolor: 'primary.lighter', px: 1, py: 0.5, borderRadius: 1, border: '1px solid', borderColor: 'primary.light', whiteSpace: 'nowrap' }}>
            {row.logicalId}
          </Typography>
        </TableCell>
        <TableCell>
          <Stack direction="row" spacing={1.25} alignItems="center">
            <UserAvatar name={row.name} size={38} />
            <Box sx={{ minWidth: 0 }}>
              <Typography variant="body2" sx={{ fontWeight: 600, color: 'grey.800' }}>{row.name}</Typography>
              <Stack direction="row" spacing={0.75} alignItems="center" sx={{ mt: 0.4 }}>
                {row.businessType && (
                  <Chip
                    size="small"
                    label={titleCase(row.businessType)}
                    sx={{ height: 20, fontSize: '0.68rem', fontWeight: 600, bgcolor: 'grey.100', color: 'grey.700' }}
                  />
                )}
              </Stack>
            </Box>
          </Stack>
        </TableCell>
        <TableCell>
          <Stack direction="row" spacing={0.75} alignItems="center">
            <PhoneOutlinedIcon sx={{ fontSize: 15, color: 'grey.400' }} />
            <Box>
              <Typography variant="body2">{row.phone || '—'}</Typography>
              {row.frequency && <Typography variant="caption" color="text.secondary">{row.frequency}</Typography>}
            </Box>
          </Stack>
        </TableCell>
        <TableCell>
          <Stack direction="row" spacing={0.75} alignItems="center">
            <PlaceOutlinedIcon sx={{ fontSize: 15, color: 'grey.400' }} />
            <Box>
              <Typography variant="body2">{row.city || '—'}{row.businessState ? `, ${row.businessState}` : ''}</Typography>
              {row.neighbourhood && <Typography variant="caption" color="text.secondary">{row.neighbourhood}</Typography>}
            </Box>
          </Stack>
        </TableCell>
        <TableCell>
          <Stack direction="row" spacing={1.5} alignItems="center" justifyContent="center" divider={<Divider orientation="vertical" flexItem />}>
            <Metric label="Parcels" value={Number(row.parcelVolume).toLocaleString()} />
            <Metric label="Contracts" value={row.activeContracts} color="primary.main" />
          </Stack>
        </TableCell>
        <TableCell><StatusChip status={row.status} /></TableCell>
        <TableCell align="right">
          <Tooltip title="Edit"><IconButton size="small" onClick={(e) => { e.stopPropagation(); onEdit(row); }}><EditOutlinedIcon fontSize="small" /></IconButton></Tooltip>
          <Tooltip title="Delete"><IconButton size="small" onClick={(e) => { e.stopPropagation(); onDelete(row); }}><DeleteOutlineIcon fontSize="small" /></IconButton></Tooltip>
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell colSpan={8} sx={{ py: 0, borderBottom: open ? undefined : 'none' }}>
          <Collapse in={open} timeout="auto" unmountOnExit>
            <ClientDetail row={row} onEdit={onEdit} />
          </Collapse>
        </TableCell>
      </TableRow>
    </Fragment>
  );
}

export default function Tenants() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
  const [clients, setClients] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const [searchParams] = useSearchParams();
  const [tab, setTab] = useState(0);
  const [search, setSearch] = useState(searchParams.get('q') || '');
  const [page, setPage] = useState(0);
  const [rpp, setRpp] = useState(10);

  // Keep the search box in sync when navigated here with a ?q= query (e.g. from the top search bar).
  useEffect(() => {
    const q = searchParams.get('q');
    if (q != null) { setSearch(q); setPage(0); }
  }, [searchParams]);

  const [dialog, setDialog] = useState({ open: false, mode: 'add', initial: null });
  const [toDelete, setToDelete] = useState(null);
  const [deleting, setDeleting] = useState(false);

  const load = (silent = false) => {
    if (!silent) {
      setLoading(true);
      setError(null);
    }
    fetchClients()
      .then((points) => setClients(points.map(toClient)))
      .catch((e) => {
        if (!silent) setError(e.message || 'Failed to load clients');
      })
      .finally(() => {
        if (!silent) setLoading(false);
      });
  };

  useEffect(() => { 
    load(); 
    const intervalId = setInterval(() => {
      load(true); // Silent poll every 10 seconds
    }, 10000);
    return () => clearInterval(intervalId);
  }, []);

  const stats = useMemo(() => ({
    total: clients.length,
    newCount: clients.filter((c) => c.status === 'newClient').length,
    parcels: clients.reduce((s, c) => s + (Number(c.parcelVolume) || 0), 0),
    contracts: clients.reduce((s, c) => s + (Number(c.activeContracts) || 0), 0)
  }), [clients]);

  const tabs = useMemo(() => {
    const seen = [];
    clients.forEach((c) => { if (!seen.includes(c.status)) seen.push(c.status); });
    return [{ key: 'all', label: 'All' }, ...seen.map((s) => ({ key: s, label: titleCase(s) }))];
  }, [clients]);

  const tabKey = tabs[Math.min(tab, tabs.length - 1)]?.key || 'all';

  const counts = useMemo(() => {
    const c = { all: clients.length };
    clients.forEach((cl) => { c[cl.status] = (c[cl.status] || 0) + 1; });
    return c;
  }, [clients]);

  const filtered = useMemo(
    () =>
      clients.filter((t) => {
        const matchTab = tabKey === 'all' || t.status === tabKey;
        const matchSearch =
          !search ||
          [t.name, t.phone, t.city, t.businessType, t.clientId, t.neighbourhood]
            .join(' ').toLowerCase().includes(search.toLowerCase());
        return matchTab && matchSearch;
      }),
    [clients, tabKey, search]
  );

  const paged = filtered.slice(page * rpp, page * rpp + rpp);

  const handleSaved = () => { setDialog({ open: false, mode: 'add', initial: null }); load(); };

  const confirmDelete = async () => {
    setDeleting(true);
    try {
      await deleteClient(toDelete.id);
      setToDelete(null);
      load();
    } catch (e) {
      setError(e.message || 'Failed to delete client');
    } finally {
      setDeleting(false);
    }
  };

  return (
    <>
      <PageHeader
        title="Clients"
        breadcrumbs={[{ label: 'Clients' }]}
        action={
          <Stack direction="row" spacing={1.5} sx={{ width: { xs: '100%', sm: 'auto' } }}>
            <Button variant="outlined" startIcon={<RefreshIcon />} onClick={load} disabled={loading} sx={{ flex: { xs: 1, sm: 'none' } }}>Refresh</Button>
            <Button variant="contained" startIcon={<AddIcon />} onClick={() => setDialog({ open: true, mode: 'add', initial: null })} sx={{ flex: { xs: 1, sm: 'none' } }}>Add Client</Button>
          </Stack>
        }
      />

      <Grid container spacing={2.5} sx={{ mb: 3 }}>
        <Grid item xs={12} sm={6} lg={3}><StatCard accent title="Total Clients" value={stats.total} icon={ApartmentOutlinedIcon} caption="All registered" /></Grid>
        <Grid item xs={12} sm={6} lg={3}><StatCard accent title="New Clients" value={stats.newCount} icon={FiberNewOutlinedIcon} color="primary" caption="Awaiting onboarding" /></Grid>
        <Grid item xs={12} sm={6} lg={3}><StatCard accent title="Total Parcel Volume" value={stats.parcels.toLocaleString()} icon={Inventory2OutlinedIcon} color="primary" caption="Across all clients" /></Grid>
        <Grid item xs={12} sm={6} lg={3}><StatCard accent title="Active Contracts" value={stats.contracts} icon={HandshakeOutlinedIcon} color="primary" caption="Currently running" /></Grid>
      </Grid>

      <Card sx={{ overflow: 'hidden' }}>
        <Box
          sx={{
            px: 2.5, py: 2, borderBottom: 1, borderColor: 'divider',
            display: 'flex', alignItems: 'center', gap: 1.5,
            background: (theme) => `linear-gradient(90deg, ${theme.palette.primary.lighter}66 0%, ${theme.palette.background.paper} 70%)`
          }}
        >
          <Box sx={{ width: 40, height: 40, borderRadius: 2, bgcolor: 'primary.lighter', color: 'primary.main', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
            <ApartmentOutlinedIcon fontSize="small" />
          </Box>
          <Box>
            <Typography variant="subtitle1" sx={{ fontWeight: 700, color: 'grey.800', lineHeight: 1.2 }}>Client Directory</Typography>
            <Typography variant="caption" color="text.secondary">Browse, search and manage every client account</Typography>
          </Box>
        </Box>

        <Stack direction={{ xs: 'column', md: 'row' }} spacing={1.5} sx={{ p: 2 }} alignItems={{ md: 'center' }}>
          <TextField
            size="small" placeholder="Search by name, phone, city, ID…" value={search} onChange={(e) => { setSearch(e.target.value); setPage(0); }}
            sx={{ width: { xs: '100%', md: 300 } }}
            InputProps={{ startAdornment: <InputAdornment position="start"><SearchIcon fontSize="small" /></InputAdornment> }}
          />
          <Box sx={{ flexGrow: 1 }} />
          {!loading && (
            <Stack direction="row" spacing={1} alignItems="center">
              <Typography variant="body2" color="text.secondary">
                {filtered.length} {filtered.length === 1 ? 'client' : 'clients'}
              </Typography>
              <Chip size="small" label="live · doormile_clients" sx={{ height: 22, fontSize: '0.7rem', bgcolor: 'success.lighter', color: 'success.dark', fontWeight: 600 }} />
            </Stack>
          )}
        </Stack>

        <Box sx={{ px: 2, borderBottom: 1, borderColor: 'divider' }}>
          <Tabs value={Math.min(tab, tabs.length - 1)} onChange={(_, v) => { setTab(v); setPage(0); }} variant="scrollable" scrollButtons="auto">
            {tabs.map((t, i) => (
              <Tab key={t.key} label={<TabLabelCount label={t.label} count={counts[t.key] || 0} active={tab === i} />} />
            ))}
          </Tabs>
        </Box>

        {error && <Alert severity="error" sx={{ m: 2 }} action={<Button color="inherit" size="small" onClick={load}>Retry</Button>}>{error}</Alert>}

        {loading ? (
          <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}><CircularProgress /></Box>
        ) : paged.length === 0 ? (
          <EmptyState title="No clients found" caption="Try a different tab or search term, or add a client." />
        ) : isMobile ? (
          <Stack spacing={1.5} sx={{ p: 2 }}>
            {paged.map((row) => (
              <ClientCard
                key={row.id}
                row={row}
                onEdit={(r) => setDialog({ open: true, mode: 'edit', initial: r })}
                onDelete={(r) => setToDelete(r)}
              />
            ))}
          </Stack>
        ) : (
          <TableContainer>
            <Table sx={{ minWidth: 900 }}>
              <TableHead>
                <TableRow sx={{ '& th': { bgcolor: 'grey.50', fontWeight: 700, color: 'grey.700', textTransform: 'uppercase', fontSize: '0.72rem', letterSpacing: 0.4 } }}>
                  <TableCell padding="checkbox" />
                  <TableCell>ID</TableCell>
                  <TableCell>Client</TableCell>
                  <TableCell>Contact</TableCell>
                  <TableCell>Location</TableCell>
                  <TableCell align="center">Volume</TableCell>
                  <TableCell>Status</TableCell>
                  <TableCell align="right">Actions</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {paged.map((row, i) => (
                  <ClientRow
                    key={row.id}
                    row={row}
                    index={page * rpp + i}
                    onEdit={(r) => setDialog({ open: true, mode: 'edit', initial: r })}
                    onDelete={(r) => setToDelete(r)}
                  />
                ))}
              </TableBody>
            </Table>
          </TableContainer>
        )}
        <TablePagination
          component="div" count={filtered.length} page={page} onPageChange={(_, p) => setPage(p)}
          rowsPerPage={rpp} onRowsPerPageChange={(e) => { setRpp(+e.target.value); setPage(0); }} rowsPerPageOptions={[5, 10, 25]}
        />
      </Card>

      <ClientFormDialog
        open={dialog.open}
        mode={dialog.mode}
        initial={dialog.initial}
        onClose={() => setDialog({ open: false, mode: 'add', initial: null })}
        onSaved={handleSaved}
      />

      <Dialog open={!!toDelete} onClose={deleting ? undefined : () => setToDelete(null)}>
        <DialogTitle>Delete client?</DialogTitle>
        <DialogContent>
          <DialogContentText>
            This will permanently remove <strong>{toDelete?.name}</strong> from the doormile_clients collection. This cannot be undone.
          </DialogContentText>
        </DialogContent>
        <DialogActions sx={{ px: 3, py: 2 }}>
          <Button onClick={() => setToDelete(null)} disabled={deleting}>Cancel</Button>
          <Button color="error" variant="contained" onClick={confirmDelete} disabled={deleting} startIcon={deleting ? <CircularProgress size={16} color="inherit" /> : null}>Delete</Button>
        </DialogActions>
      </Dialog>
    </>
  );
}