import { useState } from 'react';
import type { ConfigResponse } from '../../../../../packages/api-contracts/src/index.js';
import { TextAreaField } from '../../components/form-fields.js';
import { SettingsCard } from './settings-card.js';
import { createAdvancedDraft, validateAdvancedDraft, type AdvancedDraft } from './settings-model.js';
import { useConfigCard } from './use-config-card.js';

/** Top-level keys of the advanced blob, so the card says what it holds while locked. */
function summariseKeys(advanced: Record<string, unknown>): string[] {
  return Object.keys(advanced).sort((left, right) => left.localeCompare(right));
}

export function AdvancedCard({ config }: { config: ConfigResponse }) {
  const [isUnlocked, setIsUnlocked] = useState(false);
  const card = useConfigCard<AdvancedDraft>(config, {
    id: 'advanced',
    toDraft: createAdvancedDraft,
    validate: validateAdvancedDraft,
  });

  const keys = config.advanced ? summariseKeys(config.advanced) : [];

  // Locked state is a plain section: no draft, so no save footer to show.
  if (!isUnlocked) {
    return (
      <section aria-labelledby="advanced-heading" className="panel settings-card" id="advanced">
        <div className="settings-card-heading">
          <div>
            <span className="eyebrow">Raw configuration</span>
            <h2 id="advanced-heading">Advanced</h2>
            <p>Models, prompts, filtering, media sync and strategy settings, edited as raw JSON. Some changes take effect only after a restart.</p>
          </div>
          <span className="pill neutral">Locked</span>
        </div>
        <div className="settings-card-body">
          {keys.length > 0 ? (
            <div className="advanced-keys">
              <span className="field-label">Currently configured</span>
              <ul>{keys.map((key) => <li key={key}><code>{key}</code></li>)}</ul>
            </div>
          ) : null}
          <p className="state-banner is-warning">
            <strong>There is no validation beyond JSON shape here.</strong>
            <span>A wrong value can stop the bot from running or change what it says to people. Edit this only if you know the schema.</span>
          </p>
          <button className="button secondary" onClick={() => setIsUnlocked(true)} type="button">
            Edit raw configuration
          </button>
        </div>
      </section>
    );
  }

  return (
    <SettingsCard
      anchor="advanced"
      card={card}
      description="Edited as raw JSON and saved on its own, so a syntax error here cannot block any other section."
      eyebrow="Raw configuration"
      saveLabel="Save advanced"
      status={
        <button
          className="button secondary"
          disabled={card.isSaving}
          onClick={() => { card.reset(); setIsUnlocked(false); }}
          type="button"
        >
          Done editing
        </button>
      }
      title="Advanced"
    >
      <TextAreaField
        error={card.errors.advancedConfigJson}
        hint="A single JSON object. Unknown keys are preserved as-is."
        label="Advanced configuration (JSON)"
        monospace
        name="advanced-config"
        onChange={(advancedConfigJson) => card.update({ advancedConfigJson })}
        rows={22}
        value={card.draft.advancedConfigJson}
      />
    </SettingsCard>
  );
}