'use client';

import { useEffect, useState, useCallback } from 'react';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import {
  Users,
  RefreshCw,
  AlertCircle,
  Mail,
  MessageSquare,
  Video,
  Clock,
  TrendingUp,
  ChevronLeft,
  ChevronRight,
  Phone,
  Moon,
} from 'lucide-react';
import {
  ResponsiveContainer,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  Legend,
  CartesianGrid,
} from 'recharts';

interface SummaryData {
  totalStaff: number;
  activeThisPeriod: number;
  avgHoursWorked: string;
  avgBillableHours: string;
  avgTeamsMeetings: string;
  avgEmailsSent: string;
  lastSynced: string | null;
  configured: boolean;
}

interface UserRow {
  graphUserId: string;
  displayName: string;
  email: string;
  jobTitle: string | null;
  department: string | null;
  autotaskResourceId: number | null;
  hoursWorked: number;
  billableHours: number;
  teamsMessages: number;
  teamsCallCount: number;
  meetingsAttended: number;
  meetingsOrganized: number;
  meetingsWithExternal: number;
  audioDurationSeconds: number;
  meetingDurationSeconds: number;
  emailsSent: number;
  emailsReceived: number;
  lastActivity: string | null;
  zoomCallCount: number;
  zoomClientCallCount: number;
  zoomCallDurationSeconds: number;
  zoomMeetingCount: number;
  zoomClientMeetingCount: number;
}

interface Pagination {
  total: number;
  page: number;
  pageSize: number;
  totalPages: number;
}

interface UserDetail {
  user: {
    id: string;
    displayName: string;
    email: string;
    jobTitle: string | null;
    department: string | null;
    accountEnabled: boolean;
    autotaskResourceId: number | null;
  };
  snapshots: Array<{
    period_type: string;
    period_end: string;
    teams_chat_messages: number;
    teams_private_messages: number;
    teams_calls: number;
    teams_meetings_attended: number;
    teams_meetings_organized: number;
    emails_sent: number;
    emails_received: number;
    emails_read: number;
    last_activity_date: string | null;
    after_hours_messages: number;
  }>;
  hours: {
    d7: { total: number; billable: number };
    d30: { total: number; billable: number };
    d90: { total: number; billable: number };
  } | null;
  recentEntries: Array<{
    entry_date: string;
    hours_worked: number;
    billable: boolean;
    notes: string | null;
    title: string | null;
    company_name: string | null;
  }>;
  recentTeamsMeetings: Array<{
    subject: string | null;
    startTime: string;
    durationMinutes: number | null;
    attendeeCount: number;
    clientAttendeeCount: number;
    hasClientAttendees: boolean;
    clientCompanies: string[];
    participantNames: string[];
    matchedEntries: Array<{
      hours_worked: number;
      billable: boolean;
      notes: string | null;
      title: string | null;
      company_name: string | null;
      start_date_time: string | null;
      end_date_time: string | null;
    }>;
  }>;
  meetingCounts: { total: number; withClients: number };
  zoom: {
    calls: Record<'d7' | 'd30' | 'd90', { total: number; client: number; outbound: number; inbound: number; durationSeconds: number }>;
    meetings: Record<'d7' | 'd30' | 'd90', { total: number; withClients: number }>;
    topClients: Array<{ companyName: string; callCount: number; meetingCount: number }>;
    recentCalls: Array<{
      direction: string;
      status: string;
      otherPartyName: string | null;
      otherPartyNumber: string | null;
      startTime: string;
      durationSeconds: number | null;
      companyName: string | null;
    }>;
    recentMeetings: Array<{
      topic: string | null;
      startTime: string;
      endTime: string | null;
      durationMinutes: number | null;
      participantCount: number;
      clientParticipantCount: number;
      hasClientAttendees: boolean;
      externalParticipantNames: string[];
      clientCompanies: string[];
      matchedEntries: Array<{
        hours_worked: number;
        billable: boolean;
        notes: string | null;
        title: string | null;
        company_name: string | null;
        start_date_time: string | null;
        end_date_time: string | null;
      }>;
    }>;
  } | null;
  dailyActivity: Array<{
    date: string;
    meetings: number;
    zoomCalls: number;
    hours: number;
    meetingMins: number;
  }>;
  afterHours: {
    messages: number;
    meetings: number;
    messagesPct: number;
    meetingsPct: number;
  };
  peerMax: {
    hours: number;
    billableHours: number;
    meetings: number;
    clientMeetings: number;
    messages: number;
    emails: number;
    calls: number;
  } | null;
  trend: {
    hours: number;
    billable: number;
    meetings: number;
    calls: number;
  };
}

function ActivityHeatmap({ data, periodDays }: {
  data: UserDetail['dailyActivity'];
  periodDays: number;
}) {
  // Build a map of date -> data
  const byDate = new Map(data.map(d => [d.date, d]));

  // Generate all days in the period
  const days: string[] = [];
  for (let i = periodDays - 1; i >= 0; i--) {
    const d = new Date();
    d.setUTCHours(0, 0, 0, 0);
    d.setUTCDate(d.getUTCDate() - i);
    days.push(d.toISOString().slice(0, 10));
  }

  // Score each day: meetings * 2 + zoomCalls + hours (capped for color scaling)
  const scores = days.map(d => {
    const row = byDate.get(d);
    if (!row) return 0;
    return row.meetings * 2 + row.zoomCalls + Math.min(row.hours, 8);
  });
  const maxScore = Math.max(...scores, 1);

  const getStyle = (score: number): React.CSSProperties => {
    if (score === 0) return { backgroundColor: 'var(--muted)' };
    const intensity = score / maxScore;
    if (intensity < 0.25) return { backgroundColor: 'rgb(191 219 254)' };  // blue-200
    if (intensity < 0.5)  return { backgroundColor: 'rgb(96 165 250)' };   // blue-400
    if (intensity < 0.75) return { backgroundColor: 'rgb(37 99 235)' };    // blue-600
    return { backgroundColor: 'rgb(30 64 175)' };                           // blue-800
  };

  const getTooltip = (date: string, score: number) => {
    const row = byDate.get(date);
    if (!row || score === 0) return date;
    const parts = [];
    if (row.meetings > 0) parts.push(`${row.meetings} meetings (${row.meetingMins}m)`);
    if (row.zoomCalls > 0) parts.push(`${row.zoomCalls} calls`);
    if (row.hours > 0) parts.push(`${row.hours.toFixed(1)}h logged`);
    return `${date}\n${parts.join(' · ')}`;
  };

  // Group into weeks (columns)
  const firstDow = new Date(days[0]).getUTCDay(); // 0=Sun
  const cells = Array(firstDow).fill(null).concat(days);
  const weeks: (string | null)[][] = [];
  for (let i = 0; i < cells.length; i += 7) weeks.push(cells.slice(i, i + 7));

  const dayLabels = ['S','M','T','W','T','F','S'];

  return (
    <div>
      <div className="flex items-center justify-between mb-2">
        <h3 className="font-medium text-sm">Activity Heatmap</h3>
        <div className="flex items-center gap-1 text-xs text-muted-foreground">
          <span>less</span>
          {[
            { backgroundColor: 'var(--muted)' },
            { backgroundColor: 'rgb(191 219 254)' },
            { backgroundColor: 'rgb(96 165 250)' },
            { backgroundColor: 'rgb(37 99 235)' },
            { backgroundColor: 'rgb(30 64 175)' },
          ].map((s, i) => (
            <div key={i} className="w-3 h-3 rounded-sm" style={s} />
          ))}
          <span>more</span>
        </div>
      </div>
      <div className="flex gap-1">
        {/* Day-of-week labels */}
        <div className="flex flex-col gap-0.5 mr-0.5">
          {dayLabels.map((l, i) => (
            <div key={i} className="h-3.5 w-3 text-[9px] text-muted-foreground leading-[14px]">{l}</div>
          ))}
        </div>
        {/* Week columns */}
        <div className="flex gap-0.5 flex-1 overflow-x-auto">
          {weeks.map((week, wi) => (
            <div key={wi} className="flex flex-col gap-0.5">
              {week.map((date, di) => {
                if (!date) return <div key={di} className="w-3.5 h-3.5" />;
                const idx = days.indexOf(date);
                const score = idx >= 0 ? scores[idx] : 0;
                return (
                  <div
                    key={di}
                    className="w-3.5 h-3.5 rounded-sm cursor-default"
                    style={getStyle(score)}
                    title={getTooltip(date, score)}
                  />
                );
              })}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function ActivityBubbles({ metrics }: {
  metrics: Array<{
    label: string;
    sub: string;
    value: number;
    peerMax: number;
    prevValue: number | null;
    color: string;
    bg: string;
    border: string;
  }>;
}) {
  const minPx = 68;
  const maxPx = 128;

  return (
    <div className="flex flex-wrap gap-4 items-end justify-start py-1">
      {metrics.map((m, i) => {
        const ratio = m.peerMax > 0 ? Math.min(m.value / m.peerMax, 1) : 0;
        const size = Math.round(minPx + (maxPx - minPx) * Math.sqrt(ratio));
        const opacity = ratio < 0.04 ? 0.35 : 1;

        // Trend
        const hasTrend = m.prevValue !== null && m.prevValue >= 0;
        const delta = hasTrend ? m.value - m.prevValue! : 0;
        const pct = hasTrend && m.prevValue! > 0
          ? Math.round((delta / m.prevValue!) * 100)
          : null;
        const trendUp = delta > 0;
        const trendDown = delta < 0;
        const trendColor = trendUp ? '#16a34a' : trendDown ? '#dc2626' : '#6b7280';
        const trendArrow = trendUp ? '▲' : trendDown ? '▼' : '▸';
        const trendLabel = pct !== null
          ? `${trendArrow} ${Math.abs(pct)}%`
          : delta !== 0 ? `${trendArrow} ${Math.abs(delta)}` : '—';

        // Peer rank label
        const peerPct = m.peerMax > 0 ? Math.round((m.value / m.peerMax) * 100) : 0;

        return (
          <div key={i} className="flex flex-col items-center gap-1.5">
            <div
              className="flex flex-col items-center justify-center rounded-full shrink-0 transition-all relative"
              style={{
                width: size,
                height: size,
                backgroundColor: m.bg,
                border: `2px solid ${m.border}`,
                opacity,
              }}
              title={`${m.label}: ${m.value} · Peer max: ${m.peerMax}${m.sub ? ' · ' + m.sub : ''}`}
            >
              <span className="text-[9px] font-semibold uppercase tracking-wide leading-none mb-0.5 opacity-70" style={{ color: m.color }}>{m.label}</span>
              <span className="text-xl font-bold tabular-nums leading-none" style={{ color: m.color }}>{m.value}</span>
              {m.sub && <span className="text-[9px] leading-none mt-0.5 opacity-75" style={{ color: m.color }}>{m.sub}</span>}
              {/* Peer percentile arc indicator */}
              <span
                className="absolute bottom-1.5 text-[8px] font-medium opacity-60"
                style={{ color: m.color }}
              >
                {peerPct}% of top
              </span>
            </div>
            {/* Trend pill below bubble */}
            {hasTrend && (
              <span
                className="text-[10px] font-semibold px-1.5 py-0.5 rounded-full"
                style={{
                  color: trendColor,
                  backgroundColor: trendUp ? 'rgba(22,163,74,0.12)' : trendDown ? 'rgba(220,38,38,0.12)' : 'rgba(107,114,128,0.12)',
                }}
              >
                {trendLabel}
              </span>
            )}
          </div>
        );
      })}
    </div>
  );
}

function formatDuration(seconds: number | null): string {
  if (!seconds || seconds <= 0) return '—';
  if (seconds < 60) return `${seconds}s`;
  const m = Math.floor(seconds / 60);
  if (m < 60) return `${m}m`;
  const h = Math.floor(m / 60);
  const rem = m % 60;
  return rem > 0 ? `${h}h ${rem}m` : `${h}h`;
}

function timeAgo(dateStr: string | null): string {
  if (!dateStr) return 'Never';
  const diff = Date.now() - new Date(dateStr).getTime();
  const minutes = Math.floor(diff / 60000);
  if (minutes < 1) return 'Just now';
  if (minutes < 60) return `${minutes}m ago`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours}h ago`;
  return `${Math.floor(hours / 24)}d ago`;
}

function NotConfiguredBanner() {
  return (
    <Card className="border-amber-500/50 bg-amber-50 dark:bg-amber-950/20">
      <CardContent className="pt-6">
        <div className="flex gap-3">
          <AlertCircle className="h-5 w-5 text-amber-600 shrink-0 mt-0.5" />
          <div>
            <p className="font-medium text-amber-800 dark:text-amber-300">Microsoft Graph not configured</p>
            <p className="text-sm text-amber-700 dark:text-amber-400 mt-1">
              Add <code className="bg-amber-100 dark:bg-amber-900 px-1 rounded text-xs">MSGRAPH_CLIENT_ID</code>,{' '}
              <code className="bg-amber-100 dark:bg-amber-900 px-1 rounded text-xs">MSGRAPH_CLIENT_SECRET</code>, and{' '}
              <code className="bg-amber-100 dark:bg-amber-900 px-1 rounded text-xs">MSGRAPH_TENANT_ID</code> to your environment to enable engagement data.
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}

function SummaryCard({
  title,
  value,
  sub,
  icon: Icon,
}: {
  title: string;
  value: string | number;
  sub?: string;
  icon: React.ElementType;
}) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
        <CardTitle className="text-sm font-medium">{title}</CardTitle>
        <Icon className="h-4 w-4 text-muted-foreground" />
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
        {sub && <p className="text-xs text-muted-foreground mt-1">{sub}</p>}
      </CardContent>
    </Card>
  );
}

export default function EngagementPage() {
  const [period, setPeriod] = useState<'D7' | 'D30' | 'D90'>('D7');
  const [activeTab, setActiveTab] = useState<'overview' | 'by-employee'>('by-employee');
  const [summary, setSummary] = useState<SummaryData | null>(null);
  const [users, setUsers] = useState<UserRow[]>([]);
  const [pagination, setPagination] = useState<Pagination | null>(null);
  const [currentPage, setCurrentPage] = useState(1);
  const [sortField, setSortField] = useState('billable_hours');
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('desc');
  const [loading, setLoading] = useState(true);
  const [usersLoading, setUsersLoading] = useState(false);
  const [syncing, setSyncing] = useState(false);
  const [selectedUser, setSelectedUser] = useState<string | null>(null);
  const [userDetail, setUserDetail] = useState<UserDetail | null>(null);
  const [detailLoading, setDetailLoading] = useState(false);
  const [zoomDetailView, setZoomDetailView] = useState<'summary' | 'calls' | 'meetings'>('summary');
  const [teamsDetailView, setTeamsDetailView] = useState<'summary' | 'meetings'>('summary');

  const fetchSummary = useCallback(async () => {
    try {
      const res = await fetch(`/api/engagement/summary?period=${period}`);
      const data = await res.json();
      setSummary(data);
    } catch (error) {
      console.error('Failed to fetch engagement summary:', error);
    }
  }, [period]);

  const fetchUsers = useCallback(async () => {
    setUsersLoading(true);
    try {
      const res = await fetch(
        `/api/engagement/users?period=${period}&sort=${sortField}&order=${sortOrder}&page=${currentPage}`
      );
      const data = await res.json();
      setUsers(data.users ?? []);
      setPagination(data.pagination ?? null);
    } catch (error) {
      console.error('Failed to fetch engagement users:', error);
    } finally {
      setUsersLoading(false);
    }
  }, [period, sortField, sortOrder, currentPage]);

  const fetchAll = useCallback(async () => {
    setLoading(true);
    await Promise.all([fetchSummary(), fetchUsers()]);
    setLoading(false);
  }, [fetchSummary, fetchUsers]);

  useEffect(() => {
    fetchAll();
  }, [fetchAll]);

  const handleSync = async () => {
    setSyncing(true);
    try {
      await fetch('/api/engagement/sync', { method: 'POST' });
      const poll = setInterval(async () => {
        const res = await fetch('/api/engagement/sync').then(r => r.json());
        if (!res.isSyncing) {
          clearInterval(poll);
          setSyncing(false);
          fetchAll();
        }
      }, 3000);
      setTimeout(() => {
        clearInterval(poll);
        setSyncing(false);
        fetchAll();
      }, 300000);
    } catch {
      setSyncing(false);
    }
  };

  const handleUserClick = async (userId: string) => {
    setSelectedUser(userId);
    setDetailLoading(true);
    try {
      const res = await fetch(`/api/engagement/user/${userId}?period=${period}`);
      const data = await res.json();
      setUserDetail(data);
    } catch (error) {
      console.error('Failed to fetch user detail:', error);
    } finally {
      setDetailLoading(false);
    }
  };

  const handleSort = (field: string) => {
    if (sortField === field) {
      setSortOrder(o => (o === 'desc' ? 'asc' : 'desc'));
    } else {
      setSortField(field);
      setSortOrder('desc');
    }
    setCurrentPage(1);
  };

  // Prepare chart data — top 10 by billable hours
  const topByHours = [...users]
    .sort((a, b) => b.billableHours - a.billableHours)
    .slice(0, 10)
    .map(u => ({
      name: u.displayName?.split(' ')[0] ?? u.email,
      'Billable Hours': parseFloat(u.billableHours.toFixed(1)),
      'Non-Billable': parseFloat((u.hoursWorked - u.billableHours).toFixed(1)),
    }));

  const topByTeams = [...users]
    .sort((a, b) => (b.teamsMessages + b.meetingsAttended) - (a.teamsMessages + a.meetingsAttended))
    .slice(0, 7)
    .map(u => ({
      name: u.displayName?.split(' ')[0] ?? u.email,
      Meetings: u.meetingsAttended,
      Messages: u.teamsMessages,
    }));

  const periodLabel = { D7: '7 days', D30: '30 days', D90: '90 days' }[period];

  if (loading) {
    return (
      <div className="container mx-auto px-6 py-6 space-y-6">
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {[...Array(4)].map((_, i) => <Skeleton key={i} className="h-24" />)}
        </div>
        <Skeleton className="h-80" />
      </div>
    );
  }

  return (
    <div className="container mx-auto px-6 py-6 space-y-6">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">Employee Engagement</h1>
          <p className="text-muted-foreground text-sm mt-1">
            Staff activity across Autotask, Microsoft Teams, and Email
          </p>
        </div>
        <div className="flex items-center gap-3">
          {summary?.lastSynced && (
            <span className="text-sm text-muted-foreground">
              Last sync: {timeAgo(summary.lastSynced)}
            </span>
          )}
          <Button
            variant="outline"
            size="sm"
            onClick={handleSync}
            disabled={syncing || !summary?.configured}
          >
            <RefreshCw className={`h-4 w-4 mr-2 ${syncing ? 'animate-spin' : ''}`} />
            {syncing ? 'Syncing…' : 'Sync Now'}
          </Button>
        </div>
      </div>

      {summary && !summary.configured && <NotConfiguredBanner />}

      {/* Period selector */}
      <div className="flex gap-2">
        {(['D7', 'D30', 'D90'] as const).map(p => (
          <Button
            key={p}
            variant={period === p ? 'default' : 'outline'}
            size="sm"
            onClick={() => { setPeriod(p); setCurrentPage(1); }}
          >
            {{ D7: '7 days', D30: '30 days', D90: '90 days' }[p]}
          </Button>
        ))}
      </div>

      <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'overview' | 'by-employee')} className="space-y-6">
        <TabsList>
          <TabsTrigger value="overview">Overview</TabsTrigger>
          <TabsTrigger value="by-employee">By Employee</TabsTrigger>
        </TabsList>

        {/* ── Overview Tab ── */}
        <TabsContent value="overview" className="space-y-6">
          {/* Summary cards */}
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
            <SummaryCard
              title="Total Staff"
              value={summary?.totalStaff ?? 0}
              sub="Active Azure AD accounts"
              icon={Users}
            />
            <SummaryCard
              title={`Active (${periodLabel})`}
              value={summary?.activeThisPeriod ?? 0}
              sub="Had Teams or email activity"
              icon={TrendingUp}
            />
            <SummaryCard
              title="Avg Billable Hours"
              value={summary?.avgBillableHours ?? '—'}
              sub={`Per person over ${periodLabel}`}
              icon={Clock}
            />
            <SummaryCard
              title="Avg Meetings Attended"
              value={summary?.avgTeamsMeetings ?? '—'}
              sub={`Teams meetings over ${periodLabel}`}
              icon={Video}
            />
          </div>

          {/* Charts */}
          <div className="grid gap-6 lg:grid-cols-2">
            <Card>
              <CardHeader>
                <CardTitle className="text-base">Top 10 — Billable Hours</CardTitle>
              </CardHeader>
              <CardContent>
                {topByHours.length === 0 ? (
                  <p className="text-sm text-muted-foreground text-center py-8">No data yet — run a sync first</p>
                ) : (
                  <ResponsiveContainer width="100%" height={280}>
                    <BarChart data={topByHours} margin={{ top: 4, right: 8, bottom: 24, left: 0 }}>
                      <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
                      <XAxis dataKey="name" tick={{ fontSize: 11 }} angle={-30} textAnchor="end" />
                      <YAxis tick={{ fontSize: 11 }} />
                      <Tooltip />
                      <Legend />
                      <Bar dataKey="Billable Hours" stackId="a" fill="var(--primary)" />
                      <Bar dataKey="Non-Billable" stackId="a" fill="var(--muted-foreground)" />
                    </BarChart>
                  </ResponsiveContainer>
                )}
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle className="text-base">Top 7 — Teams Activity</CardTitle>
              </CardHeader>
              <CardContent>
                {topByTeams.length === 0 ? (
                  <p className="text-sm text-muted-foreground text-center py-8">No data yet — run a sync first</p>
                ) : (
                  <ResponsiveContainer width="100%" height={280}>
                    <BarChart data={topByTeams} margin={{ top: 4, right: 40, bottom: 24, left: 0 }}>
                      <CartesianGrid strokeDasharray="3 3" className="stroke-border" />
                      <XAxis dataKey="name" tick={{ fontSize: 11 }} angle={-30} textAnchor="end" />
                      <YAxis yAxisId="msg" tick={{ fontSize: 11 }} />
                      <YAxis yAxisId="mtg" orientation="right" tick={{ fontSize: 11 }} />
                      <Tooltip />
                      <Legend />
                      <Bar yAxisId="msg" dataKey="Messages" fill="#10b981" />
                      <Bar yAxisId="mtg" dataKey="Meetings" fill="#6366f1" />
                    </BarChart>
                  </ResponsiveContainer>
                )}
              </CardContent>
            </Card>
          </div>
        </TabsContent>

        {/* ── By Employee Tab ── */}
        <TabsContent value="by-employee" className="space-y-4">
          <Card>
            <CardContent className="pt-0">
              {usersLoading ? (
                <div className="space-y-2 pt-4">
                  {[...Array(8)].map((_, i) => <Skeleton key={i} className="h-10" />)}
                </div>
              ) : users.length === 0 ? (
                <div className="text-center py-12 text-muted-foreground">
                  <Users className="h-10 w-10 mx-auto mb-3 opacity-30" />
                  <p className="text-sm">No engagement data yet — run a sync first</p>
                </div>
              ) : (
                <>
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead
                          className="cursor-pointer hover:text-foreground"
                          onClick={() => handleSort('display_name')}
                        >
                          Name {sortField === 'display_name' && (sortOrder === 'desc' ? '↓' : '↑')}
                        </TableHead>
                        <TableHead className="hidden md:table-cell">Title</TableHead>
                        <TableHead
                          className="cursor-pointer hover:text-foreground text-right"
                          onClick={() => handleSort('hours_worked')}
                        >
                          Hours {sortField === 'hours_worked' && (sortOrder === 'desc' ? '↓' : '↑')}
                        </TableHead>
                        <TableHead
                          className="cursor-pointer hover:text-foreground text-right"
                          onClick={() => handleSort('billable_hours')}
                        >
                          Billable {sortField === 'billable_hours' && (sortOrder === 'desc' ? '↓' : '↑')}
                        </TableHead>
                        <TableHead
                          className="cursor-pointer hover:text-foreground text-right hidden lg:table-cell"
                          onClick={() => handleSort('teams_meetings_attended')}
                        >
                          Meetings {sortField === 'teams_meetings_attended' && (sortOrder === 'desc' ? '↓' : '↑')}
                        </TableHead>
                        <TableHead className="text-right hidden lg:table-cell text-muted-foreground text-xs">
                          Ext. Mtgs
                        </TableHead>
                        <TableHead className="text-right hidden xl:table-cell text-muted-foreground text-xs">
                          Mtg Hrs
                        </TableHead>
                        <TableHead
                          className="cursor-pointer hover:text-foreground text-right hidden xl:table-cell"
                          onClick={() => handleSort('teams_chat_messages')}
                        >
                          Messages {sortField === 'teams_chat_messages' && (sortOrder === 'desc' ? '↓' : '↑')}
                        </TableHead>
                        <TableHead
                          className="cursor-pointer hover:text-foreground text-right hidden xl:table-cell"
                          onClick={() => handleSort('emails_sent')}
                        >
                          Emails {sortField === 'emails_sent' && (sortOrder === 'desc' ? '↓' : '↑')}
                        </TableHead>
                        <TableHead className="text-right hidden xl:table-cell">Last Active</TableHead>
                        <TableHead className="text-right hidden xl:table-cell text-muted-foreground text-xs">Zoom Calls</TableHead>
                        <TableHead className="text-right hidden xl:table-cell text-muted-foreground text-xs">Zoom Mtgs</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {users.map(user => (
                        <TableRow
                          key={user.graphUserId}
                          className="cursor-pointer hover:bg-muted/50"
                          onClick={() => handleUserClick(user.graphUserId)}
                        >
                          <TableCell>
                            <div className="font-medium">{user.displayName}</div>
                            <div className="text-xs text-muted-foreground">{user.email}</div>
                          </TableCell>
                          <TableCell className="hidden md:table-cell text-sm text-muted-foreground">
                            {user.jobTitle || '—'}
                          </TableCell>
                          <TableCell className="text-right text-sm tabular-nums">
                            {user.hoursWorked.toFixed(1)}
                          </TableCell>
                          <TableCell className="text-right text-sm tabular-nums">
                            {user.billableHours > 0 ? (
                              <span className="text-green-600 dark:text-green-400 font-medium">
                                {user.billableHours.toFixed(1)}
                              </span>
                            ) : (
                              <span className="text-muted-foreground">0.0</span>
                            )}
                          </TableCell>
                          <TableCell className="text-right text-sm tabular-nums hidden lg:table-cell">
                            {user.meetingsAttended}
                          </TableCell>
                          <TableCell className="text-right text-sm tabular-nums hidden lg:table-cell">
                            {user.meetingsWithExternal > 0 ? (
                              <span className="text-blue-600 dark:text-blue-400 font-medium">
                                {user.meetingsWithExternal}
                              </span>
                            ) : (
                              <span className="text-muted-foreground">—</span>
                            )}
                          </TableCell>
                          <TableCell className="text-right text-sm tabular-nums hidden xl:table-cell">
                            {user.audioDurationSeconds > 0
                              ? (user.audioDurationSeconds / 3600).toFixed(1) + 'h'
                              : <span className="text-muted-foreground">—</span>}
                          </TableCell>
                          <TableCell className="text-right text-sm tabular-nums hidden xl:table-cell">
                            {user.teamsMessages}
                          </TableCell>
                          <TableCell className="text-right text-sm tabular-nums hidden xl:table-cell">
                            {user.emailsSent}
                          </TableCell>
                          <TableCell className="text-right text-xs text-muted-foreground hidden xl:table-cell">
                            {user.lastActivity
                              ? new Date(user.lastActivity).toLocaleDateString()
                              : '—'}
                          </TableCell>
                          <TableCell className="text-right text-sm tabular-nums hidden xl:table-cell">
                            {user.zoomCallCount > 0 ? (
                              <span>
                                {user.zoomCallCount}
                                {user.zoomClientCallCount > 0 && (
                                  <span className="text-blue-600 dark:text-blue-400 ml-1 text-xs">
                                    ({user.zoomClientCallCount}c)
                                  </span>
                                )}
                              </span>
                            ) : (
                              <span className="text-muted-foreground">—</span>
                            )}
                          </TableCell>
                          <TableCell className="text-right text-sm tabular-nums hidden xl:table-cell">
                            {user.zoomMeetingCount > 0 ? (
                              <span>
                                {user.zoomMeetingCount}
                                {user.zoomClientMeetingCount > 0 && (
                                  <span className="text-blue-600 dark:text-blue-400 ml-1 text-xs">
                                    ({user.zoomClientMeetingCount}c)
                                  </span>
                                )}
                              </span>
                            ) : (
                              <span className="text-muted-foreground">—</span>
                            )}
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>

                  {/* Pagination */}
                  {pagination && pagination.totalPages > 1 && (
                    <div className="flex items-center justify-between pt-4">
                      <p className="text-sm text-muted-foreground">
                        Showing {(pagination.page - 1) * pagination.pageSize + 1}–
                        {Math.min(pagination.page * pagination.pageSize, pagination.total)} of {pagination.total}
                      </p>
                      <div className="flex gap-1">
                        <Button
                          variant="outline"
                          size="sm"
                          disabled={currentPage === 1}
                          onClick={() => setCurrentPage(p => p - 1)}
                        >
                          <ChevronLeft className="h-4 w-4" />
                        </Button>
                        <Button
                          variant="outline"
                          size="sm"
                          disabled={currentPage === pagination.totalPages}
                          onClick={() => setCurrentPage(p => p + 1)}
                        >
                          <ChevronRight className="h-4 w-4" />
                        </Button>
                      </div>
                    </div>
                  )}
                </>
              )}
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>

      {/* User detail modal */}
      <Dialog open={!!selectedUser} onOpenChange={() => { setSelectedUser(null); setUserDetail(null); setZoomDetailView('summary'); setTeamsDetailView('summary'); }}>
        <DialogContent className="w-[90vw] max-w-4xl flex flex-col p-0 gap-0" style={{ maxHeight: '90vh' }}>
          <DialogHeader className="shrink-0 px-6 pt-6 pb-4 border-b">
            <DialogTitle>
              {detailLoading ? 'Loading…' : userDetail?.user.displayName ?? 'User Detail'}
            </DialogTitle>
          </DialogHeader>

          <div className="flex-1 overflow-y-auto px-6 pb-6 pr-8">
          {detailLoading && (
            <div className="space-y-3 p-2">
              {[...Array(4)].map((_, i) => <Skeleton key={i} className="h-10" />)}
            </div>
          )}

          {!detailLoading && userDetail && (() => {
              const pKey = period.toLowerCase() as 'd7' | 'd30' | 'd90';
              const snapKey = period as 'D7' | 'D30' | 'D90';
              const periodLabel = { D7: '7 days', D30: '30 days', D90: '90 days' }[snapKey];
              const snap = userDetail.snapshots.find(s => s.period_type === snapKey);
              const hrs = userDetail.hours?.[pKey];
              return (
            <div className="space-y-5 pt-4">
              {/* Compact user info + key stats row */}
              <div className="grid grid-cols-2 md:grid-cols-4 gap-x-6 gap-y-3 text-sm">
                <div className="md:col-span-2">
                  <p className="text-xs text-muted-foreground uppercase tracking-wide mb-0.5">Email</p>
                  <p className="font-medium">{userDetail.user.email}</p>
                </div>
                <div>
                  <p className="text-xs text-muted-foreground uppercase tracking-wide mb-0.5">Title</p>
                  <p className="font-medium">{userDetail.user.jobTitle || '—'}</p>
                </div>
                <div>
                  <p className="text-xs text-muted-foreground uppercase tracking-wide mb-0.5">Department</p>
                  <p className="font-medium">{userDetail.user.department || '—'}</p>
                </div>
              </div>

              {/* Activity bubble visualization */}
              <div className="rounded-lg border p-4 bg-muted/30">
                <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-3">{periodLabel} — Activity vs. Team</p>
                <ActivityBubbles metrics={[
                  ...(hrs ? [{
                    label: 'Hours',
                    sub: `${hrs.billable.toFixed(0)}h billable`,
                    value: Math.round(hrs.total * 10) / 10,
                    peerMax: userDetail.peerMax?.hours || (period === 'D7' ? 40 : period === 'D30' ? 160 : 480),
                    prevValue: userDetail.trend?.hours ?? null,
                    color: '#16a34a',
                    bg: 'rgba(22,163,74,0.12)',
                    border: 'rgba(22,163,74,0.4)',
                  }] : []),
                  ...(hrs && hrs.total > 0 ? [{
                    label: 'Billable%',
                    sub: `${hrs.billable.toFixed(0)}h of ${hrs.total.toFixed(0)}h`,
                    value: Math.round((hrs.billable / hrs.total) * 100),
                    peerMax: 100,
                    prevValue: userDetail.trend?.hours > 0
                      ? Math.round((userDetail.trend.billable / userDetail.trend.hours) * 100)
                      : null,
                    color: '#0d9488',
                    bg: 'rgba(13,148,136,0.12)',
                    border: 'rgba(13,148,136,0.4)',
                  }] : []),
                  {
                    label: 'Meetings',
                    sub: userDetail.meetingCounts.withClients > 0 ? `${userDetail.meetingCounts.withClients} w/clients` : '',
                    value: userDetail.meetingCounts.total,
                    peerMax: userDetail.peerMax?.meetings || (period === 'D7' ? 20 : period === 'D30' ? 60 : 180),
                    prevValue: userDetail.trend?.meetings ?? null,
                    color: '#2563eb',
                    bg: 'rgba(37,99,235,0.12)',
                    border: 'rgba(37,99,235,0.4)',
                  },
                  ...(snap ? [{
                    label: 'Messages',
                    sub: `${snap.emails_sent} emails`,
                    value: snap.teams_chat_messages + snap.teams_private_messages,
                    peerMax: userDetail.peerMax?.messages || (period === 'D7' ? 200 : period === 'D30' ? 800 : 2400),
                    prevValue: null,
                    color: '#7c3aed',
                    bg: 'rgba(124,58,237,0.12)',
                    border: 'rgba(124,58,237,0.4)',
                  }] : []),
                  ...(userDetail.zoom && userDetail.zoom.calls[pKey].total > 0 ? [{
                    label: 'Calls',
                    sub: `${userDetail.zoom.calls[pKey].client} client`,
                    value: userDetail.zoom.calls[pKey].total,
                    peerMax: userDetail.peerMax?.calls || (period === 'D7' ? 30 : period === 'D30' ? 100 : 300),
                    prevValue: userDetail.trend?.calls ?? null,
                    color: '#ea580c',
                    bg: 'rgba(234,88,12,0.12)',
                    border: 'rgba(234,88,12,0.4)',
                  }] : []),
                ]} />
                {snap?.last_activity_date && (
                  <p className="text-xs text-muted-foreground mt-3">Last activity: {new Date(snap.last_activity_date).toLocaleDateString()}</p>
                )}
              </div>

              {/* Activity heatmap */}
              {userDetail.dailyActivity?.length > 0 && (
                <ActivityHeatmap
                  data={userDetail.dailyActivity}
                  periodDays={period === 'D7' ? 7 : period === 'D90' ? 90 : 30}
                />
              )}

              {/* After Hours Activity */}
              {(userDetail.afterHours?.messages > 0 || userDetail.afterHours?.meetings > 0) && (() => {
                const ah = userDetail.afterHours;
                const highThreshold = 30; // % of activity that's after-hours to trigger warning
                const isHigh = ah.messagesPct >= highThreshold || ah.meetingsPct >= highThreshold;
                return (
                  <div className={`rounded-lg border p-4 ${isHigh ? 'border-amber-400/60 bg-amber-50/50 dark:bg-amber-950/20' : 'bg-muted/20'}`}>
                    <div className="flex items-center justify-between mb-3">
                      <h3 className="font-medium text-sm flex items-center gap-2">
                        <Moon className={`h-4 w-4 ${isHigh ? 'text-amber-500' : 'text-muted-foreground'}`} />
                        After Hours Activity
                        <span className="text-xs font-normal text-muted-foreground">(5:30 PM – 7:00 AM ET)</span>
                      </h3>
                      {isHigh && (
                        <Badge variant="outline" className="text-xs border-amber-400 text-amber-600 dark:text-amber-400">
                          High after-hours
                        </Badge>
                      )}
                    </div>
                    <div className="grid grid-cols-2 gap-4">
                      <div>
                        <p className="text-xs text-muted-foreground mb-0.5">Teams Messages</p>
                        <div className="flex items-baseline gap-2">
                          <span className={`text-2xl font-bold tabular-nums ${isHigh && ah.messagesPct >= highThreshold ? 'text-amber-600 dark:text-amber-400' : ''}`}>
                            {ah.messages}
                          </span>
                          {ah.messagesPct > 0 && (
                            <span className="text-xs text-muted-foreground">{ah.messagesPct}% of total</span>
                          )}
                        </div>
                        {ah.messages === 0 && (
                          <p className="text-xs text-muted-foreground mt-1">No after-hours messages — or Chat.Read.All permission not granted</p>
                        )}
                      </div>
                      <div>
                        <p className="text-xs text-muted-foreground mb-0.5">Meetings</p>
                        <div className="flex items-baseline gap-2">
                          <span className={`text-2xl font-bold tabular-nums ${isHigh && ah.meetingsPct >= highThreshold ? 'text-amber-600 dark:text-amber-400' : ''}`}>
                            {ah.meetings}
                          </span>
                          {ah.meetingsPct > 0 && (
                            <span className="text-xs text-muted-foreground">{ah.meetingsPct}% of total</span>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                );
              })()}

              {/* Teams meetings */}
              {userDetail.recentTeamsMeetings !== undefined && (
                <div>
                  <div className="flex items-center justify-between mb-3">
                    <h3 className="font-medium text-sm">Teams Meetings ({periodLabel})</h3>
                    {userDetail.recentTeamsMeetings.length > 0 && (
                      <Badge variant="outline" className="text-xs">
                        {userDetail.recentTeamsMeetings.length} shown
                        {userDetail.recentTeamsMeetings.filter(m => m.hasClientAttendees).length > 0 && (
                          <span className="text-blue-600 ml-1">
                            · {userDetail.recentTeamsMeetings.filter(m => m.hasClientAttendees).length} with clients
                          </span>
                        )}
                      </Badge>
                    )}
                  </div>
                  {userDetail.recentTeamsMeetings.length > 0 ? (
                    <div className="space-y-0 max-h-64 overflow-y-auto rounded-md border divide-y">
                      {[...userDetail.recentTeamsMeetings].sort((a, b) => {
                        const scoreA = (a.hasClientAttendees ? 2 : 0) + (a.matchedEntries?.length > 0 ? 1 : 0);
                        const scoreB = (b.hasClientAttendees ? 2 : 0) + (b.matchedEntries?.length > 0 ? 1 : 0);
                        return scoreB - scoreA || new Date(b.startTime).getTime() - new Date(a.startTime).getTime();
                      }).map((mtg, i) => {
                        const d = new Date(mtg.startTime);
                        return (
                          <div key={i} className="px-3 py-2 text-sm hover:bg-muted/30">
                            <div className="flex items-start justify-between gap-2">
                              <div className="flex items-center gap-2 min-w-0">
                                <span className="font-medium leading-snug truncate">{mtg.subject || 'Untitled'}</span>
                                {mtg.hasClientAttendees && (
                                  <Badge variant="outline" className="text-xs h-4 px-1 shrink-0 text-blue-600 border-blue-400">client</Badge>
                                )}
                              </div>
                              <span className="text-xs text-muted-foreground shrink-0">
                                {d.toLocaleDateString()} {d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                {mtg.durationMinutes != null && ` · ${mtg.durationMinutes}m`}
                              </span>
                            </div>
                            {mtg.clientCompanies.length > 0 && (
                              <p className="text-xs text-blue-600 dark:text-blue-400 mt-0.5 truncate">{mtg.clientCompanies.join(', ')}</p>
                            )}
                            {mtg.matchedEntries?.length > 0 && (
                              <div className="mt-1.5 space-y-0.5">
                                {mtg.matchedEntries.map((te, j) => (
                                  <div key={j} className="flex items-center gap-2 text-xs bg-muted/50 rounded px-2 py-1">
                                    <Clock className="h-3 w-3 text-muted-foreground shrink-0" />
                                    <span className="font-medium tabular-nums">{Number(te.hours_worked).toFixed(1)}h</span>
                                    {te.billable && <span className="text-green-600 dark:text-green-400">billable</span>}
                                    {te.company_name && <span className="text-muted-foreground">{te.company_name}</span>}
                                    {(te.notes || te.title) && (
                                      <span className="text-muted-foreground truncate">{(te.notes || te.title || '').split('\n')[0]}</span>
                                    )}
                                  </div>
                                ))}
                              </div>
                            )}
                          </div>
                        );
                      })}
                    </div>
                  ) : (
                    <p className="text-sm text-muted-foreground py-3">No meetings found in the last {periodLabel}</p>
                  )}
                </div>
              )}


              {/* Zoom Activity */}
              {userDetail.zoom && (userDetail.zoom.calls[pKey].total > 0 || userDetail.zoom.meetings[pKey].total > 0) && (
                <div>
                  <div className="flex items-center justify-between mb-3">
                    <h3 className="font-medium text-sm flex items-center gap-2">
                      <Phone className="h-4 w-4 text-muted-foreground" />
                      Zoom Activity
                    </h3>
                    <div className="flex gap-1">
                      {(['summary', 'calls', 'meetings'] as const).map(v => (
                        <Button
                          key={v}
                          variant={zoomDetailView === v ? 'default' : 'outline'}
                          size="sm"
                          className="h-6 text-xs px-2"
                          onClick={() => setZoomDetailView(v)}
                        >
                          {{ summary: 'Summary', calls: 'Calls', meetings: 'Meetings' }[v]}
                        </Button>
                      ))}
                    </div>
                  </div>

                  {/* Summary view */}
                  {zoomDetailView === 'summary' && (() => {
                        const calls = userDetail.zoom!.calls[pKey];
                        const meetings = userDetail.zoom!.meetings[pKey];
                        return (
                          <div className="rounded-lg border p-3">
                            <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 text-sm">
                              <div className="flex items-center gap-1">
                                <Phone className="h-3.5 w-3.5 text-muted-foreground" />
                                <span>{calls.total} calls</span>
                              </div>
                              {calls.client > 0 && (
                                <div className="flex items-center gap-1">
                                  <Users className="h-3.5 w-3.5 text-blue-500" />
                                  <span className="text-blue-600 dark:text-blue-400">{calls.client} client calls</span>
                                </div>
                              )}
                              {calls.durationSeconds > 0 && (
                                <div className="flex items-center gap-1">
                                  <Clock className="h-3.5 w-3.5 text-muted-foreground" />
                                  <span>{(calls.durationSeconds / 3600).toFixed(1)}h on calls</span>
                                </div>
                              )}
                              <div className="flex items-center gap-1">
                                <Video className="h-3.5 w-3.5 text-muted-foreground" />
                                <span>{meetings.total} Zoom meetings</span>
                              </div>
                              {meetings.withClients > 0 && (
                                <div className="flex items-center gap-1">
                                  <Users className="h-3.5 w-3.5 text-blue-500" />
                                  <span className="text-blue-600 dark:text-blue-400">{meetings.withClients} with clients</span>
                                </div>
                              )}
                              <div className="text-xs text-muted-foreground">
                                {calls.outbound}↑ {calls.inbound}↓
                              </div>
                            </div>
                          </div>
                        );
                  })()}

                  {/* Calls detail view */}
                  {zoomDetailView === 'calls' && (
                    <div className="space-y-1 max-h-64 overflow-y-auto">
                      {userDetail.zoom.recentCalls.length === 0 ? (
                        <p className="text-sm text-muted-foreground py-4 text-center">No calls in the last 90 days</p>
                      ) : userDetail.zoom.recentCalls.map((call, i) => (
                        <div key={i} className="flex items-center justify-between text-sm py-1.5 border-b last:border-0">
                          <div className="min-w-0 flex items-center gap-2">
                            <span className="text-muted-foreground text-xs w-3 shrink-0">
                              {call.direction === 'outbound' ? '↑' : '↓'}
                            </span>
                            <div className="min-w-0">
                              <span className="font-medium truncate">
                                {call.otherPartyName || call.otherPartyNumber || 'Unknown'}
                              </span>
                              {call.companyName && (
                                <span className="text-muted-foreground"> · {call.companyName}</span>
                              )}
                            </div>
                          </div>
                          <div className="flex items-center gap-2 shrink-0 ml-2 text-xs text-muted-foreground">
                            <span>{formatDuration(call.durationSeconds)}</span>
                            <span>{new Date(call.startTime).toLocaleDateString()}</span>
                          </div>
                        </div>
                      ))}
                    </div>
                  )}

                  {/* Meetings detail view */}
                  {zoomDetailView === 'meetings' && (
                    <div className="space-y-0 max-h-64 overflow-y-auto rounded-md border divide-y">
                      {userDetail.zoom.recentMeetings.length === 0 ? (
                        <p className="text-sm text-muted-foreground py-4 text-center">No meetings in the last {periodLabel}</p>
                      ) : [...userDetail.zoom.recentMeetings].sort((a, b) => {
                          const scoreA = (a.hasClientAttendees ? 2 : 0) + (a.matchedEntries?.length > 0 ? 1 : 0);
                          const scoreB = (b.hasClientAttendees ? 2 : 0) + (b.matchedEntries?.length > 0 ? 1 : 0);
                          return scoreB - scoreA || new Date(b.startTime).getTime() - new Date(a.startTime).getTime();
                        }).map((mtg, i) => {
                          const d = new Date(mtg.startTime);
                          return (
                            <div key={i} className="px-3 py-2 text-sm hover:bg-muted/30">
                              <div className="flex items-start justify-between gap-2">
                                <div className="flex items-center gap-2 min-w-0">
                                  <span className="font-medium leading-snug truncate">{mtg.topic || 'Untitled meeting'}</span>
                                  {mtg.hasClientAttendees && (
                                    <Badge variant="outline" className="text-xs h-4 px-1 shrink-0 text-blue-600 border-blue-400">client</Badge>
                                  )}
                                </div>
                                <span className="text-xs text-muted-foreground shrink-0">
                                  {d.toLocaleDateString()} {d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                                  {mtg.durationMinutes != null && ` · ${mtg.durationMinutes}m`}
                                </span>
                              </div>
                              {mtg.clientCompanies.length > 0 && (
                                <p className="text-xs text-blue-600 dark:text-blue-400 mt-0.5 truncate">{mtg.clientCompanies.join(', ')}</p>
                              )}
                              {mtg.externalParticipantNames.length > 0 && (
                                <p className="text-xs text-muted-foreground mt-0.5 truncate">
                                  {mtg.externalParticipantNames.slice(0, 4).join(', ')}
                                  {mtg.externalParticipantNames.length > 4 && ` +${mtg.externalParticipantNames.length - 4} more`}
                                </p>
                              )}
                              {mtg.matchedEntries?.length > 0 && (
                                <div className="mt-1.5 space-y-0.5">
                                  {mtg.matchedEntries.map((te, j) => (
                                    <div key={j} className="flex items-center gap-2 text-xs bg-muted/50 rounded px-2 py-1">
                                      <Clock className="h-3 w-3 text-muted-foreground shrink-0" />
                                      <span className="font-medium tabular-nums">{Number(te.hours_worked).toFixed(1)}h</span>
                                      {te.billable && <span className="text-green-600 dark:text-green-400">billable</span>}
                                      {te.company_name && <span className="text-muted-foreground">{te.company_name}</span>}
                                      {(te.notes || te.title) && (
                                        <span className="text-muted-foreground truncate">{(te.notes || te.title || '').split('\n')[0]}</span>
                                      )}
                                    </div>
                                  ))}
                                </div>
                              )}
                            </div>
                          );
                        })}
                    </div>
                  )}
                </div>
              )}

            </div>
          );
          })()}
          </div>
        </DialogContent>
      </Dialog>
    </div>
  );
}