"use client";

import { Package } from "lucide-react";
import type { AppLocale } from "@/lib/i18n/config";
import { td } from "@/lib/i18n/dashboard-labels";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsList, TabsPanel } from "@/components/ui/tabs";
import type { InputsViewModel } from "@/lib/farmer-dashboard";
import { categoryToTabId, formatCurrency } from "./utils";

type CatalogCategory = NonNullable<InputsViewModel["catalog"]>[number];

interface FeaturedCatalogTabsProps {
  catalog: CatalogCategory[];
  locale: AppLocale;
}

export function FeaturedCatalogTabs({ catalog, locale }: FeaturedCatalogTabsProps) {
  if (catalog.length === 0) return null;

  const defaultTab = categoryToTabId(catalog[0].category);
  const tabItems = catalog.map((entry) => ({
    id: categoryToTabId(entry.category),
    label: entry.category,
  }));

  return (
    <Card data-testid="inputs-catalog-tabs" padding="md" className="h-full">
      <CardHeader className="mb-0 flex flex-row items-center justify-between gap-2">
        <CardTitle className="text-base">{td("inputsCatalogTitle", locale)}</CardTitle>
        <button
          type="button"
          className="font-inter text-xs font-medium text-brand-green hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-deep focus-visible:ring-offset-2"
        >
          {td("inputsViewAll", locale)}
        </button>
      </CardHeader>
      <CardContent className="mt-4">
        <Tabs defaultValue={defaultTab}>
          <TabsList items={tabItems} />
          {catalog.map((entry) => {
            const tabId = categoryToTabId(entry.category);
            return (
              <TabsPanel key={tabId} value={tabId}>
                <ul className="space-y-3">
                  {entry.items.map((item) => (
                    <li
                      key={item.id}
                      data-testid={`inputs-catalog-item-${item.id}`}
                      className="flex items-center gap-3 rounded-xl border border-border bg-surface p-3"
                    >
                      <div className="flex size-11 shrink-0 items-center justify-center rounded-lg bg-success-bg text-brand-green">
                        {item.imageUrl ? (
                          // eslint-disable-next-line @next/next/no-img-element
                          <img
                            src={item.imageUrl}
                            alt=""
                            className="size-11 rounded-lg object-cover"
                          />
                        ) : (
                          <Package className="size-5" aria-hidden="true" />
                        )}
                      </div>
                      <div className="min-w-0 flex-1">
                        <p className="font-inter text-sm font-medium text-ink">{item.name}</p>
                        <p className="font-inter text-xs text-muted">
                          {formatCurrency(item.unitPrice, item.currency)}
                        </p>
                      </div>
                    </li>
                  ))}
                </ul>
                <p className="mt-4 font-inter text-xs font-medium text-brand-green">
                  {td("inputsCatalogMore", locale).replace("{category}", entry.category.toLowerCase())}
                </p>
              </TabsPanel>
            );
          })}
        </Tabs>
      </CardContent>
    </Card>
  );
}