import { useId, useState, type ChangeEvent, type InputHTMLAttributes, type ReactNode } from "react";
import { MagnifyingGlass, WarningCircle, X } from "@phosphor-icons/react";
import { cn } from "../../lib/cn";

export type FieldMeta = {
  error?: string;
  hint?: string;
  label?: string;
  prefixIcon?: ReactNode;
  suffixIcon?: ReactNode;
  suffixInteractive?: boolean;
};

export type FormFieldProps = FieldMeta & {
  children: ReactNode;
  className?: string;
};

export function fieldClassName(hasError?: boolean) {
  return cn(
    "h-[var(--uhuru-control-height)] rounded-[var(--uhuru-radius-control)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] px-[var(--uhuru-control-padding-x)] text-sm text-[var(--uhuru-text-primary)] outline-none transition placeholder:text-[var(--uhuru-text-tertiary)] focus:border-[var(--uhuru-border-accent)] focus:ring-1 focus:ring-[var(--uhuru-border-accent)]",
    hasError ? "border-[var(--uhuru-error-border)] focus:ring-[var(--uhuru-error-border)]" : "",
  );
}

export function fieldNote(error?: string, hint?: string, hintId?: string, errorId?: string, onDismiss?: () => void) {
  if (error) {
    return (
      <span className="flex min-w-0 items-center gap-1.5 rounded-[var(--uhuru-radius-sm)] border border-[var(--uhuru-error-border)] bg-[var(--uhuru-error-bg)] px-2.5 py-1.5 text-xs font-medium text-[var(--uhuru-error-text)]" id={errorId}>
        <WarningCircle aria-hidden="true" className="shrink-0" size={14} weight="fill" />
        <span className="min-w-0 flex-1">{error}</span>
        {onDismiss ? <button aria-label="Dismiss error" className="grid h-5 w-5 shrink-0 place-items-center rounded-[var(--uhuru-radius-sm)] hover:bg-[var(--uhuru-error-border)]/20" onClick={onDismiss} title="Dismiss error" type="button"><X aria-hidden="true" size={13} weight="bold" /></button> : null}
      </span>
    );
  }

  if (hint) {
    return (
      <span className="text-xs text-[var(--uhuru-text-secondary)]" id={hintId}>
        {hint}
      </span>
    );
  }

  return null;
}

type PrefixFieldShellProps = {
  children: ReactNode;
  className?: string;
  prefixIcon?: ReactNode;
  suffixIcon?: ReactNode;
  suffixInteractive?: boolean;
};

export function PrefixFieldShell({
  children,
  className,
  prefixIcon,
  suffixIcon,
  suffixInteractive = false,
}: PrefixFieldShellProps) {
  if (!prefixIcon && !suffixIcon) {
    return <>{children}</>;
  }

  return (
    <div className={cn("relative", className)}>
      {prefixIcon ? (
        <span className="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-[var(--uhuru-text-tertiary)]">
          <span className="grid h-5 w-5 place-items-center [&_svg]:h-5 [&_svg]:w-5">
            {prefixIcon}
          </span>
        </span>
      ) : null}
      {children}
      {suffixIcon ? (
        <span className={cn("absolute right-4 top-1/2 -translate-y-1/2 text-[var(--uhuru-text-tertiary)]", suffixInteractive ? "pointer-events-auto" : "pointer-events-none")}>
          <span className="grid h-5 w-5 place-items-center [&_svg]:h-5 [&_svg]:w-5">
            {suffixIcon}
          </span>
        </span>
      ) : null}
    </div>
  );
}

export function SearchGlyph() {
  return <MagnifyingGlass aria-hidden="true" size={20} weight="regular" />;
}

export function SearchlessInput({
  className,
  error,
  hint,
  id,
  label,
  prefixIcon,
  suffixIcon,
  ...props
}: InputHTMLAttributes<HTMLInputElement> & FieldMeta) {
  const generatedId = useId();
  const fieldId = id ?? generatedId;
  const hintId = hint ? `${fieldId}-hint` : undefined;
  const errorId = error ? `${fieldId}-error` : undefined;

  return (
    <label className="flex w-full flex-col gap-2" htmlFor={fieldId}>
      {label ? <span className="text-sm font-medium text-[var(--uhuru-text-primary)]">{label}</span> : null}
      <PrefixFieldShell prefixIcon={prefixIcon} suffixIcon={suffixIcon}>
        <input
          aria-describedby={[errorId, hintId].filter(Boolean).join(" ") || undefined}
          className={cn(
            fieldClassName(Boolean(error)),
            prefixIcon ? "pl-12" : "",
            suffixIcon ? "pr-12" : "",
            className,
          )}
          id={fieldId}
          {...props}
        />
      </PrefixFieldShell>
      {fieldNote(error, hint, hintId, errorId)}
    </label>
  );
}

export function padTimeUnit(value: number) {
  return String(value).padStart(2, "0");
}

export function parseDateValue(value?: string | number | readonly string[]) {
  if (typeof value !== "string" || !/^\d{4}-\d{2}-\d{2}$/.test(value)) {
    return null;
  }

  const [year, month, day] = value.split("-").map(Number);
  const date = new Date(year, month - 1, day);
  return Number.isNaN(date.getTime()) ? null : date;
}

export function formatDateValue(date: Date) {
  return `${date.getFullYear()}-${padTimeUnit(date.getMonth() + 1)}-${padTimeUnit(date.getDate())}`;
}

export function formatDateLabel(value?: string | number | readonly string[], placeholder = "dd/mm/yyyy") {
  const date = parseDateValue(value);
  if (!date) {
    return placeholder;
  }

  return `${padTimeUnit(date.getDate())}/${padTimeUnit(date.getMonth() + 1)}/${date.getFullYear()}`;
}

export function parseTimeValue(value?: string | number | readonly string[]) {
  if (typeof value !== "string" || !/^\d{2}:\d{2}$/.test(value)) {
    return null;
  }

  const [hours, minutes] = value.split(":").map(Number);
  if (hours < 0 || hours > 23 || minutes < 0 || minutes > 59) {
    return null;
  }

  return { hours, minutes };
}

export function formatTimeValue(hours: number, minutes: number) {
  return `${padTimeUnit(hours)}:${padTimeUnit(minutes)}`;
}

export function formatTimeLabel(value?: string | number | readonly string[], placeholder = "--:--") {
  const time = parseTimeValue(value);
  return time ? formatTimeValue(time.hours, time.minutes) : placeholder;
}

export function startOfMonth(date: Date) {
  return new Date(date.getFullYear(), date.getMonth(), 1);
}

export function shiftMonth(date: Date, amount: number) {
  return new Date(date.getFullYear(), date.getMonth() + amount, 1);
}

export function sameDay(left: Date | null, right: Date | null) {
  if (!left || !right) {
    return false;
  }

  return (
    left.getFullYear() === right.getFullYear() &&
    left.getMonth() === right.getMonth() &&
    left.getDate() === right.getDate()
  );
}

export function compareDates(left: Date, right: Date) {
  const leftValue = new Date(left.getFullYear(), left.getMonth(), left.getDate()).getTime();
  const rightValue = new Date(right.getFullYear(), right.getMonth(), right.getDate()).getTime();
  return leftValue - rightValue;
}

export function buildCalendarDays(month: Date) {
  const firstDay = startOfMonth(month);
  const mondayIndex = (firstDay.getDay() + 6) % 7;
  const start = new Date(firstDay);
  start.setDate(firstDay.getDate() - mondayIndex);

  return Array.from({ length: 42 }, (_, index) => {
    const date = new Date(start);
    date.setDate(start.getDate() + index);
    return date;
  });
}

export function readStepMinutes(step?: string | number) {
  const numericStep = typeof step === "number" ? step : Number(step);
  if (!Number.isFinite(numericStep) || numericStep <= 0) {
    return 1;
  }

  const minutes = numericStep >= 60 ? Math.round(numericStep / 60) : Math.round(numericStep);
  return Math.min(60, Math.max(1, minutes));
}

export const MONTH_LABELS = Array.from({ length: 12 }, (_, index) =>
  new Date(2026, index, 1).toLocaleString("en-US", { month: "short" }),
);

export const CALENDAR_WEEKDAYS = ["M", "T", "W", "T", "F", "S", "S"] as const;

export const PICKER_PANEL_RADIUS = "rounded-[min(var(--uhuru-radius-lg),1.1rem)]";
export const PICKER_ITEM_RADIUS = "rounded-[min(var(--uhuru-radius-control),0.9rem)]";
export const PICKER_TRACK_RADIUS = "rounded-[min(var(--uhuru-radius-lg),1.6rem)]";

export type PopupPlacement = {
  horizontal: "left" | "right";
  vertical: "bottom" | "top";
};

export function resolvePopupPlacement(anchorRect: DOMRect, panelRect: DOMRect): PopupPlacement {
  const spaceBelow = window.innerHeight - anchorRect.bottom;
  const spaceAbove = anchorRect.top;
  const alignLeft = anchorRect.left + panelRect.width <= window.innerWidth;

  return {
    horizontal: alignLeft ? "left" : "right",
    vertical: spaceBelow >= panelRect.height || spaceBelow >= spaceAbove ? "bottom" : "top",
  };
}

export type UploadPreviewItem = {
  error?: string;
  file?: File;
  name: string;
  size: number;
  type: string;
  url?: string;
};

export function matchesAcceptedFileTypes(file: File, acceptedFileTypes?: string[]) {
  if (!acceptedFileTypes || acceptedFileTypes.length === 0) {
    return true;
  }

  const extension = file.name.split(".").pop()?.toLowerCase() ?? "";

  return acceptedFileTypes.some((entry) => {
    const normalized = entry.toLowerCase().trim();
    if (!normalized) {
      return false;
    }

    if (normalized.startsWith(".")) {
      return extension === normalized.slice(1);
    }

    if (normalized.includes("/")) {
      return file.type === normalized || (normalized.endsWith("/*") && file.type.startsWith(normalized.replace("/*", "/")));
    }

    return extension === normalized;
  });
}

export function isPreviewableUpload(file: UploadPreviewItem) {
  return Boolean(file.url) && (file.type.startsWith("image/") || file.type === "application/pdf");
}

export function UploadFileGlyph({ file }: { file: UploadPreviewItem }) {
  const extension = file.name.split(".").pop()?.toLowerCase() ?? "";

  if (file.type.startsWith("audio/") || ["mp3", "wav", "aac", "m4a"].includes(extension)) {
    return <span className="text-[0.625rem] font-semibold uppercase tracking-[0.12em] text-[var(--uhuru-info-text)]">AUD</span>;
  }

  if (file.type.startsWith("video/") || ["mp4", "mov", "avi", "mkv"].includes(extension)) {
    return <span className="text-[0.625rem] font-semibold uppercase tracking-[0.12em] text-[var(--uhuru-warning-text)]">VID</span>;
  }

  if (["zip", "rar", "tar", "gz", "7z"].includes(extension)) {
    return <span className="text-[0.625rem] font-semibold uppercase tracking-[0.12em] text-[var(--uhuru-accent-strong)]">ZIP</span>;
  }

  if (["ts", "tsx", "js", "jsx", "json", "dart", "css", "html", "md"].includes(extension)) {
    return <span className="text-[0.625rem] font-semibold uppercase tracking-[0.12em] text-[var(--uhuru-info-text)]">CODE</span>;
  }

  if (file.type === "application/pdf" || extension === "pdf") {
    return <span className="text-[0.625rem] font-semibold uppercase tracking-[0.12em] text-[var(--uhuru-error-text)]">PDF</span>;
  }

  if (file.type.includes("spreadsheet") || ["csv", "xls", "xlsx"].includes(extension)) {
    return <span className="text-[0.625rem] font-semibold uppercase tracking-[0.12em] text-[var(--uhuru-success-text)]">XLS</span>;
  }

  if (file.type.includes("word") || ["doc", "docx"].includes(extension)) {
    return <span className="text-[0.625rem] font-semibold uppercase tracking-[0.12em] text-[var(--uhuru-info-text)]">DOC</span>;
  }

  return (
    <svg aria-hidden="true" className="h-4 w-4 text-[var(--uhuru-text-secondary)]" fill="none" viewBox="0 0 20 20">
      <path d="M6.75 3.5H11.75L15.25 7V15.25C15.25 15.9404 14.6904 16.5 14 16.5H6.75C6.05964 16.5 5.5 15.9404 5.5 15.25V4.75C5.5 4.05964 6.05964 3.5 6.75 3.5Z" stroke="currentColor" strokeWidth="1.5" />
      <path d="M11.5 3.75V7.25H15" stroke="currentColor" strokeWidth="1.5" />
    </svg>
  );
}

export function formatUploadPreviewSize(size: number) {
  if (!size) {
    return null;
  }

  if (size >= 1024 * 1024) {
    return `${(size / (1024 * 1024)).toFixed(1)} MB`;
  }

  if (size >= 1024) {
    return `${Math.round(size / 1024)} KB`;
  }

  return `${size} B`;
}

export function UploadPreviewChip({
  file,
  index,
  isUploading,
  onRemove,
}: {
  file: UploadPreviewItem;
  index: number;
  isUploading?: boolean;
  onRemove?: (index: number) => void;
}) {
  const previewable = isPreviewableUpload(file);
  const [previewOpen, setPreviewOpen] = useState(false);

  return (
    <div
      className="relative inline-flex max-w-full min-w-0 overflow-visible"
      onClick={(event) => {
        event.preventDefault();
        event.stopPropagation();
      }}
      onFocus={() => previewable && setPreviewOpen(true)}
      onBlur={(event) => {
        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
          setPreviewOpen(false);
        }
      }}
      onKeyDown={(event) => {
        event.stopPropagation();
      }}
      onMouseEnter={() => previewable && setPreviewOpen(true)}
      onMouseLeave={() => setPreviewOpen(false)}
    >
      <span className="inline-flex max-w-full min-w-0 items-center gap-1 overflow-hidden rounded-full border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] px-1.5 py-0.5 text-[0.625rem] text-[var(--uhuru-text-primary)]">
      {previewable ? (
        <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center overflow-hidden rounded-[0.35rem] border border-[var(--uhuru-border-subtle)] bg-[var(--uhuru-surface-muted)]">
          {file.type.startsWith("image/") ? (
            <img
              alt=""
              className="h-full w-full object-cover"
              src={file.url}
            />
          ) : (
            <span className="text-[0.45rem] font-medium uppercase tracking-[0.08em] text-[var(--uhuru-text-secondary)]">
              PDF
            </span>
          )}
        </span>
      ) : (
        <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-[0.35rem] border border-[var(--uhuru-border-subtle)] bg-[var(--uhuru-surface-muted)] [&_svg]:h-3 [&_svg]:w-3">
          <UploadFileGlyph file={file} />
        </span>
      )}
      <span className="min-w-0 flex-1 truncate">{file.name}</span>
      {formatUploadPreviewSize(file.size) ? (
        <span className="shrink-0 rounded-full bg-[var(--uhuru-surface-muted)] px-1 py-0.5 text-[0.5rem] text-[var(--uhuru-text-secondary)]">
          {formatUploadPreviewSize(file.size)}
        </span>
      ) : null}
      {onRemove ? (
        <button
          aria-label={`Remove ${file.name}`}
          className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center rounded-full text-[var(--uhuru-text-secondary)] transition hover:bg-[var(--uhuru-surface-muted)] hover:text-[var(--uhuru-text-primary)] [&_svg]:h-2.5 [&_svg]:w-2.5"
          onClick={(event) => {
            event.preventDefault();
            event.stopPropagation();
            onRemove(index);
          }}
          disabled={isUploading}
          type="button"
        >
          <svg aria-hidden="true" className="h-3.5 w-3.5" fill="none" viewBox="0 0 20 20">
            <path d="M6 6L14 14M14 6L6 14" stroke="currentColor" strokeLinecap="round" strokeWidth="1.8" />
          </svg>
        </button>
      ) : null}
      </span>
      {previewable ? (
        <span
          aria-hidden={!previewOpen}
          className={cn(
            "pointer-events-none absolute bottom-[calc(100%+0.7rem)] left-1/2 z-[90] w-48 -translate-x-1/2 rounded-[min(var(--uhuru-radius-lg),1rem)] border border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)] p-2 shadow-[var(--uhuru-shadow-lg)] transition-[opacity,transform] duration-150",
            previewOpen ? "translate-y-0 opacity-100" : "translate-y-1 opacity-0",
          )}
          role="tooltip"
        >
          <span className="absolute left-1/2 top-full h-3 w-3 -translate-x-1/2 -translate-y-1/2 rotate-45 border-b border-r border-[var(--uhuru-border-default)] bg-[var(--uhuru-surface-default)]" />
          {file.type.startsWith("image/") ? (
            <img alt={file.name} className="h-28 w-full rounded-[0.7rem] object-cover" src={file.url} />
          ) : (
            <iframe className="h-32 w-full rounded-[0.7rem] bg-[var(--uhuru-surface-default)]" src={file.url} title={file.name} />
          )}
          <span className="mt-1 block truncate px-1 text-[0.6875rem] text-[var(--uhuru-text-secondary)]">{file.name}</span>
        </span>
      ) : null}
    </div>
  );
}

export function emitInputChange(
  onChange: ((event: ChangeEvent<HTMLInputElement>) => void) | undefined,
  nextValue: string,
  name?: string,
) {
  onChange?.({
    target: { value: nextValue, name },
    currentTarget: { value: nextValue, name },
  } as ChangeEvent<HTMLInputElement>);
}