"use client";

import { useState } from "react";
import {
  ArrowUp,
  LoaderCircle,
} from "lucide-react";
import type { ApiDocument } from "@/lib/api/types";
import { cn } from "@/lib/utils";
import { ComposerPlusMenu } from "./ComposerPlusMenu";
import { ComposerSourceDraft } from "./ComposerSourceDraft";
import { SourcePill } from "./SourceControls";
import type { SourceDraftMode } from "./types";

export function StudyComposer({
  value,
  onChange,
  onSubmit,
  placeholder,
  disabled,
  selectedDocuments,
  onRemoveSource,
  onMaterialFile,
  onOpenMaterialPicker,
  onOpenPaperPicker,
  sourceDraftMode,
  onSourceDraftModeChange,
  draftTitle,
  onDraftTitleChange,
  draftText,
  onDraftTextChange,
  onSaveDraftSource,
  isSavingDraft,
  isUploading,
  uploadNotice,
  onRetryUpload,
  plusOpen,
  onPlusOpenChange,
  compact = false,
  variant = "default",
}: {
  value: string;
  onChange: (value: string) => void;
  onSubmit: () => void;
  placeholder: string;
  disabled: boolean;
  selectedDocuments: ApiDocument[];
  onRemoveSource: (id: string) => void;
  onMaterialFile: (file: File) => void;
  onOpenMaterialPicker: () => void;
  onOpenPaperPicker: () => void;
  sourceDraftMode: SourceDraftMode;
  onSourceDraftModeChange: (mode: SourceDraftMode) => void;
  draftTitle: string;
  onDraftTitleChange: (value: string) => void;
  draftText: string;
  onDraftTextChange: (value: string) => void;
  onSaveDraftSource: () => void;
  isSavingDraft: boolean;
  isUploading: boolean;
  uploadNotice: string | null;
  onRetryUpload?: () => void;
  plusOpen: boolean;
  onPlusOpenChange: (open: boolean) => void;
  compact?: boolean;
  variant?: "default" | "hero";
}) {
  const [dragging, setDragging] = useState(false);

  function handleDrop(event: React.DragEvent<HTMLDivElement>) {
    event.preventDefault();
    setDragging(false);
    const file = event.dataTransfer.files?.[0];
    if (file) onMaterialFile(file);
  }

  return (
    <div
      onDragOver={(event) => {
        event.preventDefault();
        setDragging(true);
      }}
      onDragLeave={() => setDragging(false)}
      onDrop={handleDrop}
      className={cn(
        "kb-composer relative rounded-[1.35rem] border border-white/[0.095] bg-[#080808]/92 p-3 shadow-[0_18px_70px_rgba(0,0,0,0.38),inset_0_1px_0_rgba(255,255,255,0.04)] transition duration-200 focus-within:border-white/[0.22] focus-within:bg-[#0b0b0c] sm:p-4",
        variant === "hero" && !compact
          ? "kb-composer-hero border-white/[0.11] p-3.5 shadow-[0_22px_80px_rgba(0,0,0,0.45),inset_0_1px_0_rgba(255,255,255,0.05)] sm:p-5"
          : "",
        compact ? "rounded-[1.15rem] p-2.5 sm:p-3" : "",
        dragging
          ? "border-white/[0.28] bg-white/[0.07] shadow-[0_24px_90px_rgba(0,0,0,0.5)]"
          : "",
      )}
    >
      {dragging ? (
        <div className="pointer-events-none absolute inset-2 z-10 grid place-items-center rounded-[1.05rem] border border-dashed border-white/[0.22] bg-black/72 text-sm font-semibold text-white/72">
          Drop your study source
        </div>
      ) : null}

      {selectedDocuments.length > 0 ? (
        <div className="mb-2 flex gap-2 overflow-x-auto pb-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
          <span className="text-[9px] self-center px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-300 border border-emerald-400/20">grounded to {selectedDocuments.length} source(s) • multi-turn</span>
          {selectedDocuments.map((document) => (
            <SourcePill
              key={document.id}
              document={document}
              active
              onToggle={() => onRemoveSource(document.id)}
              onRemove={() => onRemoveSource(document.id)}
            />
          ))}
        </div>
      ) : null}

      {sourceDraftMode ? (
        <ComposerSourceDraft
          sourceDraftMode={sourceDraftMode}
          draftTitle={draftTitle}
          onDraftTitleChange={onDraftTitleChange}
          draftText={draftText}
          onDraftTextChange={onDraftTextChange}
          onSaveDraftSource={onSaveDraftSource}
          onClose={() => onSourceDraftModeChange(null)}
          isSavingDraft={isSavingDraft}
        />
      ) : null}

      <label className="sr-only" htmlFor={compact ? "docdoe-study-composer-sticky" : "docdoe-study-composer"}>
        Ask DocDoe
      </label>
      <textarea
        id={compact ? "docdoe-study-composer-sticky" : "docdoe-study-composer"}
        aria-label="Ask DocDoe"
        value={value}
        onChange={(event) => onChange(event.target.value)}
        placeholder={placeholder}
        rows={compact ? 1 : 2}
        className={cn(
          "w-full resize-none border-0 bg-transparent px-1 text-[16px] leading-7 text-white outline-none placeholder:text-white/34 focus:border-0 focus:shadow-none focus:ring-0",
          compact ? "min-h-[3rem]" : variant === "hero" ? "min-h-[5.5rem] sm:min-h-[6.25rem]" : "min-h-[5.15rem] sm:min-h-[5.7rem]",
        )}
        onKeyDown={(event) => {
          if (event.key === "Enter" && !event.shiftKey) {
            event.preventDefault();
            onSubmit();
          }
        }}
      />
      <div className="flex items-center justify-between gap-2">
        <div className="flex items-center gap-1">
          <ComposerPlusMenu
            plusOpen={plusOpen}
            onPlusOpenChange={onPlusOpenChange}
            onOpenMaterialPicker={onOpenMaterialPicker}
            onOpenPaperPicker={onOpenPaperPicker}
            onSourceDraftModeChange={onSourceDraftModeChange}
          />
          {uploadNotice ? (
            <span className="ml-2 hidden text-xs text-white/42 sm:inline">{uploadNotice}</span>
          ) : null}
        </div>

        <div className="flex items-center gap-2">
          {onRetryUpload ? (
            <button
              type="button"
              onClick={onRetryUpload}
              className="inline-flex h-9 items-center rounded-full border border-white/[0.12] px-3 text-xs font-semibold text-white/64 transition hover:border-white/24 hover:text-white"
            >
              Retry
            </button>
          ) : null}
          <button
            type="button"
            disabled={disabled || isUploading || !value.trim()}
            onClick={onSubmit}
            aria-label="Send message"
            aria-busy={disabled || isUploading}
            className="inline-flex size-10 items-center justify-center rounded-full bg-white text-black shadow-[0_8px_24px_rgba(255,255,255,0.1)] transition hover:bg-white/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/30 disabled:cursor-not-allowed disabled:opacity-40"
          >
            {disabled || isUploading ? <LoaderCircle className="size-3.5 animate-spin" /> : <ArrowUp className="size-4" />}
          </button>
        </div>
      </div>
      {uploadNotice ? <p className="mt-1.5 text-xs leading-5 text-white/42 sm:hidden">{uploadNotice}</p> : null}
      {!compact ? (
        <p className="mt-2 hidden text-[11px] text-white/28 sm:block">Enter to send · Shift+Enter for a new line</p>
      ) : null}
    </div>
  );
}