import { useTranslation } from 'react-i18next';
import { StatCard } from '@/components/shared/StatCard';
import { ActivityFeed, ActivityItem } from '@/components/shared/ActivityFeed';
import { DashboardBuilder } from '@/components/dashboard/DashboardBuilder';
import { useUnifiedContacts, useAuditLog } from '@/api/hooks';
import { useSystemDashboard } from '@/api/systemDashboard';
import { useAuthStore } from '@/store/authStore';
import { formatDateTime } from '@/utils/date';
import { Database, Server, Cpu, DollarSign, Activity, TrendingUp } from 'lucide-react';

export function DashboardPage() {
  const { t } = useTranslation();
  const { data: companiesData } = useUnifiedContacts(1, 1, undefined, 'company');
  const { data: contactsData } = useUnifiedContacts(1, 1, undefined, 'person');
  const { data: auditData, isError: auditError } = useAuditLog(1, 5);
  const { data: systemData } = useSystemDashboard();
  const user = useAuthStore((s) => s.user);
  const isAdmin = user?.is_system_admin ?? false;

  const totalCompanies = companiesData?.total ?? 0;
  const totalContacts = contactsData?.total ?? 0;

  const auditEntries = auditData?.items ?? [];
  const activeThisWeek = auditEntries.filter((e) => {
    if (!e.timestamp) return false;
    const d = new Date(e.timestamp);
    const weekAgo = new Date();
    weekAgo.setDate(weekAgo.getDate() - 7);
    return d >= weekAgo;
  }).length;

  const newThisMonth = auditEntries.filter((e) => {
    if (!e.timestamp) return false;
    const d = new Date(e.timestamp);
    const monthAgo = new Date();
    monthAgo.setMonth(monthAgo.getMonth() - 1);
    return d >= monthAgo;
  }).length;

  const activities: ActivityItem[] = auditError
    ? []
    : auditEntries.map((entry) => ({
        id: `${entry.timestamp}-${entry.user}-${entry.action}`,
        user: entry.user || 'System',
        action: entry.action || '',
        time: entry.timestamp ? (formatDateTime(entry.timestamp) || '') : '',
        avatarUrl: null,
      }));

  return (
    <div className="p-6 max-w-7xl mx-auto" data-testid="dashboard-page">
      <h1 className="text-2xl font-bold text-secondary-900 mb-6">{t('dashboard.title')}</h1>

      {/* Personal dashboard builder (Phase M3) — replaces the old plugin widget grid */}
      <div className="mb-10">
        <DashboardBuilder />
      </div>

      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
        <StatCard
          label={t('dashboard.totalCompanies')}
          value={totalCompanies}
          testId="stat-companies"
        />
        <StatCard
          label={t('dashboard.totalContacts')}
          value={totalContacts}
          testId="stat-contacts"
        />
        <StatCard
          label={t('dashboard.activeThisWeek')}
          value={activeThisWeek}
          testId="stat-active-week"
        />
        <StatCard
          label={t('dashboard.newThisMonth')}
          value={newThisMonth}
          testId="stat-new-month"
        />
      </div>

      {/* System Metrics (Admin only) — I-DASH, I-COST, I-USE (M4: becomes system MiniApp) */}
      {isAdmin && systemData && (
        <div className="mb-8">
          <h2 className="text-lg font-semibold text-secondary-800 mb-4">{t('dashboard.systemMetrics', 'System Status')}</h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
            <div className="border border-secondary-200 rounded-lg p-4 bg-white">
              <div className="flex items-center gap-2 mb-2">
                <Database className="w-4 h-4 text-primary-600" />
                <span className="text-sm font-medium text-secondary-900">Database</span>
              </div>
              <p className="text-2xl font-bold text-secondary-900">{systemData.database?.status === 'up' ? '✅' : '❌'}</p>
              <p className="text-xs text-secondary-500">{systemData.database?.db_size_human || '—'}</p>
            </div>
            <div className="border border-secondary-200 rounded-lg p-4 bg-white">
              <div className="flex items-center gap-2 mb-2">
                <Server className="w-4 h-4 text-primary-600" />
                <span className="text-sm font-medium text-secondary-900">Redis</span>
              </div>
              <p className="text-2xl font-bold text-secondary-900">{systemData.redis?.status === 'up' ? '✅' : '❌'}</p>
              <p className="text-xs text-secondary-500">{systemData.redis?.used_memory_human || '—'}</p>
            </div>
            <div className="border border-secondary-200 rounded-lg p-4 bg-white">
              <div className="flex items-center gap-2 mb-2">
                <Cpu className="w-4 h-4 text-primary-600" />
                <span className="text-sm font-medium text-secondary-900">Worker</span>
              </div>
              <p className="text-2xl font-bold text-secondary-900">{systemData.worker?.status === 'up' ? '✅' : '❌'}</p>
              <p className="text-xs text-secondary-500">Queue: {systemData.worker?.queue_length ?? '—'}</p>
            </div>
            <div className="border border-secondary-200 rounded-lg p-4 bg-white">
              <div className="flex items-center gap-2 mb-2">
                <Activity className="w-4 h-4 text-primary-600" />
                <span className="text-sm font-medium text-secondary-900">API</span>
              </div>
              <p className="text-2xl font-bold text-secondary-900">{systemData.api?.total_requests ?? '—'}</p>
              <p className="text-xs text-secondary-500">Errors: {systemData.api?.error_count ?? 0}</p>
            </div>
          </div>
          {systemData.llm && (
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
              <div className="border border-secondary-200 rounded-lg p-4 bg-white">
                <div className="flex items-center gap-2 mb-2">
                  <DollarSign className="w-4 h-4 text-warning-600" />
                  <span className="text-sm font-medium text-secondary-900">LLM Cost (24h)</span>
                </div>
                <p className="text-2xl font-bold text-secondary-900">${systemData.llm.last_24h_cost?.toFixed(2) ?? '0.00'}</p>
              </div>
              <div className="border border-secondary-200 rounded-lg p-4 bg-white">
                <div className="flex items-center gap-2 mb-2">
                  <TrendingUp className="w-4 h-4 text-primary-600" />
                  <span className="text-sm font-medium text-secondary-900">LLM Tokens (24h)</span>
                </div>
                <p className="text-2xl font-bold text-secondary-900">{systemData.llm.last_24h_tokens?.toLocaleString() ?? '0'}</p>
              </div>
              <div className="border border-secondary-200 rounded-lg p-4 bg-white">
                <div className="flex items-center gap-2 mb-2">
                  <Activity className="w-4 h-4 text-primary-600" />
                  <span className="text-sm font-medium text-secondary-900">Active Plugins</span>
                </div>
                <p className="text-2xl font-bold text-secondary-900">{systemData.plugins?.active_plugins?.length ?? '—'}</p>
              </div>
            </div>
          )}
        </div>
      )}

      {auditError ? (
        <p className="text-sm text-secondary-500" data-testid="activity-unavailable">
          {t('dashboard.activityUnavailable')}
        </p>
      ) : (
        <ActivityFeed activities={activities} title={t('dashboard.recentActivity')} />
      )}
    </div>
  );
}

export default DashboardPage;