import { useAppStore } from '../../store/appStore';
import styles from './ScriptGumpDetail.module.css';

export default function ScriptGumpDetail() {
  const { selectedScriptGump } = useAppStore();

  if (!selectedScriptGump) {
    return <div className={styles.empty}>No script gump selected</div>;
  }

  const { class_name, file_path, tags } = selectedScriptGump;

  // Derive a human-readable title from the class name
  // e.g. "RunebookGump" → "Runebook Gump"
  const friendlyName = class_name.replace(/([A-Z])/g, ' $1').trim();

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <span className={styles.className}>{class_name}</span>
        <span className={styles.friendlyName}>{friendlyName}</span>
      </div>

      <div className={styles.body}>
        <div className={styles.section}>
          <div className={styles.label}>Source File</div>
          <div className={styles.filepath}>{file_path}</div>
        </div>

        {tags.length > 0 && (
          <div className={styles.section}>
            <div className={styles.label}>Tags</div>
            <div className={styles.tags}>
              {tags.map((t) => (
                <span key={t} className={styles.tag}>{t}</span>
              ))}
            </div>
          </div>
        )}

        <div className={styles.section}>
          <div className={styles.label}>Notes</div>
          <div className={styles.notes}>
            This is a ServUO C# Gump class found in the Scripts directory.
            Select it in the Scripts tab to trace its method call chain or
            inspect its class details.
          </div>
        </div>
      </div>
    </div>
  );
}
