"use client";

import { useState } from "react";
import { useParams, useRouter } from "next/navigation";
import { ArrowLeft } from "lucide-react";
import { usePageHeader } from "@/presentation/hooks/use-page-header";
import { useT } from "@/shared/i18n/client";
import { Button } from "@/presentation/components/ui/button";
import { Card } from "@/presentation/components/ui/card";
import { Skeleton } from "@/presentation/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/presentation/components/ui/tabs";
import { Badge } from "@/presentation/components/ui/badge";
import { useHealthClientProfile } from "../../hooks/use-health-client-profile";
import { PeriodFilter, type PeriodState } from "../../components/period-filter";
import { HealthGauge } from "../../components/charts";
import { TierBadge } from "../../components/tier";
import { OverviewTab } from "../../components/profile/overview-tab";
import { ActivityTab } from "../../components/profile/activity-tab";
import { AdoptionTab } from "../../components/profile/adoption-tab";
import { BehaviorTab } from "../../components/profile/behavior-tab";
import { BenchmarkTab } from "../../components/profile/benchmark-tab";

export default function HealthClientProfilePage() {
  const t = useT();
  usePageHeader(t.pages.healthProfile.title, t.pages.healthProfile.subtitle);
  const params = useParams();
  const router = useRouter();
  const id = Number(params.id);
  const [period, setPeriod] = useState<PeriodState>({ period: "month" });

  const { data, loading } = useHealthClientProfile(id, period);

  if (loading && !data) {
    return (
      <div className="p-6 space-y-6">
        <Skeleton className="h-8 w-40" />
        <Skeleton className="h-40 rounded-xl" />
        <Skeleton className="h-96 rounded-xl" />
      </div>
    );
  }

  if (!data) {
    return (
      <div className="p-6">
        <Button variant="ghost" size="sm" onClick={() => router.push("/health/clients")}>
          <ArrowLeft className="w-4 h-4 mr-1" />
          {t.health.profile.back}
        </Button>
      </div>
    );
  }

  const h = data.header;
  const tiles: Array<{ label: string; value: number }> = [
    { label: t.health.profile.tiles.vehicles, value: h.tiles.vehicles },
    { label: t.health.profile.tiles.users, value: h.tiles.users },
    { label: t.health.profile.tiles.active, value: h.tiles.active },
    { label: t.health.profile.tiles.mau, value: h.tiles.mau },
  ];

  return (
    <div className="p-6 space-y-5">
      <div className="flex items-center justify-between gap-3">
        <Button variant="ghost" size="sm" onClick={() => router.push("/health/clients")}>
          <ArrowLeft className="w-4 h-4 mr-1" />
          {t.health.profile.back}
        </Button>
        <PeriodFilter value={period} onChange={setPeriod} />
      </div>

      {/* Header */}
      <Card className="p-5">
        <div className="flex flex-col md:flex-row md:items-center gap-5">
          <HealthGauge score={h.health} size={128} />
          <div className="flex-1 min-w-0">
            <div className="flex items-center gap-2.5 flex-wrap">
              <h2 className="text-xl font-bold truncate">{h.company}</h2>
              <TierBadge tier={h.tier} />
              {h.is_new && (
                <Badge className="text-[9px] px-1.5 py-0 h-4 bg-blue-500 text-white border-0">
                  {t.health.list.new}
                </Badge>
              )}
            </div>
            <p className="text-sm text-muted-foreground mt-1">
              {[h.plan, h.industry, h.client_since ? t.health.profile.clientSince(new Date(h.client_since).getFullYear().toString()) : null]
                .filter(Boolean)
                .join(" · ")}
            </p>
          </div>
          <div className="grid grid-cols-4 gap-3">
            {tiles.map((tile) => (
              <div key={tile.label} className="text-center min-w-[64px]">
                <p className="text-2xl font-bold font-mono leading-none">{tile.value}</p>
                <p className="text-[10px] uppercase tracking-wider text-muted-foreground mt-1">{tile.label}</p>
              </div>
            ))}
          </div>
        </div>
      </Card>

      <Tabs defaultValue="overview">
        <TabsList className="flex-wrap h-auto">
          <TabsTrigger value="overview">{t.health.profile.tabs.overview}</TabsTrigger>
          <TabsTrigger value="activity">{t.health.profile.tabs.activity}</TabsTrigger>
          <TabsTrigger value="adoption">{t.health.profile.tabs.adoption}</TabsTrigger>
          <TabsTrigger value="behavior">{t.health.profile.tabs.behavior}</TabsTrigger>
          <TabsTrigger value="benchmark">{t.health.profile.tabs.benchmark}</TabsTrigger>
        </TabsList>

        <TabsContent value="overview" className="mt-4">
          <OverviewTab overview={data.overview} />
        </TabsContent>
        <TabsContent value="activity" className="mt-4">
          <ActivityTab activity={data.activity} />
        </TabsContent>
        <TabsContent value="adoption" className="mt-4">
          <AdoptionTab adoption={data.adoption} />
        </TabsContent>
        <TabsContent value="behavior" className="mt-4">
          <BehaviorTab behavior={data.behavior} />
        </TabsContent>
        <TabsContent value="benchmark" className="mt-4">
          <BenchmarkTab benchmark={data.benchmark} />
        </TabsContent>
      </Tabs>
    </div>
  );
}