"use client";

import { ArrowRight } from "lucide-react";
import { useT } from "@/shared/i18n/client";
import { Card, CardContent, CardHeader, CardTitle } from "@/presentation/components/ui/card";
import { ActivityHeatmap, ContributionGrid } from "../grids";
import type { HealthBehavior } from "@/domain/entities/health";

export function BehaviorTab({ behavior }: { behavior: HealthBehavior }) {
  const t = useT();

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
        {/* Workflow paths */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="text-base">{t.health.profile.workflow}</CardTitle>
          </CardHeader>
          <CardContent>
            {behavior.nav_paths.length === 0 ? (
              <p className="py-6 text-center text-sm text-muted-foreground">{t.health.profile.lowActivity}</p>
            ) : (
              <div className="space-y-3">
                {behavior.nav_paths.map((p, i) => (
                  <div key={i} className="flex items-center gap-3">
                    <span className="w-10 text-sm font-mono font-semibold" style={{ color: "var(--chart-1)" }}>
                      {p.frequency}%
                    </span>
                    <div className="flex items-center gap-1.5 flex-wrap">
                      {p.path.map((mod, j) => (
                        <span key={j} className="flex items-center gap-1.5">
                          <span className="text-sm bg-muted rounded-md px-2 py-0.5 capitalize">{mod}</span>
                          {j < p.path.length - 1 && <ArrowRight className="w-3.5 h-3.5 text-muted-foreground" />}
                        </span>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            )}
          </CardContent>
        </Card>

        {/* Avg session */}
        <Card>
          <CardHeader>
            <CardTitle className="text-base">{t.health.profile.avgSession}</CardTitle>
          </CardHeader>
          <CardContent className="flex flex-col items-center justify-center py-6">
            <p className="text-4xl font-bold font-mono leading-none">{behavior.avg_session_minutes}</p>
            <p className="text-xs text-muted-foreground mt-2">min</p>
          </CardContent>
        </Card>
      </div>

      {/* Activity heatmap */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base">{t.health.profile.heatmap}</CardTitle>
        </CardHeader>
        <CardContent>
          <ActivityHeatmap
            matrix={behavior.heatmap.matrix}
            byHour={behavior.heatmap.by_hour}
            byWeekday={behavior.heatmap.by_weekday}
          />
        </CardContent>
      </Card>

      {/* Annual activity */}
      <Card>
        <CardHeader>
          <CardTitle className="text-base flex items-center justify-between">
            {t.health.profile.annual}
            <span className="text-xs font-normal text-muted-foreground">
              {t.health.profile.activeDays(behavior.annual_activity.count)}
            </span>
          </CardTitle>
        </CardHeader>
        <CardContent>
          <ContributionGrid days={behavior.annual_activity.days} />
        </CardContent>
      </Card>
    </div>
  );
}