"use client";

import { useT } from "@/shared/i18n/client";
import { Card, CardContent, CardHeader, CardTitle } from "@/presentation/components/ui/card";
import { Sparkline } from "../charts";
import type { HealthActivity } from "@/domain/entities/health";

export function ActivityTab({ activity }: { activity: HealthActivity }) {
  const t = useT();

  const auCards = [
    { title: t.health.profile.dau, value: activity.dau, subtitle: t.health.profile.today, series: activity.series?.dau ?? [], color: "var(--chart-1)" },
    { title: t.health.profile.wau, value: activity.wau, subtitle: t.health.profile.last7, series: activity.series?.wau ?? [], color: "var(--chart-2)" },
    { title: t.health.profile.mau, value: activity.mau, subtitle: t.health.profile.last30, series: activity.series?.mau ?? [], color: "var(--chart-4)" },
  ];

  // Escalating colors: amber → orange → red as inactivity deepens.
  const inactive = [
    { label: t.health.profile.noLogin30, value: activity.inactive_users.d30, color: "var(--chart-3)" },
    { label: t.health.profile.noLogin60, value: activity.inactive_users.d60, color: "color-mix(in oklch, var(--chart-3) 45%, var(--chart-5))" },
    { label: t.health.profile.noLogin90, value: activity.inactive_users.d90, color: "var(--chart-5)" },
  ];

  return (
    <div className="space-y-4">
      {/* DAU / WAU / MAU cards, each with its snapshot-history trend line */}
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
        {auCards.map((c) => (
          <Card key={c.title} className="p-5">
            <div className="flex items-start justify-between gap-3">
              <div>
                <p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2">{c.title}</p>
                <p className="text-3xl font-bold font-mono leading-none">{c.value}</p>
                <p className="text-xs text-muted-foreground mt-1.5">{c.subtitle}</p>
              </div>
              {c.series.length > 1 && <Sparkline values={c.series} color={c.color} />}
            </div>
          </Card>
        ))}
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
        {/* Login analytics */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">{t.health.profile.loginAnalytics}</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div>
              <p className="text-3xl font-bold font-mono leading-none">{activity.logins_30d.toLocaleString()}</p>
              <p className="text-xs text-muted-foreground mt-1">{t.health.profile.logins30d}</p>
            </div>
            <div>
              <p className="text-2xl font-bold font-mono leading-none">{activity.avg_logins_per_user}</p>
              <p className="text-xs text-muted-foreground mt-1">{t.health.profile.avgLoginsUser}</p>
            </div>
          </CardContent>
        </Card>

        {/* Most active users */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">{t.health.profile.mostActive}</CardTitle>
          </CardHeader>
          <CardContent>
            {activity.most_active_users.length === 0 ? (
              <p className="py-6 text-center text-sm text-muted-foreground">—</p>
            ) : (
              <div className="space-y-2">
                {activity.most_active_users.map((u, i) => (
                  <div key={u.user_id} className="flex items-center gap-3">
                    <span className="w-5 text-right text-xs font-mono text-muted-foreground">{i + 1}</span>
                    <span className="flex-1 text-sm truncate">{u.name}</span>
                    <span className="text-sm font-mono font-semibold">{u.count}</span>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

        {/* Inactive users — cumulative buckets, escalating colors */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">{t.health.profile.inactiveUsers}</CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {inactive.map((b) => (
              <div key={b.label} className="flex items-center justify-between">
                <span className="text-sm text-muted-foreground">{b.label}</span>
                <span className="text-lg font-bold font-mono" style={{ color: b.color }}>
                  {b.value}
                </span>
              </div>
            ))}
          </CardContent>
        </Card>
      </div>
    </div>
  );
}