import React from 'react';
import { cn } from '../../lib/utils';
import { motion, AnimatePresence } from 'framer-motion';
import { Info, type LucideIcon } from 'lucide-react';
import { Switch } from './switch';
import { SafeRender } from './settings-ui';

interface CompactSettingCardProps {
  title: string;
  description?: string;
  icon?: LucideIcon;
  checked?: boolean;
  onChange?: (checked: boolean) => void;
  statusMessage?: React.ReactNode;
  statusType?: 'active' | 'inactive' | 'error' | 'warning';
  disabled?: boolean;
  className?: string;
  children?: React.ReactNode;
  hideSwitch?: boolean;
  rightAction?: React.ReactNode;
}

export const CompactSettingCard: React.FC<CompactSettingCardProps> = ({
  title,
  description,
  icon: Icon,
  checked,
  onChange,
  statusMessage,
  statusType = 'active',
  disabled = false,
  className = "",
  children,
  hideSwitch = false,
  rightAction
}) => {
  const statusStyles = {
    active: 'text-emerald-600 bg-emerald-50/50 border-emerald-100',
    inactive: 'text-slate-500 bg-slate-50/50 border-slate-100',
    error: 'text-rose-600 bg-rose-50/50 border-rose-100',
    warning: 'text-amber-600 bg-amber-50/50 border-amber-100'
  };

  return (
    <div className={cn(
      "group relative bg-white border border-[#dcdcde] rounded-[5px] px-6 py-4 shadow-none transition-all duration-300",
      disabled && "opacity-60 cursor-not-allowed",
      className
    )}>
      {/* Header Row */}
      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div className="flex-1 min-w-0">
          <div className="text-base md:text-lg font-bold flex items-center gap-2 text-slate-800">
            {Icon && (
              <Icon size={20} className="text-slate-800 opacity-70 shrink-0" />
            )}
            <h4 className="leading-tight truncate !m-0 !p-0 !border-none !bg-transparent">
              <SafeRender content={title} />
            </h4>
          </div>
          {description && (
            <div className="text-xs font-medium text-slate-500 mt-0.5">
              <SafeRender content={description} />
            </div>
          )}
        </div>

        <div className="flex items-center gap-3 shrink-0">
          {rightAction && (
            <div className="mr-2">
              {rightAction}
            </div>
          )}

          {!hideSwitch && onChange !== undefined && checked !== undefined && (
            <Switch
              checked={checked}
              onCheckedChange={onChange}
              disabled={disabled}
            />
          )}
        </div>
      </div>

      {/* Children Content */}
      {children && (
        <div className="mt-6 pt-6 border-t border-slate-50">
          {children}
        </div>
      )}

      {/* Status Box */}
      <AnimatePresence>
        {statusMessage && (
          <motion.div
            initial={{ opacity: 0, height: 0, marginTop: 0 }}
            animate={{ opacity: 1, height: 'auto', marginTop: 16 }}
            exit={{ opacity: 0, height: 0, marginTop: 0 }}
            className="overflow-hidden"
          >
            <div className={cn(
              "flex items-start gap-2.5 p-3 rounded-[5px] border text-[12px] font-medium transition-colors",
              statusStyles[statusType]
            )}>
              <Info size={15} className="shrink-0 mt-0.5 opacity-70" />
              <div className="flex-1 leading-relaxed">
                <SafeRender content={statusMessage} isHtml={true} />
              </div>
            </div>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};