"use client";

import * as React from "react";
import { SparklesIcon } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { EmptyState } from "@/components/ui/empty-state";
import { Typography } from "@/components/ui/typography";
import { DataTable } from "@/components/data-table";
import type { DataTableColumn } from "@/components/data-table";
import { usePriceFormat } from "@/hooks/usePriceFormat";
import { useTranslation } from "@/hooks/useTranslation";
import type { ProviderServiceOffering } from "@/types/provider";

/**
 * Services this provider offers, with their per-provider price.
 *
 * Packages are Admin-defined (see the requirements change note: providers pick
 * from admin-managed services rather than creating their own), so this view is
 * read-only — it shows which packages were selected and at what price inside
 * the platform's min/max range.
 */
export function ProviderServicesTab({
  services,
}: {
  services: ProviderServiceOffering[];
}) {
  const { t } = useTranslation();
  const { formatPrice, formatPriceRange } = usePriceFormat();

  const columns = React.useMemo<DataTableColumn<ProviderServiceOffering>[]>(
    () => [
      {
        key: "service",
        header: t("providers.detail.services.service"),
        cell: (offering) => (
          <div className="flex min-w-0 flex-col gap-1">
            <div className="flex flex-wrap items-center gap-2">
              <Typography as="span" variant="body">
                {offering.washPackage.name}
              </Typography>
              {/* Soft-deleted / disabled packages are still returned by the
                  API — flag them so the admin isn't misled. */}
              {(!offering.washPackage.isActive ||
                offering.washPackage.isDeleted) && (
                <Badge variant="closed">
                  {t("providers.detail.services.inactivePackage")}
                </Badge>
              )}
            </div>
            {offering.washPackage.description && (
              <Typography as="span" variant="caption" color="secondary">
                {offering.washPackage.description}
              </Typography>
            )}
          </div>
        ),
        sortable: true,
        sortValue: (offering) => offering.washPackage.name,
      },
      {
        key: "duration",
        header: t("providers.detail.services.duration"),
        cell: (offering) => (
          <Typography as="span" variant="number">
            {t("providers.detail.services.minutes", {
              count: offering.washPackage.estimatedDuration,
            })}
          </Typography>
        ),
        sortable: true,
        sortValue: (offering) => offering.washPackage.estimatedDuration,
      },
      {
        key: "priceRange",
        header: t("providers.detail.services.priceRange"),
        hideOnMobile: true,
        cell: (offering) => (
          <Typography as="span" variant="caption" color="secondary">
            {formatPriceRange(
              offering.washPackage.minPrice,
              offering.washPackage.maxPrice,
            )}
          </Typography>
        ),
      },
      {
        key: "price",
        header: t("providers.detail.services.price"),
        align: "end",
        cell: (offering) => (
          <Typography as="span" variant="number">
            {formatPrice(offering.price)}
          </Typography>
        ),
        sortable: true,
        sortValue: (offering) => offering.price,
      },
    ],
    [t, formatPrice, formatPriceRange],
  );

  return (
    <DataTable
      columns={columns}
      data={services}
      getRowId={(offering) => offering.id}
      searchable
      searchText={(offering) => offering.washPackage.name}
      emptyState={
        <EmptyState
          icon={<SparklesIcon />}
          title={t("providers.detail.services.emptyTitle")}
          description={t("providers.detail.services.emptyDescription")}
        />
      }
    />
  );
}