import React from 'react';
import { Card, CardContent, CardHeader, CardTitle, Badge, Button } from 'xertica-ui/ui';
import { Users, DollarSign, Activity, TrendingUp } from 'lucide-react';
import { useTranslation } from 'react-i18next';

export function DashboardTemplate() {
  const { t } = useTranslation();
  const trendSuffix = t('dashboardTemplate.lastMonth');
  return (
    <div className="flex flex-col gap-6 p-6 w-full max-w-[1400px] mx-auto">
      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
        <div>
          <h2 className="text-3xl font-bold tracking-tight">{t('dashboardTemplate.title')}</h2>
          <p className="text-muted-foreground">{t('dashboardTemplate.subtitle')}</p>
        </div>
        <Button>{t('dashboardTemplate.downloadReport')}</Button>
      </div>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <StatsCard
          title={t('dashboardTemplate.stats.totalRevenue')}
          value={t('dashboardTemplate.stats.totalRevenueValue')}
          trend="+20.1%"
          trendSuffix={trendSuffix}
          icon={<DollarSign className="size-4 text-muted-foreground" />}
        />
        <StatsCard
          title={t('dashboardTemplate.stats.activeUsers')}
          value="+2350"
          trend="+180"
          trendSuffix={trendSuffix}
          icon={<Users className="size-4 text-muted-foreground" />}
        />
        <StatsCard
          title={t('dashboardTemplate.stats.sales')}
          value="+12,234"
          trend="+19%"
          trendSuffix={trendSuffix}
          icon={<Activity className="size-4 text-muted-foreground" />}
        />
        <StatsCard
          title={t('dashboardTemplate.stats.retentionRate')}
          value="89.3%"
          trend="+1.2%"
          trendSuffix={trendSuffix}
          icon={<TrendingUp className="size-4 text-muted-foreground" />}
        />
      </div>

      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
        <Card className="col-span-4 lg:col-span-4">
          <CardHeader>
            <CardTitle>{t('dashboardTemplate.overview')}</CardTitle>
          </CardHeader>
          <CardContent className="h-[350px]">
            <div className="flex h-full w-full items-center justify-center rounded-md border border-dashed bg-muted/20 text-muted-foreground">
              {t('dashboardTemplate.chartArea')}
            </div>
          </CardContent>
        </Card>

        <Card className="col-span-3 lg:col-span-3">
          <CardHeader>
            <CardTitle>{t('dashboardTemplate.recentEvents')}</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              <div className="flex items-center gap-4 text-sm">
                <Badge variant="outline">09:00</Badge>
                <span>{t('dashboardTemplate.events.userLogin')}</span>
              </div>
              <div className="flex items-center gap-4 text-sm">
                <Badge variant="outline">10:45</Badge>
                <span>{t('dashboardTemplate.events.invoicePaid')}</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

interface StatsCardProps {
  title: string;
  value: string;
  icon: React.ReactNode;
  trend?: string;
  /** Pre-translated suffix shown after the trend (e.g. "no último mês"). */
  trendSuffix?: string;
}

function StatsCard({ title, value, icon, trend, trendSuffix }: StatsCardProps) {
  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between pb-2">
        <CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
        {icon}
      </CardHeader>
      <CardContent>
        <div className="text-2xl font-bold">{value}</div>
        {trend && (
          <p className="mt-1 text-xs text-muted-foreground">
            <span className="text-primary font-medium">{trend}</span> {trendSuffix}
          </p>
        )}
      </CardContent>
    </Card>
  );
}