'use client';

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

/** Referans: h-7.5, text-[13px], rounded-full */
export const sellzyPillOutlineClass =
  'inline-flex h-[30px] cursor-pointer items-center justify-center rounded-full border border-gray-300 bg-white px-4 text-[13px] font-bold leading-[22px] text-gray-700 shadow-none transition-colors hover:bg-gray-50 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-600 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800';

export const sellzyPillPrimaryClass =
  'inline-flex h-[30px] cursor-pointer items-center justify-center rounded-full bg-primary px-4 text-[13px] font-bold leading-[22px] text-white transition-colors hover:bg-primary-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50';

export const sellzyRowPillPrimaryClass =
  'inline-flex h-8 cursor-pointer items-center justify-center rounded-full bg-primary px-4 text-xs font-bold text-white transition-colors hover:bg-primary-dark focus:outline-none';

export const sellzyRowPillOutlineClass =
  'inline-flex h-8 cursor-pointer items-center justify-center rounded-full border border-gray-300 px-4 text-xs font-bold text-gray-700 transition-colors hover:bg-gray-50 focus:outline-none dark:border-zinc-600 dark:text-zinc-200 dark:hover:bg-zinc-800';

export function SellzyListCard({ className, children }: { className?: string; children: React.ReactNode }) {
  return (
    <div
      className={cn(
        'rounded-2xl bg-white pt-4 shadow-[0_1px_2px_rgba(15,23,42,0.04)] sm:pt-6 dark:bg-zinc-900 dark:shadow-none dark:ring-1 dark:ring-zinc-800',
        className,
      )}
    >
      {children}
    </div>
  );
}

export function SellzyListSection({ className, children }: { className?: string; children: React.ReactNode }) {
  return <div className={cn('w-full px-4 sm:px-6', className)}>{children}</div>;
}

export function SellzyListHeader({
  title,
  actions,
}: {
  title: string;
  actions?: React.ReactNode;
}) {
  return (
    <div className="mb-4 flex flex-col justify-between gap-4 sm:mb-6 sm:flex-row sm:items-center">
      <h2 className="text-lg font-bold text-light-primary-text sm:text-xl dark:text-white">{title}</h2>
      {actions ? <div className="flex flex-wrap items-center gap-3">{actions}</div> : null}
    </div>
  );
}

export function SellzyStatGrid({ className, children }: { className?: string; children: React.ReactNode }) {
  return (
    <div className={cn('grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-4', className)}>{children}</div>
  );
}

export function SellzyStatCard({
  bgClass,
  icon,
  label,
  value,
}: {
  bgClass: string;
  icon: React.ReactNode;
  label: string;
  value: React.ReactNode;
}) {
  return (
    <div className={cn('flex items-center gap-4 rounded-2xl p-4 sm:p-6', bgClass)}>
      <div className="flex size-12 shrink-0 items-center justify-center rounded-full bg-white text-light-primary-text dark:bg-zinc-900 dark:text-zinc-100">
        {icon}
      </div>
      <div className="min-w-0">
        <p className="mb-1 text-xs font-semibold text-light-secondary-text">{label}</p>
        <p className="text-2xl font-bold text-light-primary-text dark:text-white">{value}</p>
      </div>
    </div>
  );
}

export function SellzyToolbar({ className, children }: { className?: string; children: React.ReactNode }) {
  return (
    <div className={cn('px-4 pb-4 pt-6 sm:px-6 dark:border-white/10', className)}>
      <div className="flex w-full flex-col justify-between gap-4 lg:flex-row lg:items-center">{children}</div>
    </div>
  );
}

export function SellzyFilterSelect({
  value,
  onChange,
  options,
  placeholder,
  className,
  minWidthClass = 'min-w-[120px]',
  showBlankOption = true,
}: {
  value: string;
  onChange: (v: string) => void;
  options: { value: string; label: string }[];
  placeholder: string;
  className?: string;
  minWidthClass?: string;
  /** false: yalnızca options (ör. sıralama / durum) */
  showBlankOption?: boolean;
}) {
  return (
    <div className={cn('relative', minWidthClass, className)}>
      <select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className="h-9 w-full cursor-pointer appearance-none rounded-full border-0 bg-gray-200 py-2 pr-9 pl-3 text-left text-sm text-light-secondary-text ring-1 ring-[rgba(145,158,171,0.2)] focus:ring-2 focus:ring-primary/25 focus:outline-none dark:bg-zinc-800 dark:text-zinc-300 dark:ring-white/15"
        aria-label={placeholder}
      >
        {showBlankOption ? <option value="">{placeholder}</option> : null}
        {options.map((o) => (
          <option key={o.value} value={o.value}>
            {o.label}
          </option>
        ))}
      </select>
      <ChevronDown
        className="pointer-events-none absolute top-1/2 right-2 size-5 -translate-y-1/2 text-light-secondary-text opacity-80"
        strokeWidth={2}
        aria-hidden
      />
    </div>
  );
}

const checkboxBoxClass =
  'flex h-5 w-5 shrink-0 items-center justify-center rounded border-2 border-gray-500 bg-transparent transition-all peer-focus-visible:ring-2 peer-focus-visible:ring-primary peer-focus-visible:ring-offset-2 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-checked:border-primary peer-checked:bg-primary peer-checked:text-white [&_svg]:opacity-0 peer-checked:[&_svg]:opacity-100';

export function SellzyTableCheckboxHeader({
  checked,
  indeterminate,
  onChange,
  disabled,
}: {
  checked: boolean;
  indeterminate?: boolean;
  onChange: (next: boolean) => void;
  disabled?: boolean;
}) {
  const ref = React.useRef<HTMLInputElement>(null);
  React.useEffect(() => {
    if (ref.current) ref.current.indeterminate = !!indeterminate && !checked;
  }, [indeterminate, checked]);

  return (
    <label className="relative inline-flex cursor-pointer items-center">
      <input
        ref={ref}
        type="checkbox"
        className="peer sr-only"
        checked={checked}
        disabled={disabled}
        onChange={(e) => onChange(e.target.checked)}
      />
      <div className={checkboxBoxClass}>
        <Check className="h-3.5 w-3.5" strokeWidth={3} aria-hidden />
      </div>
    </label>
  );
}

export function SellzyTableCheckboxCell({
  checked,
  onChange,
  disabled,
}: {
  checked: boolean;
  onChange: (next: boolean) => void;
  disabled?: boolean;
}) {
  return (
    <label className="relative inline-flex cursor-pointer items-center">
      <input
        type="checkbox"
        className="peer sr-only"
        checked={checked}
        disabled={disabled}
        onChange={(e) => onChange(e.target.checked)}
      />
      <div className={checkboxBoxClass}>
        <Check className="h-3.5 w-3.5" strokeWidth={3} aria-hidden />
      </div>
    </label>
  );
}