import { DrawerShell } from '../../../components/DrawerShell';
import './DashboardManagementModals.css';
import './DashboardSupportModals.css';

interface CommonModalLabels {
  cancel: string;
  close: string;
  save: string;
}

interface TemplateManagerLabels extends CommonModalLabels {
  processing: string;
  templateManagerTitle: string;
  templateTabAgent: string;
  templateTabTopic: string;
}

interface TemplateManagerModalProps {
  open: boolean;
  templateTab: 'agent' | 'topic';
  templateAgentCount: number;
  templateTopicCount: number;
  templateAgentText: string;
  templateTopicText: string;
  isSavingTemplates: boolean;
  labels: TemplateManagerLabels;
  onClose: () => void;
  onTemplateTabChange: (tab: 'agent' | 'topic') => void;
  onTemplateAgentTextChange: (value: string) => void;
  onTemplateTopicTextChange: (value: string) => void;
  onSave: (tab: 'agent' | 'topic') => Promise<void> | void;
}

export function TemplateManagerModal({
  open,
  templateTab,
  templateAgentCount,
  templateTopicCount,
  templateAgentText,
  templateTopicText,
  isSavingTemplates,
  labels,
  onClose,
  onTemplateTabChange,
  onTemplateAgentTextChange,
  onTemplateTopicTextChange,
  onSave,
}: TemplateManagerModalProps) {
  if (!open) return null;

  const activeTemplateCount = templateTab === 'agent' ? templateAgentCount : templateTopicCount;
  const activeTemplateLabel = templateTab === 'agent' ? labels.templateTabAgent : labels.templateTabTopic;
  const activeTemplateText = templateTab === 'agent' ? templateAgentText : templateTopicText;
  const activeTemplatePlaceholder = templateTab === 'agent' ? '{"agents_md":"..."}' : '{"presets":[...]}';
  const handleTemplateTextChange = templateTab === 'agent' ? onTemplateAgentTextChange : onTemplateTopicTextChange;

  return (
    <DrawerShell
      open={open}
      onClose={onClose}
      title={labels.templateManagerTitle}
      subtitle={`${activeTemplateLabel} (${activeTemplateCount})`}
      size="extend"
      bodyClassName="ops-form-drawer-body"
      closeLabel={labels.close}
      footer={(
        <div className="drawer-shell-footer-content">
          <div className="drawer-shell-footer-main field-label">
            {`${activeTemplateLabel} (${activeTemplateCount})`}
          </div>
          <div className="ops-inline-actions ops-inline-actions-wrap">
            <button className="btn btn-secondary" onClick={onClose}>{labels.cancel}</button>
            <button className="btn btn-primary" disabled={isSavingTemplates} onClick={() => void onSave(templateTab)}>
              {isSavingTemplates ? labels.processing : labels.save}
            </button>
          </div>
        </div>
      )}
    >
      <div className="ops-form-modal">
        <div className="ops-template-tabs" role="tablist" aria-label={labels.templateManagerTitle}>
          <button
            className={`ops-template-tab ${templateTab === 'agent' ? 'is-active' : ''}`}
            onClick={() => onTemplateTabChange('agent')}
            role="tab"
            aria-selected={templateTab === 'agent'}
          >
            <span className="ops-template-tab-label">{`${labels.templateTabAgent} (${templateAgentCount})`}</span>
          </button>
          <button
            className={`ops-template-tab ${templateTab === 'topic' ? 'is-active' : ''}`}
            onClick={() => onTemplateTabChange('topic')}
            role="tab"
            aria-selected={templateTab === 'topic'}
          >
            <span className="ops-template-tab-label">{`${labels.templateTabTopic} (${templateTopicCount})`}</span>
          </button>
        </div>

        <div className="ops-form-scroll">
          <div className="ops-config-grid" style={{ gridTemplateColumns: '1fr' }}>
            <div className="ops-config-field">
              <textarea
                className="textarea md-area mono"
                rows={16}
                value={activeTemplateText}
                onChange={(e) => handleTemplateTextChange(e.target.value)}
                placeholder={activeTemplatePlaceholder}
              />
            </div>
          </div>
        </div>
      </div>
    </DrawerShell>
  );
}