"use client";

import { useMemo, useState } from "react";
import { BarChart3, ChevronDown, Leaf } from "lucide-react";
import { BarChart, Card, CardContent, CardHeader, CardTitle } from "@/components/ui";
import { useLocale } from "@/lib/i18n";
import { ti } from "@/lib/i18n/dashboard-labels";
import type { IdentityViewModel } from "@/lib/farmer-dashboard";
import { cn } from "@/lib/utils";

interface YieldHistoryChartProps {
  items: NonNullable<IdentityViewModel["yieldHistory"]>;
  className?: string;
}

export default function YieldHistoryChart({ items, className }: YieldHistoryChartProps) {
  const { locale } = useLocale();
  const crops = useMemo(() => [...new Set(items.map((e) => e.crop))], [items]);
  const [selectedCrop, setSelectedCrop] = useState(crops[0] ?? "cotton");

  const filtered = useMemo(
    () => items.filter((e) => e.crop === selectedCrop).sort((a, b) => a.year - b.year),
    [items, selectedCrop],
  );

  const chartData = filtered.map((e) => ({
    label: String(e.year),
    value: e.yieldTHa,
  }));

  return (
    <Card className={cn("h-full", className)} data-testid="identity-yield-chart-card">
      <CardHeader className="flex-row items-center gap-2">
        <span className="flex size-9 items-center justify-center rounded-lg bg-brand-green/10 text-brand-green">
          <BarChart3 className="size-4" aria-hidden="true" />
        </span>
        <CardTitle className="text-base">{ti("yieldHistoryTitle", locale)}</CardTitle>
      </CardHeader>

      <CardContent>
        <BarChart
          data={chartData}
          description={ti("yieldUnit", locale)}
          valueFormatter={(v) => `${v.toFixed(1)} t/ha`}
          height={180}
        />

        <div className="relative mt-3">
          <label htmlFor="yield-crop-filter" className="sr-only">
            {ti("cropFilter", locale)}
          </label>
          <Leaf
            className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-brand-green"
            aria-hidden="true"
          />
          <select
            id="yield-crop-filter"
            value={selectedCrop}
            onChange={(e) => setSelectedCrop(e.target.value)}
            data-testid="identity-yield-crop-filter"
            className={cn(
              "min-h-11 w-full appearance-none rounded-lg border border-border bg-surface-elevated",
              "pl-10 pr-10 font-inter text-sm text-ink capitalize",
              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-green-deep",
            )}
          >
            {crops.map((crop) => (
              <option key={crop} value={crop}>
                {crop}
              </option>
            ))}
          </select>
          <ChevronDown
            className="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-muted"
            aria-hidden="true"
          />
        </div>
      </CardContent>
    </Card>
  );
}