---
import DashboardLayout from '../../layouts/DashboardLayout.astro';
import { Icon } from 'astro-icon/components';
import CategoryChart from '../../components/CategoryChart.vue';
import ClientChart from '../../components/ClientChart.vue';
import MemberChart from '../../components/MemberChart.vue';
import { db } from '../../db';
import { timeEntries, members, users, clients, categories, invoices } from '../../db/schema';
import { eq, and, gte, lte, sql, desc } from 'drizzle-orm';
import { formatDuration, formatTimeRange } from '../../lib/formatTime';

const user = Astro.locals.user;
if (!user) return Astro.redirect('/login');

// Get current team from cookie
const currentTeamId = Astro.cookies.get('currentTeamId')?.value;

const userMemberships = await db.select()
  .from(members)
  .where(eq(members.userId, user.id))
  .all();

if (userMemberships.length === 0) return Astro.redirect('/dashboard');

// Use current team or fallback to first membership
const userMembership = currentTeamId
  ? userMemberships.find(m => m.organizationId === currentTeamId) || userMemberships[0]
  : userMemberships[0];

const teamMembers = await db.select({
  id: users.id,
  name: users.name,
  email: users.email,
})
  .from(members)
  .innerJoin(users, eq(members.userId, users.id))
  .where(eq(members.organizationId, userMembership.organizationId))
  .all();

const allCategories = await db.select()
  .from(categories)
  .where(eq(categories.organizationId, userMembership.organizationId))
  .all();

const allClients = await db.select()
  .from(clients)
  .where(eq(clients.organizationId, userMembership.organizationId))
  .all();

const url = new URL(Astro.request.url);
const selectedMemberId = url.searchParams.get('member') || '';
const selectedCategoryId = url.searchParams.get('category') || '';
const selectedClientId = url.searchParams.get('client') || '';
const timeRange = url.searchParams.get('range') || 'week';
const customFrom = url.searchParams.get('from');
const customTo = url.searchParams.get('to');

const now = new Date();
let startDate = new Date();
let endDate = new Date();

switch (timeRange) {
  case 'today':
    startDate.setHours(0, 0, 0, 0);
    endDate.setHours(23, 59, 59, 999);
    break;
  case 'week':
    startDate.setDate(now.getDate() - 7);
    break;
  case 'month':
    startDate.setMonth(now.getMonth() - 1);
    break;
  case 'mtd':
    startDate = new Date(now.getFullYear(), now.getMonth(), 1);
    break;
  case 'ytd':
    startDate = new Date(now.getFullYear(), 0, 1);
    break;
  case 'last-month':
    startDate = new Date(now.getFullYear(), now.getMonth() - 1, 1);
    endDate = new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59, 999);
    break;
  case 'custom':
    if (customFrom) {
      const parts = customFrom.split('-');
      startDate = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]), 0, 0, 0, 0);
    }
    if (customTo) {
      const parts = customTo.split('-');
      endDate = new Date(parseInt(parts[0]), parseInt(parts[1]) - 1, parseInt(parts[2]), 23, 59, 59, 999);
    }
    break;
}

const conditions = [
  eq(timeEntries.organizationId, userMembership.organizationId),
  gte(timeEntries.startTime, startDate),
  lte(timeEntries.startTime, endDate),
];

if (selectedMemberId) {
  conditions.push(eq(timeEntries.userId, selectedMemberId));
}

if (selectedCategoryId) {
  conditions.push(eq(timeEntries.categoryId, selectedCategoryId));
}

if (selectedClientId) {
  conditions.push(eq(timeEntries.clientId, selectedClientId));
}

const entries = await db.select({
  entry: timeEntries,
  user: users,
  client: clients,
  category: categories,
})
  .from(timeEntries)
  .innerJoin(users, eq(timeEntries.userId, users.id))
  .innerJoin(clients, eq(timeEntries.clientId, clients.id))
  .innerJoin(categories, eq(timeEntries.categoryId, categories.id))
  .where(and(...conditions))
  .orderBy(desc(timeEntries.startTime))
  .all();

const statsByMember = teamMembers.map(member => {
  const memberEntries = entries.filter(e => e.user.id === member.id);
  const totalTime = memberEntries.reduce((sum, e) => {
    if (e.entry.endTime) {
      return sum + (e.entry.endTime.getTime() - e.entry.startTime.getTime());
    }
    return sum;
  }, 0);

  return {
    member,
    totalTime,
    entryCount: memberEntries.length,
  };
}).sort((a, b) => b.totalTime - a.totalTime);

const statsByCategory = allCategories.map(category => {
  const categoryEntries = entries.filter(e => e.category.id === category.id);
  const totalTime = categoryEntries.reduce((sum, e) => {
    if (e.entry.endTime) {
      return sum + (e.entry.endTime.getTime() - e.entry.startTime.getTime());
    }
    return sum;
  }, 0);

  return {
    category,
    totalTime,
    entryCount: categoryEntries.length,
  };
}).sort((a, b) => b.totalTime - a.totalTime);

const statsByClient = allClients.map(client => {
  const clientEntries = entries.filter(e => e.client.id === client.id);
  const totalTime = clientEntries.reduce((sum, e) => {
    if (e.entry.endTime) {
      return sum + (e.entry.endTime.getTime() - e.entry.startTime.getTime());
    }
    return sum;
  }, 0);

  return {
    client,
    totalTime,
    entryCount: clientEntries.length,
  };
}).sort((a, b) => b.totalTime - a.totalTime);

const totalTime = entries.reduce((sum, e) => {
  if (e.entry.endTime) {
    return sum + (e.entry.endTime.getTime() - e.entry.startTime.getTime());
  }
  return sum;
}, 0);

// Fetch invoices and quotes for the same time period
const invoiceConditions = [
  eq(invoices.organizationId, userMembership.organizationId),
  gte(invoices.issueDate, startDate),
  lte(invoices.issueDate, endDate),
];

if (selectedClientId) {
  invoiceConditions.push(eq(invoices.clientId, selectedClientId));
}

const allInvoices = await db.select({
  invoice: invoices,
  client: clients,
})
  .from(invoices)
  .leftJoin(clients, eq(invoices.clientId, clients.id))
  .where(and(...invoiceConditions))
  .orderBy(desc(invoices.issueDate))
  .all();

// Invoice statistics
const invoiceStats = {
  total: allInvoices.filter(i => i.invoice.type === 'invoice').length,
  paid: allInvoices.filter(i => i.invoice.type === 'invoice' && i.invoice.status === 'paid').length,
  sent: allInvoices.filter(i => i.invoice.type === 'invoice' && i.invoice.status === 'sent').length,
  draft: allInvoices.filter(i => i.invoice.type === 'invoice' && i.invoice.status === 'draft').length,
  void: allInvoices.filter(i => i.invoice.type === 'invoice' && i.invoice.status === 'void').length,
};

// Quote statistics
const quoteStats = {
  total: allInvoices.filter(i => i.invoice.type === 'quote').length,
  accepted: allInvoices.filter(i => i.invoice.type === 'quote' && i.invoice.status === 'accepted').length,
  sent: allInvoices.filter(i => i.invoice.type === 'quote' && i.invoice.status === 'sent').length,
  declined: allInvoices.filter(i => i.invoice.type === 'quote' && i.invoice.status === 'declined').length,
  draft: allInvoices.filter(i => i.invoice.type === 'quote' && i.invoice.status === 'draft').length,
};

// Revenue statistics
const revenueStats = {
  total: allInvoices
    .filter(i => i.invoice.type === 'invoice' && i.invoice.status === 'paid')
    .reduce((sum, i) => sum + i.invoice.total, 0),
  pending: allInvoices
    .filter(i => i.invoice.type === 'invoice' && i.invoice.status === 'sent')
    .reduce((sum, i) => sum + i.invoice.total, 0),
  quotedValue: allInvoices
    .filter(i => i.invoice.type === 'quote' && (i.invoice.status === 'sent' || i.invoice.status === 'accepted'))
    .reduce((sum, i) => sum + i.invoice.total, 0),
};

// Revenue by client
const revenueByClient = allClients.map(client => {
  const clientInvoices = allInvoices.filter(i =>
    i.client?.id === client.id &&
    i.invoice.type === 'invoice' &&
    i.invoice.status === 'paid'
  );
  const revenue = clientInvoices.reduce((sum, i) => sum + i.invoice.total, 0);

  return {
    client,
    revenue,
    invoiceCount: clientInvoices.length,
  };
}).filter(s => s.revenue > 0).sort((a, b) => b.revenue - a.revenue);

function formatCurrency(amount: number, currency: string = 'USD') {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: currency,
  }).format(amount / 100);
}

function getTimeRangeLabel(range: string) {
  switch (range) {
    case 'today': return 'Today';
    case 'week': return 'Last 7 Days';
    case 'month': return 'Last 30 Days';
    case 'mtd': return 'Month to Date';
    case 'ytd': return 'Year to Date';
    case 'last-month': return 'Last Month';
    case 'custom': return 'Custom Range';
    default: return 'Last 7 Days';
  }
}
---

<DashboardLayout title="Reports - Chronus">
  <h1 class="text-3xl font-bold mb-6">Team Reports</h1>

  <!-- Filters -->
  <div class="card bg-base-200 shadow-xl border border-base-300 mb-6">
    <div class="card-body">
      <form method="GET" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="form-control">
          <label class="label font-medium" for="reports-range">
            Time Range
          </label>
          <select id="reports-range" name="range" class="select select-bordered" onchange="this.form.submit()">
            <option value="today" selected={timeRange === 'today'}>Today</option>
            <option value="week" selected={timeRange === 'week'}>Last 7 Days</option>
            <option value="month" selected={timeRange === 'month'}>Last 30 Days</option>
            <option value="mtd" selected={timeRange === 'mtd'}>Month to Date</option>
            <option value="ytd" selected={timeRange === 'ytd'}>Year to Date</option>
            <option value="last-month" selected={timeRange === 'last-month'}>Last Month</option>
            <option value="custom" selected={timeRange === 'custom'}>Custom Range</option>
          </select>
        </div>

        {timeRange === 'custom' && (
          <>
            <div class="form-control">
              <label class="label font-medium" for="reports-from">
                From Date
              </label>
              <input
                type="date"
                id="reports-from"
                name="from"
                class="input input-bordered w-full"
                value={customFrom || (startDate.getFullYear() + '-' + String(startDate.getMonth() + 1).padStart(2, '0') + '-' + String(startDate.getDate()).padStart(2, '0'))}
                onchange="this.form.submit()"
              />
            </div>
            <div class="form-control">
              <label class="label font-medium" for="reports-to">
                To Date
              </label>
              <input
                type="date"
                id="reports-to"
                name="to"
                class="input input-bordered w-full"
                value={customTo || (endDate.getFullYear() + '-' + String(endDate.getMonth() + 1).padStart(2, '0') + '-' + String(endDate.getDate()).padStart(2, '0'))}
                onchange="this.form.submit()"
              />
            </div>
          </>
        )}

        <div class="form-control">
          <label class="label font-medium" for="reports-member">
            Team Member
          </label>
          <select id="reports-member" name="member" class="select select-bordered" onchange="this.form.submit()">
            <option value="">All Members</option>
            {teamMembers.map(member => (
              <option value={member.id} selected={selectedMemberId === member.id}>
                {member.name}
              </option>
            ))}
          </select>
        </div>

        <div class="form-control">
          <label class="label font-medium" for="reports-category">
            Category
          </label>
          <select id="reports-category" name="category" class="select select-bordered" onchange="this.form.submit()">
            <option value="">All Categories</option>
            {allCategories.map(category => (
              <option value={category.id} selected={selectedCategoryId === category.id}>
                {category.name}
              </option>
            ))}
          </select>
        </div>

        <div class="form-control">
          <label class="label font-medium" for="reports-client">
            Client
          </label>
          <select id="reports-client" name="client" class="select select-bordered" onchange="this.form.submit()">
            <option value="">All Clients</option>
            {allClients.map(client => (
              <option value={client.id} selected={selectedClientId === client.id}>
                {client.name}
              </option>
            ))}
          </select>
        </div>
      </form>

      <style>
        @media (max-width: 767px) {
          form {
            align-items: stretch !important;
          }
          .form-control {
            width: 100%;
          }
        }
        select, input {
          width: 100%;
        }
      </style>
    </div>
  </div>

  <!-- Summary Stats -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
    <div class="stats shadow border border-base-300">
      <div class="stat">
        <div class="stat-figure text-primary">
          <Icon name="heroicons:clock" class="w-8 h-8" />
        </div>
        <div class="stat-title">Total Time</div>
        <div class="stat-value text-primary">{formatDuration(totalTime)}</div>
        <div class="stat-desc">{getTimeRangeLabel(timeRange)}</div>
      </div>
    </div>

    <div class="stats shadow border border-base-300">
      <div class="stat">
        <div class="stat-figure text-secondary">
          <Icon name="heroicons:list-bullet" class="w-8 h-8" />
        </div>
        <div class="stat-title">Total Entries</div>
        <div class="stat-value text-secondary">{entries.length}</div>
        <div class="stat-desc">{getTimeRangeLabel(timeRange)}</div>
      </div>
    </div>

    <div class="stats shadow border border-base-300">
      <div class="stat">
        <div class="stat-figure text-success">
          <Icon name="heroicons:currency-dollar" class="w-8 h-8" />
        </div>
        <div class="stat-title">Revenue</div>
        <div class="stat-value text-success">{formatCurrency(revenueStats.total)}</div>
        <div class="stat-desc">{invoiceStats.paid} paid invoices</div>
      </div>
    </div>

    <div class="stats shadow border border-base-300">
      <div class="stat">
        <div class="stat-figure text-accent">
          <Icon name="heroicons:user-group" class="w-8 h-8" />
        </div>
        <div class="stat-title">Active Members</div>
        <div class="stat-value text-accent">{statsByMember.filter(s => s.entryCount > 0).length}</div>
        <div class="stat-desc">of {teamMembers.length} total</div>
      </div>
    </div>
  </div>

  <!-- Invoice & Quote Stats -->
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
    <div class="card bg-base-100 shadow-xl border border-base-200">
      <div class="card-body">
        <h2 class="card-title mb-4">
          <Icon name="heroicons:document-text" class="w-6 h-6" />
          Invoices Overview
        </h2>
        <div class="grid grid-cols-2 gap-4">
          <div class="stat bg-base-200 rounded-lg">
            <div class="stat-title text-xs">Total Invoices</div>
            <div class="stat-value text-2xl">{invoiceStats.total}</div>
          </div>
          <div class="stat bg-success/10 rounded-lg">
            <div class="stat-title text-xs">Paid</div>
            <div class="stat-value text-2xl text-success">{invoiceStats.paid}</div>
          </div>
          <div class="stat bg-info/10 rounded-lg">
            <div class="stat-title text-xs">Sent</div>
            <div class="stat-value text-2xl text-info">{invoiceStats.sent}</div>
          </div>
          <div class="stat bg-base-200 rounded-lg">
            <div class="stat-title text-xs">Draft</div>
            <div class="stat-value text-2xl">{invoiceStats.draft}</div>
          </div>
        </div>
        <div class="divider my-2"></div>
        <div class="flex justify-between text-sm">
          <span class="text-base-content/60">Revenue (Paid)</span>
          <span class="font-bold text-success">{formatCurrency(revenueStats.total)}</span>
        </div>
        <div class="flex justify-between text-sm">
          <span class="text-base-content/60">Pending (Sent)</span>
          <span class="font-bold text-warning">{formatCurrency(revenueStats.pending)}</span>
        </div>
      </div>
    </div>

    <div class="card bg-base-100 shadow-xl border border-base-200">
      <div class="card-body">
        <h2 class="card-title mb-4">
          <Icon name="heroicons:clipboard-document-list" class="w-6 h-6" />
          Quotes Overview
        </h2>
        <div class="grid grid-cols-2 gap-4">
          <div class="stat bg-base-200 rounded-lg">
            <div class="stat-title text-xs">Total Quotes</div>
            <div class="stat-value text-2xl">{quoteStats.total}</div>
          </div>
          <div class="stat bg-success/10 rounded-lg">
            <div class="stat-title text-xs">Accepted</div>
            <div class="stat-value text-2xl text-success">{quoteStats.accepted}</div>
          </div>
          <div class="stat bg-info/10 rounded-lg">
            <div class="stat-title text-xs">Pending</div>
            <div class="stat-value text-2xl text-info">{quoteStats.sent}</div>
          </div>
          <div class="stat bg-error/10 rounded-lg">
            <div class="stat-title text-xs">Declined</div>
            <div class="stat-value text-2xl text-error">{quoteStats.declined}</div>
          </div>
        </div>
        <div class="divider my-2"></div>
        <div class="flex justify-between text-sm">
          <span class="text-base-content/60">Quoted Value</span>
          <span class="font-bold">{formatCurrency(revenueStats.quotedValue)}</span>
        </div>
        <div class="flex justify-between text-sm">
          <span class="text-base-content/60">Conversion Rate</span>
          <span class="font-bold">
            {quoteStats.total > 0 ? Math.round((quoteStats.accepted / quoteStats.total) * 100) : 0}%
          </span>
        </div>
      </div>
    </div>
  </div>

  <!-- Revenue by Client - Only show if there's revenue data and no client filter -->
  {!selectedClientId && revenueByClient.length > 0 && (
    <div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
      <div class="card-body">
        <h2 class="card-title mb-4">
          <Icon name="heroicons:banknotes" class="w-6 h-6" />
          Revenue by Client
        </h2>
        <div class="overflow-x-auto">
          <table class="table">
            <thead>
              <tr>
                <th>Client</th>
                <th>Revenue</th>
                <th>Invoices</th>
                <th>Avg Invoice</th>
              </tr>
            </thead>
            <tbody>
              {revenueByClient.slice(0, 10).map(stat => (
                <tr>
                  <td>
                    <div class="font-bold">{stat.client.name}</div>
                  </td>
                  <td class="font-mono font-bold text-success">{formatCurrency(stat.revenue)}</td>
                  <td>{stat.invoiceCount}</td>
                  <td class="font-mono">
                    {stat.invoiceCount > 0 ? formatCurrency(stat.revenue / stat.invoiceCount) : formatCurrency(0)}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )}

  {/* Charts Section - Only show if there's data */}
  {totalTime > 0 && (
    <>
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        {/* Category Distribution Chart - Only show when no category filter */}
        {!selectedCategoryId && statsByCategory.filter(s => s.totalTime > 0).length > 0 && (
          <div class="card bg-base-100 shadow-xl border border-base-200">
            <div class="card-body">
              <h2 class="card-title mb-4">
                <Icon name="heroicons:chart-pie" class="w-6 h-6" />
                Category Distribution
              </h2>
              <div class="h-64 w-full">
                <CategoryChart
                  client:visible
                  categories={statsByCategory.filter(s => s.totalTime > 0).map(s => ({
                    name: s.category.name,
                    totalTime: s.totalTime,
                    color: s.category.color || '#3b82f6'
                  }))}
                />
              </div>
            </div>
          </div>
        )}

        {/* Client Distribution Chart - Only show when no client filter */}
        {!selectedClientId && statsByClient.filter(s => s.totalTime > 0).length > 0 && (
          <div class="card bg-base-100 shadow-xl border border-base-200">
            <div class="card-body">
              <h2 class="card-title mb-4">
                <Icon name="heroicons:chart-bar" class="w-6 h-6" />
                Time by Client
              </h2>
              <div class="h-64 w-full">
                <ClientChart
                  client:visible
                  clients={statsByClient.filter(s => s.totalTime > 0).map(s => ({
                    name: s.client.name,
                    totalTime: s.totalTime
                  }))}
                />
              </div>
            </div>
          </div>
        )}
      </div>

      {/* Team Member Chart - Only show when no member filter */}
      {!selectedMemberId && statsByMember.filter(s => s.totalTime > 0).length > 0 && (
        <div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
          <div class="card-body">
            <h2 class="card-title mb-4">
              <Icon name="heroicons:users" class="w-6 h-6" />
              Time by Team Member
            </h2>
            <div class="h-64 w-full">
              <MemberChart
                client:visible
                members={statsByMember.filter(s => s.totalTime > 0).map(s => ({
                  name: s.member.name,
                  totalTime: s.totalTime
                }))}
              />
            </div>
          </div>
        </div>
      )}
    </>
  )}

  {/* Stats by Member - Only show if there's data and no member filter */}
  {!selectedMemberId && statsByMember.filter(s => s.totalTime > 0).length > 0 && (
    <div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
      <div class="card-body">
        <h2 class="card-title mb-4">
          <Icon name="heroicons:users" class="w-6 h-6" />
          By Team Member
        </h2>
        <div class="overflow-x-auto">
          <table class="table">
            <thead>
              <tr>
                <th>Member</th>
                <th>Total Time</th>
                <th>Entries</th>
                <th>Avg per Entry</th>
              </tr>
            </thead>
            <tbody>
              {statsByMember.filter(s => s.totalTime > 0).map(stat => (
                <tr>
                  <td>
                    <div>
                      <div class="font-bold">{stat.member.name}</div>
                      <div class="text-sm opacity-50">{stat.member.email}</div>
                    </div>
                  </td>
                  <td class="font-mono">{formatDuration(stat.totalTime)}</td>
                  <td>{stat.entryCount}</td>
                  <td class="font-mono">
                    {stat.entryCount > 0 ? formatDuration(stat.totalTime / stat.entryCount) : '00:00:00 (0m)'}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )}

  {/* Stats by Category - Only show if there's data and no category filter */}
  {!selectedCategoryId && statsByCategory.filter(s => s.totalTime > 0).length > 0 && (
    <div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
      <div class="card-body">
        <h2 class="card-title mb-4">
          <Icon name="heroicons:tag" class="w-6 h-6" />
          By Category
        </h2>
        <div class="overflow-x-auto">
          <table class="table">
            <thead>
              <tr>
                <th>Category</th>
                <th>Total Time</th>
                <th>Entries</th>
                <th>% of Total</th>
              </tr>
            </thead>
            <tbody>
              {statsByCategory.filter(s => s.totalTime > 0).map(stat => (
                <tr>
                  <td>
                    <div class="flex items-center gap-2">
                      {stat.category.color && (
                        <span class="w-4 h-4 rounded-full" style={`background-color: ${stat.category.color}`}></span>
                      )}
                      <span>{stat.category.name}</span>
                    </div>
                  </td>
                  <td class="font-mono">{formatDuration(stat.totalTime)}</td>
                  <td>{stat.entryCount}</td>
                  <td>
                    <div class="flex items-center gap-2">
                      <progress
                        class="progress progress-primary w-20"
                        value={stat.totalTime}
                        max={totalTime}
                      ></progress>
                      <span class="text-sm">
                        {totalTime > 0 ? Math.round((stat.totalTime / totalTime) * 100) : 0}%
                      </span>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )}

  {/* Stats by Client - Only show if there's data and no client filter */}
  {!selectedClientId && statsByClient.filter(s => s.totalTime > 0).length > 0 && (
    <div class="card bg-base-100 shadow-xl border border-base-200 mb-6">
      <div class="card-body">
        <h2 class="card-title mb-4">
          <Icon name="heroicons:building-office" class="w-6 h-6" />
          By Client
        </h2>
        <div class="overflow-x-auto">
          <table class="table">
            <thead>
              <tr>
                <th>Client</th>
                <th>Total Time</th>
                <th>Entries</th>
                <th>% of Total</th>
              </tr>
            </thead>
            <tbody>
              {statsByClient.filter(s => s.totalTime > 0).map(stat => (
                <tr>
                  <td>{stat.client.name}</td>
                  <td class="font-mono">{formatDuration(stat.totalTime)}</td>
                  <td>{stat.entryCount}</td>
                  <td>
                    <div class="flex items-center gap-2">
                      <progress
                        class="progress progress-secondary w-20"
                        value={stat.totalTime}
                        max={totalTime}
                      ></progress>
                      <span class="text-sm">
                        {totalTime > 0 ? Math.round((stat.totalTime / totalTime) * 100) : 0}%
                      </span>
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )}

  {/* Detailed Entries */}
  <div class="card bg-base-100 shadow-xl border border-base-200">
    <div class="card-body">
      <div class="flex justify-between items-center mb-4">
        <h2 class="card-title">
          <Icon name="heroicons:document-text" class="w-6 h-6" />
          Detailed Entries ({entries.length})
        </h2>
        {entries.length > 0 && (
          <a href={`/api/reports/export${url.search}`} class="btn btn-sm btn-outline" target="_blank">
            <Icon name="heroicons:arrow-down-tray" class="w-4 h-4" />
            Export CSV
          </a>
        )}
      </div>
      {entries.length > 0 ? (
        <div class="overflow-x-auto">
          <table class="table table-zebra">
            <thead>
              <tr>
                <th>Date</th>
                <th>Member</th>
                <th>Client</th>
                <th>Category</th>
                <th>Description</th>
                <th>Duration</th>
              </tr>
            </thead>
            <tbody>
              {entries.map(e => (
                <tr>
                  <td class="whitespace-nowrap">
                    {e.entry.startTime.toLocaleDateString()}<br/>
                    <span class="text-xs opacity-50">
                      {e.entry.startTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
                    </span>
                  </td>
                  <td>{e.user.name}</td>
                  <td>{e.client.name}</td>
                  <td>
                    <div class="flex items-center gap-2">
                      {e.category.color && (
                        <span class="w-3 h-3 rounded-full" style={`background-color: ${e.category.color}`}></span>
                      )}
                      <span>{e.category.name}</span>
                    </div>
                  </td>
                  <td>{e.entry.description || '-'}</td>
                  <td class="font-mono">
                    {e.entry.endTime
                      ? formatDuration(e.entry.endTime.getTime() - e.entry.startTime.getTime())
                      : 'Running...'
                    }
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      ) : (
        <div class="flex flex-col items-center justify-center py-12 text-center">
          <Icon name="heroicons:inbox" class="w-16 h-16 text-base-content/20 mb-4" />
          <h3 class="text-lg font-semibold mb-2">No time entries found</h3>
          <p class="text-base-content/60 mb-4">Try adjusting your filters or select a different time range.</p>
          <a href="/dashboard/tracker" class="btn btn-primary">
            <Icon name="heroicons:play" class="w-5 h-5" />
            Start Tracking Time
          </a>
        </div>
      )}
    </div>
  </div>
</DashboardLayout>