import React from 'react';
import { HelpCircle } from 'lucide-react';
import { Tooltip } from '../Tooltip';
import { Toggle } from '../Toggle';
import { Input } from '../Input';
import { Select } from '../Select';
import { Badge } from '../Badge';

export interface SettingRowProps {
  label: string;
  description?: string;
  helpText?: string;
  icon?: React.ReactNode;
  badge?: {
    text: string;
    variant?: 'default' | 'success' | 'warning' | 'danger' | 'info';
  };

  // For toggle type
  type?: 'toggle' | 'input' | 'select' | 'custom';
  checked?: boolean;
  onToggle?: (checked: boolean) => void;

  // For input type
  inputType?: 'text' | 'number' | 'email' | 'tel' | 'password';
  value?: string | number;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
  placeholder?: string;
  min?: number;
  max?: number;
  step?: number;
  error?: string;

  // For select type
  options?: Array<{ value: string; label: string }>;
  selectValue?: string;
  onSelectChange?: (value: string) => void;

  // For custom content
  children?: React.ReactNode;

  // Common props
  disabled?: boolean;
  className?: string;
  required?: boolean;
}

const SettingRow: React.FC<SettingRowProps> = ({
  label,
  description,
  helpText,
  icon,
  badge,
  type = 'toggle',
  checked,
  onToggle,
  inputType = 'text',
  value,
  onChange,
  placeholder,
  min,
  max,
  step,
  error,
  options = [],
  selectValue,
  onSelectChange,
  children,
  disabled = false,
  className = '',
  required = false,
}) => {
  const renderControl = () => {
    switch (type) {
      case 'toggle':
        return (
          <Toggle
            checked={checked || false}
            onChange={onToggle || (() => {})}
            disabled={disabled}
            size="md"
          />
        );

      case 'input':
        return (
          <div className="w-full max-w-xs">
            <Input
              type={inputType}
              value={value}
              onChange={onChange}
              placeholder={placeholder}
              min={min}
              max={max}
              step={step}
              error={error}
              disabled={disabled}
              required={required}
            />
          </div>
        );

      case 'select':
        return (
          <div className="w-full max-w-xs">
            <Select
              options={options}
              value={selectValue}
              onChange={onSelectChange}
              disabled={disabled}
              required={required}
            />
          </div>
        );

      case 'custom':
        return children;

      default:
        return null;
    }
  };

  return (
    <div className={`
      flex flex-col sm:flex-row sm:items-center sm:justify-between
      gap-3 sm:gap-6 py-4 px-4 sm:px-6
      border-b border-[var(--border-primary)] last:border-b-0
      hover:bg-[var(--bg-secondary)] transition-colors
      ${className}
    `}>
      {/* Left side - Label and Description */}
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 mb-1">
          {icon && (
            <div className="flex-shrink-0 text-[var(--text-secondary)]">
              {icon}
            </div>
          )}

          <label className="text-sm font-medium text-[var(--text-primary)] flex items-center gap-2">
            {label}
            {required && <span className="text-red-500">*</span>}
          </label>

          {badge && (
            <Badge variant={badge.variant || 'default'} size="sm">
              {badge.text}
            </Badge>
          )}

          {helpText && (
            <Tooltip content={helpText}>
              <HelpCircle className="w-4 h-4 text-[var(--text-tertiary)] cursor-help" />
            </Tooltip>
          )}
        </div>

        {description && (
          <p className="text-xs text-[var(--text-secondary)] mt-1">
            {description}
          </p>
        )}

        {error && (
          <p className="text-xs text-red-500 mt-1">
            {error}
          </p>
        )}
      </div>

      {/* Right side - Control */}
      <div className="flex-shrink-0">
        {renderControl()}
      </div>
    </div>
  );
};

export default SettingRow;
