'use client';

import { useState } from 'react';
import { cn } from '@/lib/utils';

export function Banner({ kind, children, onClose }: { kind: 'error' | 'success'; children: any; onClose?: () => void }) {
  const colors = kind === 'error'
    ? 'border-red-500/30 bg-red-500/10 text-red-400'
    : 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400';
  return (
    <div className={`rounded-lg border px-4 py-3 text-sm flex items-center justify-between ${colors}`}>
      <span>{children}</span>
      {onClose && <button onClick={onClose} className="ml-4 hover:text-white">&times;</button>}
    </div>
  );
}

export function Field({ label, children, required, hint }: { label: string; children: any; required?: boolean; hint?: string }) {
  return (
    <div>
      <label className="mb-1 block text-sm font-medium text-slate-300">{label} {required && <span className="text-red-400">*</span>}</label>
      {children}
      {hint && <p className="mt-1 text-xs text-slate-500">{hint}</p>}
    </div>
  );
}

export function NumberInput(props: React.InputHTMLAttributes<HTMLInputElement>) {
  return <input {...props} type="number" className={cn('w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none', props.className)} />;
}

export function TextInput(props: React.InputHTMLAttributes<HTMLInputElement>) {
  return <input {...props} className={cn('w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white placeholder:text-slate-400 focus:border-blue-500 focus:outline-none', props.className)} />;
}

export function SelectInput(props: React.SelectHTMLAttributes<HTMLSelectElement>) {
  return <select {...props} className={cn('w-full rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-white focus:border-blue-500 focus:outline-none', props.className)} />;
}

export function useToasts() {
  const [error, setError] = useState<string | null>(null);
  const [success, setSuccess] = useState<string | null>(null);
  return {
    error, success, setError, setSuccess,
    Banners: () => (
      <>
        {error && <Banner kind="error" onClose={() => setError(null)}>{error}</Banner>}
        {success && <Banner kind="success" onClose={() => setSuccess(null)}>{success}</Banner>}
      </>
    ),
  };
}