"use client";

import * as React from "react";
import { type LucideIcon } from "lucide-react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";

export function SectionCard({
  icon: Icon,
  title,
  description,
  children,
  className,
}: {
  icon: LucideIcon;
  title: string;
  description?: string;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <section className={cn("rounded-2xl border bg-card shadow-sm", className)}>
      <header className="flex items-start gap-3 border-b p-5">
        <span className="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary">
          <Icon className="size-[18px]" />
        </span>
        <div className="min-w-0 space-y-0.5">
          <h2 className="font-display text-base font-semibold">{title}</h2>
          {description ? (
            <p className="text-sm leading-relaxed text-muted-foreground">{description}</p>
          ) : null}
        </div>
      </header>
      <div className="p-5">{children}</div>
    </section>
  );
}

export function TextField({
  id,
  name,
  label,
  value,
  onChange,
  error,
  hint,
  type = "text",
  disabled,
  readOnly,
  placeholder,
  autoComplete,
  className,
}: {
  id: string;
  name?: string;
  label: string;
  value: string;
  onChange?: (value: string) => void;
  error?: string;
  hint?: string;
  type?: string;
  disabled?: boolean;
  readOnly?: boolean;
  placeholder?: string;
  autoComplete?: string;
  className?: string;
}) {
  return (
    <div className={cn("space-y-1.5", className)}>
      <Label htmlFor={id} className="text-sm font-medium">
        {label}
      </Label>
      <Input
        id={id}
        name={name ?? id}
        type={type}
        value={value}
        onChange={(e) => onChange?.(e.target.value)}
        disabled={disabled}
        readOnly={readOnly}
        placeholder={placeholder}
        autoComplete={autoComplete}
        aria-invalid={error ? true : undefined}
        className={cn(
          "h-9",
          readOnly && "cursor-not-allowed bg-muted/50 text-muted-foreground",
        )}
      />
      {error ? (
        <p className="text-xs font-medium text-destructive">{error}</p>
      ) : hint ? (
        <p className="text-xs text-muted-foreground">{hint}</p>
      ) : null}
    </div>
  );
}

export function FormFooter({
  children,
  message,
  tone = "success",
}: {
  children: React.ReactNode;
  message?: string | null;
  tone?: "success" | "error";
}) {
  return (
    <div className="mt-5 flex flex-wrap items-center justify-between gap-3 border-t pt-4">
      <p
        className={cn(
          "text-xs",
          tone === "error" ? "text-destructive" : "text-emerald-600 dark:text-emerald-400",
        )}
      >
        {message ?? ""}
      </p>
      <div className="flex items-center gap-2">{children}</div>
    </div>
  );
}