import { useAppStore } from '../../store/appStore';
import FakeDataInputs from '../flow/FakeDataInputs';
import styles from './RightPanel.module.css';

export default function RightPanel() {
  const { selectedTile, selectedMethod, centerMode } = useAppStore();

  return (
    <div className={styles.panel}>

      {/* Asset properties */}
      {centerMode === 'asset_static' && selectedTile && (
        <div className={styles.section}>
          <div className={`${styles.sectionTitle} font-cinzel`}>Properties</div>
          <div className={styles.propList}>
            <PropRow label="ID" value={selectedTile.id.toString()} />
            <PropRow label="Name" value={selectedTile.name || '(unnamed)'} />
            <PropRow label="Flags" value={`0x${selectedTile.flags.toString(16).toUpperCase()}`} />
            <PropRow label="Weight" value={selectedTile.weight.toString()} />
            <PropRow label="Height" value={selectedTile.height.toString()} />
            <PropRow label="Quality" value={selectedTile.quality.toString()} />
            <PropRow label="Hue" value={selectedTile.hue.toString()} />
            <PropRow label="Anim ID" value={selectedTile.animId.toString()} />
          </div>
        </div>
      )}

      {/* Method detail */}
      {centerMode === 'flow_method' && selectedMethod && (
        <div className={styles.section}>
          <div className={`${styles.sectionTitle} font-cinzel`}>Method</div>
          <div className={styles.propList}>
            <PropRow label="Name" value={selectedMethod.name} />
            <PropRow label="Returns" value={selectedMethod.returnType} />
            <PropRow label="Override" value={selectedMethod.isOverride ? 'yes' : 'no'} />
            <PropRow label="Virtual" value={selectedMethod.isVirtual ? 'yes' : 'no'} />
            {selectedMethod.callsGump && (
              <PropRow label="Opens Gump" value={selectedMethod.gumpClass ?? '(dynamic)'} />
            )}
          </div>
          {selectedMethod.parameters.length > 0 && (
            <>
              <div className={styles.subTitle}>Parameters</div>
              {selectedMethod.parameters.map((p, i) => (
                <PropRow key={i} label={p.name} value={p.type} />
              ))}
            </>
          )}
        </div>
      )}

      {/* Fake data inputs for flow conditions */}
      {centerMode === 'flow_method' && <FakeDataInputs />}

      {/* Default empty state */}
      {centerMode === 'empty' && (
        <div className={styles.section}>
          <div className={styles.empty}>Nothing selected</div>
        </div>
      )}
    </div>
  );
}

function PropRow({ label, value }: { label: string; value: string }) {
  return (
    <div className={styles.propRow}>
      <span className={styles.propLabel}>{label}</span>
      <span className={styles.propValue}>{value}</span>
    </div>
  );
}
