'use client';

import * as React from 'react';
import Link from 'next/link';
import { Search } from 'lucide-react';
import { cn } from '@/lib/utils';

/** Ürün listesi / Sellzy tarzı — rounded-2xl beyaz kart */
export function ListDataCard({ className, children }: { className?: string; children: React.ReactNode }) {
  return (
    <div
      className={cn(
        'w-full rounded-2xl bg-white shadow-[0_1px_2px_rgba(15,23,42,0.04)] dark:bg-zinc-900 dark:shadow-none dark:ring-1 dark:ring-zinc-800',
        className,
      )}
    >
      {children}
    </div>
  );
}

export function ListDataCardHeader({ className, children }: { className?: string; children: React.ReactNode }) {
  return <div className={cn('space-y-4 p-4 pb-4 sm:p-6 sm:pb-4', className)}>{children}</div>;
}

export function ListDataCardTitleBlock({
  title,
  description,
  action,
}: {
  title: string;
  description?: string;
  action?: React.ReactNode;
}) {
  return (
    <div className="mb-1 flex flex-wrap items-center justify-between gap-4 sm:mb-0">
      <div className="min-w-0">
        <h3 className="text-xl font-bold leading-7 text-slate-900 dark:text-white">{title}</h3>
        {description ? <p className="mt-1 text-sm leading-relaxed text-slate-500 dark:text-zinc-400">{description}</p> : null}
      </div>
      {action ? <div className="shrink-0">{action}</div> : null}
    </div>
  );
}

export function ListDataCardToolbar({ className, children }: { className?: string; children: React.ReactNode }) {
  return (
    <div
      className={cn(
        'flex flex-col flex-wrap gap-4 lg:flex-row lg:items-center lg:justify-between',
        className,
      )}
    >
      {children}
    </div>
  );
}

export function ListPrimaryLink({ href, className, children }: { href: string; className?: string; children: React.ReactNode }) {
  return (
    <Link
      href={href}
      className={cn(
        'inline-flex h-9 cursor-pointer items-center justify-center rounded-full bg-brand-600 px-4 text-sm font-bold leading-6 text-white transition-colors hover:bg-brand-700 active:bg-brand-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/40 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900',
        className,
      )}
    >
      {children}
    </Link>
  );
}

export function ListPrimaryButton({
  type = 'button',
  className,
  disabled,
  onClick,
  children,
}: {
  type?: 'button' | 'submit';
  className?: string;
  disabled?: boolean;
  onClick?: () => void;
  children: React.ReactNode;
}) {
  return (
    <button
      type={type}
      disabled={disabled}
      onClick={onClick}
      className={cn(
        'inline-flex h-9 cursor-pointer items-center justify-center rounded-full bg-brand-600 px-4 text-sm font-bold leading-6 text-white transition-colors hover:bg-brand-700 active:bg-brand-800 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/40 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:bg-slate-300/90 disabled:text-slate-500 dark:disabled:bg-zinc-700 dark:disabled:text-zinc-400 dark:focus-visible:ring-offset-zinc-900',
        className,
      )}
    >
      {children}
    </button>
  );
}

/** Satır içi ikon aksiyonları (görüntüle / düzenle / sil) */
export const listRowIconClass =
  'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-slate-800 transition-colors hover:bg-gray-100 hover:text-brand-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30 dark:text-zinc-200 dark:hover:bg-zinc-800 dark:hover:text-brand-400';

export const listRowIconDangerClass =
  'inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-slate-800 transition-colors hover:bg-gray-100 hover:text-red-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500/25 dark:text-zinc-200 dark:hover:bg-zinc-800 dark:hover:text-red-400';

export function ListTableActions({ className, children }: { className?: string; children: React.ReactNode }) {
  return <div className={cn('flex items-center justify-start gap-1', className)}>{children}</div>;
}

export function TableSegmentGroup({ className, children }: { className?: string; children: React.ReactNode }) {
  return (
    <div className={cn('flex flex-wrap items-center gap-2', className)}>{children}</div>
  );
}

export function TableSegment({
  active,
  children,
  onClick,
}: {
  active?: boolean;
  children: React.ReactNode;
  onClick?: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        'inline-flex h-9 min-w-[100px] shrink-0 items-center justify-center rounded-full px-4 text-sm font-medium ring-1 transition-colors ring-slate-900/10 dark:ring-white/10 sm:min-w-[140px]',
        active
          ? 'bg-brand-500/15 font-semibold text-brand-700 ring-brand-500/25 dark:bg-brand-500/20 dark:text-brand-300'
          : 'bg-gray-200 text-slate-600 hover:bg-gray-300/80 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:bg-zinc-700',
      )}
    >
      <span className="truncate">{children}</span>
    </button>
  );
}

export function TableToolbarSearch({ className, ...props }: React.InputHTMLAttributes<HTMLInputElement> & { className?: string }) {
  const clipId = React.useId().replace(/:/g, '');
  return (
    <div className={cn('relative w-full sm:w-[300px]', className)}>
      <svg
        className="pointer-events-none absolute left-3 top-1/2 z-10 size-4 -translate-y-1/2 text-slate-800 dark:text-zinc-200"
        fill="none"
        viewBox="0 0 16 16"
        aria-hidden
      >
        <g clipPath={`url(#list-search-${clipId})`}>
          <path
            fill="currentColor"
            fillRule="evenodd"
            d="M7.333.583a6.75 6.75 0 1 0 4.213 12.022l2.59 2.592a.75.75 0 0 0 1.062-1.06l-2.591-2.592A6.75 6.75 0 0 0 7.334.583zm0 1.5a5.25 5.25 0 1 1 0 10.5 5.25 5.25 0 0 1 0-10.5"
            clipRule="evenodd"
          />
        </g>
        <defs>
          <clipPath id={`list-search-${clipId}`}>
            <path fill="currentColor" d="M0 0h16v16H0z" />
          </clipPath>
        </defs>
      </svg>
      <input
        className={cn(
          'h-9 w-full rounded-full border-none bg-gray-100 py-2 pr-3.5 pl-9 text-sm font-normal text-slate-900 ring-1 ring-slate-900/10 transition-all placeholder:text-slate-500 focus:bg-white focus:outline-none focus:ring-2 focus:ring-brand-500/25 dark:bg-zinc-800 dark:text-white dark:ring-white/10 dark:placeholder:text-zinc-500 dark:focus:bg-zinc-900 dark:focus:ring-brand-500/30',
        )}
        {...props}
      />
    </div>
  );
}

/** Durum rozetleri — Publish / Draft benzeri */
export function ListStatusBadge({
  tone = 'primary',
  children,
  className,
}: {
  tone?: 'primary' | 'warning' | 'neutral' | 'success';
  children: React.ReactNode;
  className?: string;
}) {
  const tones = {
    primary: 'bg-brand-500/15 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300',
    warning: 'bg-amber-500/15 text-amber-800 dark:bg-amber-500/20 dark:text-amber-200',
    neutral: 'bg-slate-500/10 text-slate-700 dark:bg-zinc-500/20 dark:text-zinc-300',
    success: 'bg-emerald-500/15 text-emerald-800 dark:bg-emerald-500/20 dark:text-emerald-200',
  } as const;
  return (
    <span
      className={cn(
        'inline-flex h-6 items-center justify-center rounded-full px-2 py-0.5 text-xs font-medium',
        tones[tone],
        className,
      )}
    >
      {children}
    </span>
  );
}

export function ListDataCardBody({ className, children }: { className?: string; children: React.ReactNode }) {
  return (
    <div className={cn('w-full', className)}>
      <div className="relative w-full overflow-x-auto">{children}</div>
    </div>
  );
}