'use client';

import * as React from 'react';
import { cn } from '@/lib/utils';

/** Şablon: Default Inputs / Select / Textarea ile aynı sınıf seti */
export const templateLabel =
  'mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400';

export const templateInput = cn(
  'h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 shadow-theme-xs appearance-none',
  'placeholder:text-gray-400 focus:border-brand-300 focus:outline-none focus:ring-3 focus:ring-brand-500/20',
  'dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:focus:border-brand-800',
);

export const templateTextarea = cn(
  'w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm shadow-theme-xs',
  'text-gray-900 placeholder:text-gray-400 focus:border-brand-300 focus:outline-none focus:ring-3 focus:ring-brand-500/10',
  'dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:text-gray-300 dark:focus:border-brand-800',
);

const templateSelectInner = cn(
  'h-11 w-full cursor-pointer appearance-none rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 shadow-theme-xs',
  'focus:border-brand-300 focus:outline-none focus:ring-3 focus:ring-brand-500/10',
  'dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:focus:border-brand-800',
);

export function TemplateFormShell({ children }: { children: React.ReactNode }) {
  return <div className="mx-auto w-full max-w-[1536px] pb-20 md:pb-24">{children}</div>;
}

export function TemplateFormTopBar({ title, children }: { title: string; children?: React.ReactNode }) {
  return (
    <div className="mb-6 flex flex-wrap items-center justify-between gap-3">
      <h2 className="text-xl font-semibold text-gray-800 dark:text-white/90">{title}</h2>
      {children}
    </div>
  );
}

export function TemplateFormGrid({ children }: { children: React.ReactNode }) {
  return <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">{children}</div>;
}

export function TemplateFormColumn({ children }: { children: React.ReactNode }) {
  return <div className="space-y-6">{children}</div>;
}

export function TemplateCard({
  title,
  description,
  children,
  className,
}: {
  title: string;
  description?: string;
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn(
        'rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]',
        className,
      )}
    >
      <div className="px-6 py-5">
        <h3 className="text-base font-medium text-gray-800 dark:text-white/90">{title}</h3>
        {description ? <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">{description}</p> : null}
      </div>
      <div className="border-t border-gray-100 p-4 sm:p-6 dark:border-gray-800">
        <div className="space-y-6">{children}</div>
      </div>
    </div>
  );
}

export function TemplateField({ label, htmlFor, children }: { label: string; htmlFor?: string; children: React.ReactNode }) {
  return (
    <div>
      <label htmlFor={htmlFor} className={templateLabel}>
        {label}
      </label>
      <div className="relative">{children}</div>
    </div>
  );
}

export function SelectChevron({ className }: { className?: string }) {
  return (
    <svg
      className={cn(
        'pointer-events-none absolute top-1/2 right-3 size-5 -translate-y-1/2 text-gray-700 dark:text-gray-400',
        className,
      )}
      width={20}
      height={20}
      viewBox="0 0 20 20"
      fill="none"
      aria-hidden
    >
      <path
        d="M4.79175 8.02075L10.0001 13.2291L15.2084 8.02075"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export function TemplateSelect({
  className,
  children,
  ...props
}: React.SelectHTMLAttributes<HTMLSelectElement>) {
  return (
    <div className="relative">
      <select {...props} className={cn(templateSelectInner, className)}>
        {children}
      </select>
      <SelectChevron />
    </div>
  );
}