import { useState } from 'react';
import YamlEditor from './YamlEditor';
import './ResourceCard.css';

function ResourceCard({ resource, projectId, onUpdate, onClick }) {
  const [isExpanded, setIsExpanded] = useState(false);
  const [activeTab, setActiveTab] = useState('summary');

  const toggleExpand = () => {
    setIsExpanded(!isExpanded);
    if (!isExpanded) {
      onClick && onClick();
    }
  };

  return (
    <div className={`resource-card ${isExpanded ? 'expanded' : ''}`} data-kind={resource.kind}>
      {/* Card Header */}
      <div className="resource-header" onClick={toggleExpand}>
        <div className="resource-info">
          <div className="resource-kind">
            <span className="kind-badge" data-kind={resource.kind}>{resource.kind}</span>
            {resource.modified && <span className="badge badge-warning">Modified</span>}
          </div>
          <h4 className="resource-name">{resource.name}</h4>
          {resource.namespace && (
            <p className="resource-namespace">ns: {resource.namespace}</p>
          )}
        </div>
        <button className="expand-btn">
          {isExpanded ? '−' : '+'}
        </button>
      </div>

      {/* Expanded Content */}
      {isExpanded && (
        <div className="resource-content">
          {/* Tabs */}
          <div className="tabs">
            <button
              className={`tab ${activeTab === 'summary' ? 'active' : ''}`}
              onClick={() => setActiveTab('summary')}
            >
              Summary
            </button>
            <button
              className={`tab ${activeTab === 'yaml' ? 'active' : ''}`}
              onClick={() => setActiveTab('yaml')}
            >
              YAML
            </button>
          </div>

          {/* Tab Content */}
          <div className="tab-content">
            {activeTab === 'summary' && (
              <div className="summary-tab">
                <div className="summary-row">
                  <span className="summary-label">API Version:</span>
                  <span className="summary-value">{resource.apiVersion}</span>
                </div>
                <div className="summary-row">
                  <span className="summary-label">Kind:</span>
                  <span className="summary-value">{resource.kind}</span>
                </div>
                <div className="summary-row">
                  <span className="summary-label">Name:</span>
                  <span className="summary-value">{resource.name}</span>
                </div>
                {resource.namespace && (
                  <div className="summary-row">
                    <span className="summary-label">Namespace:</span>
                    <span className="summary-value">{resource.namespace}</span>
                  </div>
                )}
                {resource.labels && Object.keys(resource.labels).length > 0 && (
                  <div className="summary-section">
                    <h5>Labels</h5>
                    {Object.entries(resource.labels).map(([key, value]) => (
                      <div key={key} className="label-item">
                        <code>{key}: {value}</code>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}

            {activeTab === 'yaml' && (
              <div className="yaml-tab">
                <YamlEditor
                  value={resource.rawYaml}
                  resourceKind={resource.kind}
                  onChange={(newYaml) => onUpdate(resource.uid, newYaml)}
                  projectId={projectId}
                  resourceUid={resource.uid}
                />
              </div>
            )}
          </div>
        </div>
      )}
    </div>
  );
}

export default ResourceCard;