"use client";

import * as React from "react";
import Link from "next/link";
import { ArrowLeftIcon, PercentIcon, SearchXIcon } from "lucide-react";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { EmptyState } from "@/components/ui/empty-state";
import { ErrorState } from "@/components/ui/error-state";
import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Typography } from "@/components/ui/typography";
import { useProviderDetail } from "@/hooks/providers/useProviderDetail";
import { useTranslation } from "@/hooks/useTranslation";
import { ROUTES } from "@/lib/constants/routes";
import type { ProviderDetail } from "@/types/provider";

import { CommissionRateDialog } from "./CommissionRateDialog";
import { ProviderActivityTab } from "./ProviderActivityTab";
import { ProviderCoverageTab } from "./ProviderCoverageTab";
import { ProviderDocumentsTab } from "./ProviderDocumentsTab";
import { ProviderOverviewTab } from "./ProviderOverviewTab";
import { ProviderServicesTab } from "./ProviderServicesTab";
import { ProviderStatusBadge } from "./ProviderStatusBadge";
import { ProviderStatusConfirmDialog } from "./ProviderStatusConfirmDialog";
import { ProviderTeamTab } from "./ProviderTeamTab";
import {
  getStatusActions,
  type ProviderStatusAction,
} from "./lib/provider-status";

const TAB_KEYS = [
  "overview",
  "documents",
  "team",
  "services",
  "coverage",
  "activity",
] as const;

/**
 * Provider profile: account details, KYC documents, team, services, coverage
 * area and activity history — plus the account status and commission controls.
 *
 * The page title in AppHeader is resolved from the nav config by prefix match,
 * so `/admin/providers/[id]` already shows "Providers" — this view renders the
 * business name as its own heading instead of repeating a page title.
 */
export function ProviderDetailView({ providerId }: { providerId: string }) {
  const { t } = useTranslation();
  const { data, isLoading, isError, error, refetch } =
    useProviderDetail(providerId);

  if (isLoading) return <ProviderDetailSkeleton />;

  const status = (error as { response?: { status?: number } } | null)?.response
    ?.status;

  if (isError) {
    // A 404 is a real answer ("no such provider"), not a transient failure —
    // offering a Retry button for it would just fail again.
    if (status === 404) {
      return (
        <Card>
          <CardContent>
            <EmptyState
              icon={<SearchXIcon />}
              title={t("providers.detail.notFoundTitle")}
              description={t("providers.detail.notFoundDescription")}
              action={
                <Button
                  nativeButton={false}
                  render={<Link href={ROUTES.ADMIN.PROVIDERS} />}
                >
                  {t("providers.detail.backToList")}
                </Button>
              }
            />
          </CardContent>
        </Card>
      );
    }
    return <ErrorState onRetry={() => refetch()} />;
  }

  if (!data) return null;

  return <ProviderDetailContent provider={data} />;
}

function ProviderDetailContent({ provider }: { provider: ProviderDetail }) {
  const { t } = useTranslation();
  const [pendingAction, setPendingAction] =
    React.useState<ProviderStatusAction | null>(null);
  const [commissionOpen, setCommissionOpen] = React.useState(false);

  const statusActions = getStatusActions(provider.status);

  return (
    <div className="flex flex-col gap-6">
      {/* ── Header: identity + status actions ──────────────────────────── */}
      <div className="flex flex-col gap-4">
        <Button
          variant="link"
          size="sm"
          nativeButton={false}
          className="w-fit px-0"
          render={<Link href={ROUTES.ADMIN.PROVIDERS} />}
        >
          {/* Points back toward the reading start in both directions */}
          <ArrowLeftIcon className="rtl:-scale-x-100" />
          {t("providers.detail.backToList")}
        </Button>

        <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
          <div className="flex min-w-0 items-center gap-3">
            <Avatar size="lg">
              {provider.logoUrl && (
                <AvatarImage src={provider.logoUrl} alt="" />
              )}
              <AvatarFallback>
                {provider.businessName.trim().charAt(0).toUpperCase()}
              </AvatarFallback>
            </Avatar>
            <div className="flex min-w-0 flex-col gap-1.5">
              {/* h2, not h1: AppHeader already renders the route's <h1>
                  ("Providers") from the nav config — a second h1 would give the
                  page two top-level headings. */}
              <Typography as="h2" variant="h1" className="truncate">
                {provider.businessName}
              </Typography>
              <ProviderStatusBadge status={provider.status} />
            </div>
          </div>

          <div className="flex flex-wrap items-center gap-2">
            {/* `lg` (40px), not `sm` (32px): these are the screen's primary
                actions and sat too cramped next to the h1 at the small size. */}
            <Button
              variant="secondary"
              size="lg"
              onClick={() => setCommissionOpen(true)}
            >
              <PercentIcon />
              {t("providers.actions.editCommission")}
            </Button>
            {statusActions.map((action) => (
              <Button
                key={action.confirmKey}
                size="lg"
                variant={action.destructive ? "destructive" : "default"}
                onClick={() => setPendingAction(action)}
              >
                {t(action.labelKey)}
              </Button>
            ))}
          </div>
        </div>
      </div>

      {/* ── Tabbed detail ──────────────────────────────────────────────── */}
      <Tabs defaultValue="overview" className="gap-6">
        {/* py-1 keeps the active pill's shadow from being clipped by the
            scroll container (setting overflow-x also computes overflow-y). */}
        <div className="overflow-x-auto py-1">
          <TabsList>
            {TAB_KEYS.map((key) => (
              <TabsTrigger key={key} value={key}>
                {t(`providers.detail.tabs.${key}`)}
              </TabsTrigger>
            ))}
          </TabsList>
        </div>

        <TabsContent value="overview">
          <ProviderOverviewTab provider={provider} />
        </TabsContent>
        <TabsContent value="documents">
          <ProviderDocumentsTab
            providerId={provider.id}
            documents={provider.documents}
          />
        </TabsContent>
        <TabsContent value="team">
          <ProviderTeamTab members={provider.users} />
        </TabsContent>
        <TabsContent value="services">
          <ProviderServicesTab services={provider.services} />
        </TabsContent>
        <TabsContent value="coverage">
          <ProviderCoverageTab coverageArea={provider.coverageArea} />
        </TabsContent>
        <TabsContent value="activity">
          <ProviderActivityTab provider={provider} />
        </TabsContent>
      </Tabs>

      <ProviderStatusConfirmDialog
        action={pendingAction}
        providerId={provider.id}
        providerName={provider.businessName}
        onClose={() => setPendingAction(null)}
      />

      <CommissionRateDialog
        open={commissionOpen}
        onOpenChange={setCommissionOpen}
        providerId={provider.id}
        providerStatus={provider.status}
        currentRate={provider.customCommissionRate}
      />
    </div>
  );
}

function ProviderDetailSkeleton() {
  return (
    <div className="flex flex-col gap-6">
      <div className="flex items-center gap-3">
        <Skeleton className="size-10 rounded-full" />
        <div className="flex flex-col gap-2">
          <Skeleton className="h-6 w-48" />
          <Skeleton className="h-5 w-24 rounded-[20px]" />
        </div>
      </div>
      <Skeleton className="h-9 w-full max-w-md rounded-lg" />
      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <Skeleton className="h-64 w-full rounded-xl" />
        <Skeleton className="h-64 w-full rounded-xl" />
      </div>
    </div>
  );
}