import type { LucideIcon } from "lucide-react";
import type { ReactNode } from "react";
import { cn } from "@/shared/common/ui/fileUploader/utils";

export function PortalFormPage({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  return (
    <div className={cn("min-h-screen bg-slate-50 py-8 md:py-10", className)}>
      <div className="mx-auto w-full max-w-3xl px-4 md:px-6">{children}</div>
    </div>
  );
}

export function PortalFormHeader({
  title,
  subtitle,
}: {
  title: string;
  subtitle?: string;
}) {
  return (
    <div className="mb-8 text-center">
      <h1
        id="form-title"
        className="text-2xl font-bold tracking-tight text-slate-900 md:text-3xl">
        {title}
      </h1>
      {subtitle ? (
        <p className="mt-2 text-sm text-slate-600 md:text-base">{subtitle}</p>
      ) : null}
    </div>
  );
}

export function PortalFormSection({
  children,
  className,
}: {
  children: ReactNode;
  className?: string;
}) {
  return (
    <section
      className={cn(
        "rounded-xl border border-slate-200 bg-white p-5 shadow-sm md:p-6",
        className,
      )}>
      {children}
    </section>
  );
}

export function PortalFieldLabel({
  children,
  required,
}: {
  children: ReactNode;
  required?: boolean;
}) {
  return (
    <span className="text-xs font-semibold uppercase tracking-wider text-slate-500">
      {children}
      {required ? <span className="ml-0.5 text-red-600">*</span> : null}
    </span>
  );
}

export function PortalReadOnlyField({
  label,
  value,
  icon: Icon,
  mono = false,
}: {
  label: string;
  value?: string;
  icon?: LucideIcon;
  mono?: boolean;
}) {
  if (!value) return null;

  return (
    <div className="space-y-1.5">
      <PortalFieldLabel>{label}</PortalFieldLabel>
      <div className="relative">
        {Icon ? (
          <Icon className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
        ) : null}
        <div
          className={cn(
            "rounded-lg border border-slate-200 bg-white py-2.5 text-sm text-slate-800",
            Icon ? "pl-10 pr-3" : "px-3",
            mono && "font-mono",
          )}>
          {value}
        </div>
      </div>
    </div>
  );
}
