'use client';

import * as React from 'react';
import { ChevronDown, ImagePlus } from 'lucide-react';
import { cn } from '@/lib/utils';

/** Yüzen etiket satırı (~top-2 + ~1rem yazı) için üst boşluk; aksi halde etiket değerle çakışır */
const inputPadWithFloatedLabel = 'pt-7 pb-2';

/** Görseldeki outlined / yüzen etiket — ~56px yükseklik, xl köşe, odakta koyu teal çerçeve */
const inputBase =
  'block w-full rounded-xl border border-gray-200 bg-transparent px-3.5 text-sm text-light-primary-text transition-colors focus:outline-none dark:border-zinc-600 dark:text-zinc-100';

const inputFocus =
  'focus:border-[#0d4a42] focus:ring-1 focus:ring-[#0d4a42]/20 dark:focus:border-[#5eead4] dark:focus:ring-teal-500/25';

const labelTextSize = 'text-[0.875rem]';

const labelFloated = cn(
  labelTextSize,
  'absolute left-3.5 top-2 z-20 origin-left cursor-text bg-white px-1 font-medium text-[#0d4a42] transition-all duration-200 dark:bg-zinc-900 dark:text-teal-400',
);

export function OutlineFormCard({
  title,
  children,
  className,
}: {
  title: string;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn(
        'rounded-2xl border border-gray-500/20 bg-white p-6 dark:border-white/10 dark:bg-zinc-900/60',
        className,
      )}
    >
      <h2 className="mb-6 text-lg font-bold leading-7 text-light-primary-text dark:text-white">{title}</h2>
      {children}
    </div>
  );
}

export function OutlinePhotoDropzone({
  previewUrl,
  onFile,
  title = 'Öğrenci fotoğrafı',
  hint = (
    <>
      *.jpeg, *.jpg, *.png, *.gif
      <br />
      En fazla 3.1 MB
    </>
  ),
}: {
  previewUrl: string;
  onFile: (file: File | undefined) => void;
  title?: string;
  hint?: React.ReactNode;
}) {
  const fileInputRef = React.useRef<HTMLInputElement>(null);
  return (
    <div className="h-full w-full">
      <input
        ref={fileInputRef}
        type="file"
        accept="image/*"
        className="hidden"
        onChange={(e) => onFile(e.target.files?.[0])}
      />
      <button
        type="button"
        onClick={() => fileInputRef.current?.click()}
        className="group relative flex h-full min-h-[200px] w-full cursor-pointer flex-col items-center justify-center overflow-hidden rounded-xl border border-dashed border-gray-300 bg-white p-6 text-center transition-colors hover:bg-gray-50 dark:border-zinc-600 dark:bg-zinc-900/40 dark:hover:bg-zinc-800/50"
      >
        {previewUrl ? (
          <img src={previewUrl} alt="Önizleme" className="absolute inset-0 h-full w-full object-cover" />
        ) : (
          <div className="flex flex-col items-center gap-4">
            <div className="flex size-10 items-center justify-center rounded-full text-light-primary-text dark:text-zinc-200">
              <ImagePlus className="size-10" strokeWidth={1.25} />
            </div>
            <div className="space-y-1">
              <p className="text-sm font-semibold text-light-secondary-text dark:text-zinc-400">{title}</p>
              <p className="text-xs text-light-secondary-text dark:text-zinc-500">{hint}</p>
            </div>
          </div>
        )}
      </button>
    </div>
  );
}

export function FloatingOutlineText({
  id,
  label,
  value,
  onChange,
  required,
  type = 'text',
  className,
  autoComplete,
  list,
  minLength,
}: {
  id: string;
  label: string;
  value: string;
  onChange: (v: string) => void;
  required?: boolean;
  type?: string;
  className?: string;
  autoComplete?: string;
  list?: string;
  minLength?: number;
}) {
  const [focused, setFocused] = React.useState(false);
  const hasValue = value.trim().length > 0;
  const labelUp = focused || hasValue;

  return (
    <div className={cn('w-full min-w-0', className)}>
      <div className="relative min-h-14 w-full min-w-0">
        <input
          id={id}
          type={type}
          value={value}
          onChange={(e) => onChange(e.target.value)}
          onFocus={() => setFocused(true)}
          onBlur={() => setFocused(false)}
          required={required}
          minLength={minLength}
          autoComplete={autoComplete}
          list={list}
          className={cn(
            inputBase,
            'relative z-0 min-w-0 box-border min-h-14 h-14 w-full bg-white dark:bg-zinc-900/80',
            labelUp ? inputPadWithFloatedLabel : 'py-4',
            inputFocus,
          )}
        />
        <label
          htmlFor={id}
          className={cn(
            labelTextSize,
            'pointer-events-none absolute left-0 z-10 max-w-[calc(100%-0.75rem)] pl-3.5 leading-tight transition-[top,transform,font-size,color] duration-200 ease-out',
            labelUp
              ? 'top-2 translate-y-0 font-medium text-[#0d4a42] dark:text-teal-400'
              : 'top-1/2 -translate-y-1/2 font-normal text-gray-400 dark:text-zinc-500',
          )}
        >
          <span
            className={cn(
              'inline-block rounded px-0.5',
              labelUp ? 'bg-white dark:bg-zinc-900' : 'bg-transparent',
            )}
          >
            {label}
            {required ? <span className="text-red-500"> *</span> : null}
          </span>
        </label>
      </div>
    </div>
  );
}

export function FloatingOutlineSelect({
  id,
  label,
  value,
  onChange,
  required,
  children,
  className,
}: {
  id: string;
  label: string;
  value: string;
  onChange: (v: string) => void;
  required?: boolean;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div className={cn('relative', className)}>
      <div className="relative">
        <select
          id={id}
          value={value}
          required={required}
          onChange={(e) => onChange(e.target.value)}
          className={cn(
            'box-border min-h-14 w-full cursor-pointer appearance-none rounded-xl border border-gray-200 bg-white pl-3.5 pr-10 text-sm text-light-primary-text focus:outline-none dark:border-zinc-600 dark:bg-zinc-900/80 dark:text-zinc-100',
            inputPadWithFloatedLabel,
            inputFocus,
          )}
        >
          {children}
        </select>
        <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
          <ChevronDown className="size-5 text-gray-400" strokeWidth={2} aria-hidden />
        </span>
      </div>
      <label htmlFor={id} className={cn(labelFloated, 'pointer-events-none')}>
        {label}
        {required ? <span className="text-red-500"> *</span> : null}
      </label>
    </div>
  );
}

export function FloatingOutlineDate({
  id,
  label,
  value,
  onChange,
  required,
  className,
}: {
  id: string;
  label: string;
  value: string;
  onChange: (v: string) => void;
  required?: boolean;
  className?: string;
}) {
  return (
    <div className={cn('group relative', className)}>
      <input
        id={id}
        type="date"
        value={value}
        required={required}
        onChange={(e) => onChange(e.target.value)}
        className={cn(
          'box-border h-14 w-full rounded-xl border border-gray-200 bg-white px-3.5 text-sm text-light-primary-text focus:outline-none dark:border-zinc-600 dark:bg-zinc-900/80 dark:text-zinc-100',
          inputPadWithFloatedLabel,
          inputFocus,
        )}
      />
      <label htmlFor={id} className={cn(labelFloated, 'pointer-events-none')}>
        {label}
        {required ? <span className="text-red-500"> *</span> : null}
      </label>
    </div>
  );
}

export function FloatingOutlineTextarea({
  id,
  label,
  value,
  onChange,
  rows = 4,
  className,
}: {
  id: string;
  label: string;
  value: string;
  onChange: (v: string) => void;
  rows?: number;
  className?: string;
}) {
  return (
    <div className={cn('relative', className)}>
      <label htmlFor={id} className={cn(labelFloated, 'pointer-events-none')}>
        {label}
      </label>
      <textarea
        id={id}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        rows={rows}
        className={cn(
          'mt-1 min-h-[100px] w-full resize-y rounded-xl border border-gray-200 bg-white px-3.5 pb-3 pt-9 text-sm text-light-primary-text dark:border-zinc-600 dark:bg-zinc-900/80 dark:text-zinc-100',
          inputFocus,
        )}
      />
    </div>
  );
}