import React, { ReactNode } from 'react';
import { Card } from '../../components/ui/card';
import { StatusBadge } from '../../settings/components/StatusBadge';
import { DetailRow } from '../../settings/components/DetailRow';

export interface DetailRowData {
  label: string;
  value: string;
  valueClassName?: string;
}

export interface ToolStatusCardProps {
  // Header
  icon: ReactNode;
  title: string;
  installed: boolean;
  running?: boolean;

  // Details
  details?: DetailRowData[];
  additionalSections?: ReactNode[];

  // Content when not installed
  notInstalledContent?: ReactNode;

  // Alerts and actions
  alerts?: ReactNode[];
  actions?: ReactNode;

  // Styling
  className?: string;
}

/**
 * Shared tool status card component for consistent UI across settings and setup wizard.
 * Provides a standardized layout for tool status displays with customizable content sections.
 */
export const ToolStatusCard: React.FC<ToolStatusCardProps> = ({
  icon,
  title,
  installed,
  running,
  details = [],
  additionalSections = [],
  notInstalledContent,
  alerts = [],
  actions,
  className = ''
}) => {
  return (
    <Card className={`p-5 ${className}`}>
      {/* Header */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-lg overflow-hidden flex-shrink-0">
            {icon}
          </div>
          <div>
            <h3 className="text-[15px] font-semibold text-foreground">
              {title}
            </h3>
            <StatusBadge installed={installed} running={running} />
          </div>
        </div>
      </div>

      {/* Content */}
      {installed ? (
        <div className="space-y-4">
          {/* Detail rows */}
          {details.length > 0 && (
            <div className="space-y-1">
              {details.map((detail, index) => (
                <DetailRow
                  key={index}
                  label={detail.label}
                  value={detail.value}
                  valueClassName={detail.valueClassName}
                />
              ))}
            </div>
          )}

          {/* Additional sections (e.g., settings, resource usage) */}
          {additionalSections.map((section, index) => (
            <div key={index}>{section}</div>
          ))}

          {/* Alerts (warnings, update notifications, etc.) */}
          {alerts.map((alert, index) => (
            <div key={index}>{alert}</div>
          ))}

          {/* Actions (reinstall button, etc.) */}
          {actions && <div className="pt-3 border-t border-border">{actions}</div>}
        </div>
      ) : (
        <div className="space-y-4">
          {notInstalledContent}
        </div>
      )}
    </Card>
  );
};
