"use client";

import { GlobeIcon } from "@/assets/icons";
import { Select } from "@/components/FormElements/select";
import Status from "@/components/ui/Status";
import { Languages } from "@/constants/languages";
import { cn } from "@/lib/utils";
import type { ComponentProps } from "react";
import type { FieldValues } from "react-hook-form";
import { TENDER_HEADER_TITLE_CLASS } from "../constants";

type LanguageSelectOnChange = NonNullable<
  ComponentProps<typeof Select<FieldValues>>["onChange"]
>;

type TenderDetailsHeaderProps = {
  title: string;
  selectedLanguage: string;
  onLanguageChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
  isTranslating: boolean;
  status: string | undefined;
};

export function TenderDetailsHeader({
  title,
  selectedLanguage,
  onLanguageChange,
  isTranslating,
  status,
}: TenderDetailsHeaderProps) {
  return (
    <div className="relative w-full">
      <div className="flex w-full min-w-0 flex-col gap-5">
        <div className="w-full min-w-0 space-y-2">
          <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
            <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-primary">
              Tender
            </p>
            <Status status={status ?? "Unknown"}>{status}</Status>
          </div>
          <h1 className={TENDER_HEADER_TITLE_CLASS}>{title}</h1>
        </div>
        <div className="flex w-full min-w-0 shrink-0 flex-col">
          <div
            className={cn(
              "relative overflow-hidden rounded-[1.35rem] border border-stroke/55 p-4 sm:p-5",
              "bg-white/75 shadow-[0_12px_42px_-14px_rgba(15,23,42,0.14),0_0_0_1px_rgba(87,80,241,0.05)] backdrop-blur-md",
              "dark:border-white/[0.08] dark:bg-transparent dark:bg-gradient-to-br dark:from-dark-2 dark:via-dark-3 dark:to-violet-950/35",
              "dark:shadow-none dark:backdrop-blur-none",
            )}
          >
            <div
              className="pointer-events-none absolute -right-6 -top-10 h-28 w-28 rounded-full bg-gradient-to-br from-primary/25 to-violet-500/10 blur-2xl dark:from-violet-500/15 dark:to-transparent dark:opacity-50"
              aria-hidden
            />
            <div className="relative space-y-4">
              <div className="flex gap-3">
                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-gradient-to-br from-primary/20 to-violet-600/10 text-primary shadow-inner ring-1 ring-primary/15 dark:from-primary/30 dark:to-violet-500/15 dark:shadow-none dark:ring-white/10">
                  <GlobeIcon className="h-5 w-5 opacity-95" />
                </div>
                <div className="min-w-0 flex-1 pt-0.5">
                  <p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-dark-5 dark:text-dark-6">
                    Language & translation
                  </p>
                  <p className="mt-1 text-xs leading-relaxed text-dark-5/90 dark:text-dark-6/95">
                    Changing language updates the URL, translates metadata, and
                    reloads this view.
                  </p>
                </div>
              </div>
              <div className="flex flex-col gap-2">
                <Select<FieldValues>
                  name="lang"
                  label="Display language"
                  items={Languages}
                  searchable
                  searchPlaceholder="Search language or ISO code…"
                  disabled={isTranslating}
                  prefixIcon={
                    <GlobeIcon className="h-[1.05rem] w-[1.05rem] text-primary dark:text-primary/90" />
                  }
                  className={cn(
                    "w-full shrink-0 space-y-0",
                    "[&_label]:sr-only",
                    "[&_button]:h-11 [&_button]:min-h-[2.75rem] [&_button]:rounded-full [&_button]:border-stroke/60 [&_button]:bg-white/95 [&_button]:py-0 [&_button]:text-sm [&_button]:shadow-sm dark:[&_button]:border-white/10 dark:[&_button]:bg-dark-2 dark:[&_button]:shadow-none",
                  )}
                  value={selectedLanguage}
                  onChange={onLanguageChange as LanguageSelectOnChange}
                />
                {isTranslating ? (
                  <p className="text-xs font-medium text-primary dark:text-primary/90">
                    Translating…
                  </p>
                ) : null}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
