"use client";

import { Clock, Sparkles } from "lucide-react";
import type { SubjectTemplate } from "../services/subject-template-service";

interface SubjectAutocompleteDropdownProps {
  /** Filtered templates (when user is typing >=2 chars) */
  templates: SubjectTemplate[];
  /** Filtered plain text suggestions (when user is typing >=2 chars) */
  suggestions: string[];
  /** Recommended templates for the current document type (shown on empty focus) */
  recommendedTemplates?: SubjectTemplate[];
  /** Recent unique subjects from DB (shown on empty focus) */
  recentSubjects?: string[];
  visible: boolean;
  onSelectTemplate: (template: SubjectTemplate) => void;
  onSelectSuggestion: (subject: string) => void;
}

export function SubjectAutocompleteDropdown({
  templates,
  suggestions,
  recommendedTemplates,
  recentSubjects,
  visible,
  onSelectTemplate,
  onSelectSuggestion,
}: SubjectAutocompleteDropdownProps) {
  // Determine which mode we're in
  const hasFiltered = templates.length > 0 || suggestions.length > 0;
  const hasRecommended = (recommendedTemplates && recommendedTemplates.length > 0) ||
    (recentSubjects && recentSubjects.length > 0);

  if (!visible || (!hasFiltered && !hasRecommended)) {
    return null;
  }

  return (
    <div className="absolute z-10 mt-1 w-full rounded-md border bg-popover p-1 shadow-md max-h-72 overflow-y-auto">
      {/* ── Mode 1: Filtered results (user is typing) ── */}
      {hasFiltered && (
        <>
          {/* Section 1: Templates */}
          {templates.length > 0 && (
            <>
              <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
                Sabloane
              </div>
              {templates.map((t) => (
                <button
                  key={t.id}
                  type="button"
                  className="w-full rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
                  onMouseDown={() => onSelectTemplate(t)}
                >
                  <span className="font-medium">{t.pattern}</span>
                  {t.frequency > 0 && (
                    <span className="ml-2 text-muted-foreground text-xs">
                      ({t.frequency}x)
                    </span>
                  )}
                </button>
              ))}
            </>
          )}

          {/* Divider */}
          {templates.length > 0 && suggestions.length > 0 && (
            <div className="border-t my-1" />
          )}

          {/* Section 2: Plain suggestions */}
          {suggestions.length > 0 && (
            <>
              <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
                Sugestii
              </div>
              {suggestions.map((s, i) => (
                <button
                  key={i}
                  type="button"
                  className="w-full rounded px-2 py-1.5 text-left text-sm hover:bg-accent truncate"
                  onMouseDown={() => onSelectSuggestion(s)}
                >
                  {s}
                </button>
              ))}
            </>
          )}
        </>
      )}

      {/* ── Mode 2: Empty focus — recommended + recent ── */}
      {!hasFiltered && hasRecommended && (
        <>
          {/* Recommended templates */}
          {recommendedTemplates && recommendedTemplates.length > 0 && (
            <>
              <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-1">
                <Sparkles className="h-3 w-3" />
                Sabloane recomandate
              </div>
              {recommendedTemplates.map((t) => (
                <button
                  key={t.id}
                  type="button"
                  className="w-full rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
                  onMouseDown={() => onSelectTemplate(t)}
                >
                  <span className="font-medium">{t.pattern}</span>
                  {t.frequency > 0 && !t.isSeed && (
                    <span className="ml-2 text-muted-foreground text-xs">
                      ({t.frequency}x)
                    </span>
                  )}
                  {t.isSeed && (
                    <span className="ml-2 text-muted-foreground/60 text-[10px]">
                      sablon
                    </span>
                  )}
                </button>
              ))}
            </>
          )}

          {/* Divider */}
          {recommendedTemplates && recommendedTemplates.length > 0 &&
            recentSubjects && recentSubjects.length > 0 && (
              <div className="border-t my-1" />
            )}

          {/* Recent subjects */}
          {recentSubjects && recentSubjects.length > 0 && (
            <>
              <div className="px-2 py-1 text-[10px] font-semibold text-muted-foreground uppercase tracking-wider flex items-center gap-1">
                <Clock className="h-3 w-3" />
                Recente
              </div>
              {recentSubjects.map((s, i) => (
                <button
                  key={i}
                  type="button"
                  className="w-full rounded px-2 py-1.5 text-left text-sm hover:bg-accent truncate"
                  onMouseDown={() => onSelectSuggestion(s)}
                >
                  {s}
                </button>
              ))}
            </>
          )}
        </>
      )}
    </div>
  );
}
