erp-nutzfahrzeuge/frontend/components/Dashboard.tsx

'use client';

import { useState, useEffect, useCallback } from 'react';
import { useRouter } from 'next/navigation';
import { Card } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Table } from '@/components/ui/Table';
import { useI18n } from '@/lib/i18n';
import { listVehicles, type VehicleResponse } from '@/lib/vehicles';

interface DashboardStats {
  total: number;
  available: number;
  reserved: number;
  sold: number;
  totalValue: number;
}

interface StatCardProps {
  icon: React.ReactNode;
  label: string;
  value: string;
  testId: string;
}

function StatCard({ icon, label, value, testId }: StatCardProps) {
  return (
    <div
      className="bg-surface rounded-xl border border-border p-6 flex flex-col gap-2"
      data-testid={testId}
    >
      <div className="flex items-center gap-2 text-text-muted text-sm font-medium">
        <span className="text-primary">{icon}</span>
        {label}
      </div>
      <span className="text-2xl font-bold text-text">{value}</span>
    </div>
  );
}

const CarIcon = (
  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z" />
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-4-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0" />
  </svg>
);

const CheckCircleIcon = (
  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
);

const ClockIcon = (
  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
);

const TagIcon = (
  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
  </svg>
);

const EuroIcon = (
  <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
);

export function Dashboard() {
  const router = useRouter();
  const { t } = useI18n();
  const [recentVehicles, setRecentVehicles] = useState<VehicleResponse[]>([]);
  const [stats, setStats] = useState<DashboardStats>({
    total: 0,
    available: 0,
    reserved: 0,
    sold: 0,
    totalValue: 0,
  });
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  const fetchDashboardData = useCallback(async () => {
    setLoading(true);
    setError(null);
    try {
      const [recentResponse, allResponse] = await Promise.all([
        listVehicles({ page: 1, page_size: 5, sort: '-created_at' }),
        listVehicles({ page: 1, page_size: 1000 }),
      ]);

      setRecentVehicles(recentResponse.items);

      const allVehicles = allResponse.items;
      const computedStats: DashboardStats = {
        total: allResponse.total,
        available: allVehicles.filter(v => v.availability === 'available').length,
        reserved: allVehicles.filter(v => v.availability === 'reserved').length,
        sold: allVehicles.filter(v => v.availability === 'sold').length,
        totalValue: allVehicles.reduce((sum, v) => sum + v.price, 0),
      };
      setStats(computedStats);
    } catch (err: unknown) {
      const apiErr = err as { error?: { message?: string } };
      setError(apiErr?.error?.message || t('dashboard.error'));
    } finally {
      setLoading(false);
    }
  }, [t]);

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

  const currencyFormatter = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });

  const vehicleColumns = [
    {
      key: 'make',
      label: t('dashboard.make'),
      render: (row: VehicleResponse) => (
        <button
          data-testid={`dashboard-vehicle-${row.id}`}
          onClick={() => router.push(`/de/fahrzeuge/${row.id}`)}
          className="text-primary hover:underline font-medium"
        >
          {row.make}
        </button>
      ),
    },
    { key: 'model', label: t('dashboard.model') },
    { key: 'fin', label: t('dashboard.fin') },
    {
      key: 'price',
      label: t('dashboard.price'),
      render: (row: VehicleResponse) => currencyFormatter.format(row.price),
    },
    { key: 'availability', label: t('dashboard.availability') },
  ];

  if (loading) {
    return (
      <div data-testid="dashboard-loading" className="flex items-center justify-center h-64">
        <span className="text-text-muted text-sm">{t('common.loading')}</span>
      </div>
    );
  }

  if (error) {
    return (
      <div data-testid="dashboard-error" className="p-4 bg-error/10 text-error rounded-lg">
        {error}
      </div>
    );
  }

  return (
    <div data-testid="dashboard" className="space-y-6">
      <h1 className="text-2xl font-bold text-text" data-testid="dashboard-title">
        {t('dashboard.title')}
      </h1>

      <div
        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"
        data-testid="dashboard-stats"
      >
        <StatCard
          icon={CarIcon}
          label={t('dashboard.totalVehicles')}
          value={String(stats.total)}
          testId="stat-total-vehicles"
        />
        <StatCard
          icon={CheckCircleIcon}
          label={t('dashboard.available')}
          value={String(stats.available)}
          testId="stat-available"
        />
        <StatCard
          icon={ClockIcon}
          label={t('dashboard.reserved')}
          value={String(stats.reserved)}
          testId="stat-reserved"
        />
        <StatCard
          icon={TagIcon}
          label={t('dashboard.sold')}
          value={String(stats.sold)}
          testId="stat-sold"
        />
      </div>

      <div
        className="bg-surface rounded-xl border border-border p-6 flex items-center justify-between"
        data-testid="stat-total-value"
      >
        <div className="flex items-center gap-2 text-text-muted text-sm font-medium">
          <span className="text-primary">{EuroIcon}</span>
          {t('dashboard.totalValue')}
        </div>
        <span className="text-2xl font-bold text-text">
          {currencyFormatter.format(stats.totalValue)}
        </span>
      </div>

      <div data-testid="dashboard-quick-actions" className="space-y-2">
        <h2 className="text-lg font-semibold text-text">{t('dashboard.quickActions')}</h2>
        <div className="flex flex-wrap gap-3">
          <Button
            onClick={() => router.push('/de/fahrzeuge/neu')}
            data-testid="quick-action-new-vehicle"
          >
            {t('dashboard.newVehicle')}
          </Button>
          <Button
            variant="secondary"
            onClick={() => router.push('/de/kontakte/neu')}
            data-testid="quick-action-new-contact"
          >
            {t('dashboard.newContact')}
          </Button>
          <Button
            variant="secondary"
            onClick={() => router.push('/de/verkauf/neu')}
            data-testid="quick-action-new-sale"
          >
            {t('dashboard.newSale')}
          </Button>
        </div>
      </div>

      <div data-testid="dashboard-recent-vehicles" className="space-y-2">
        <h2 className="text-lg font-semibold text-text">{t('dashboard.recentVehicles')}</h2>
        <Card>
          {recentVehicles.length > 0 ? (
            <Table columns={vehicleColumns} data={recentVehicles} rowKey={row => row.id} />
          ) : (
            <p className="text-text-muted text-center py-8" data-testid="no-recent-vehicles">
              {t('dashboard.noVehicles')}
            </p>
          )}
        </Card>
      </div>
    </div>
  );
}