import { Settings } from 'lucide-react';

import { useSafetyQuizContentEditor } from '@/business/safety-quiz/hooks';
import { Button } from '@/components/ui/button';
import { StatePanel } from '@/components/ui/state-panel';
import { Textarea } from '@/components/ui/textarea';

export function SafetyQuizContentEditorPanel() {
  const editor = useSafetyQuizContentEditor();

  return (
    <div className="rounded-2xl border border-slate-700/40 bg-slate-800/40 p-4 space-y-3">
      <div className="flex items-center gap-2">
        <Settings size={18} className="text-blue-400" />
        <h3 className="text-sm font-semibold text-white">Quiz Content Editor</h3>
      </div>

      {editor.errorMessage && (
        <StatePanel tone="red" role="alert" size="inline">
          {editor.errorMessage}
        </StatePanel>
      )}

      {editor.validationError && (
        <StatePanel tone="red" role="alert" size="inline">
          {editor.validationError}
        </StatePanel>
      )}

      {editor.savedMessage && (
        <StatePanel tone="cyan" size="inline">
          {editor.savedMessage}
        </StatePanel>
      )}

      <Textarea
        value={editor.draft}
        onChange={(event) => editor.setDraft(event.target.value)}
        disabled={editor.isLoading || editor.isSaving}
        aria-label="Safety quiz content JSON"
        className="min-h-80 border-slate-700/60 bg-slate-950/70 font-mono text-xs text-slate-200"
        placeholder="Loading safety quiz content..."
      />

      <div className="flex flex-col sm:flex-row gap-2">
        <Button
          type="button"
          onClick={() => {
            void editor.save();
          }}
          loading={editor.isSaving}
          disabled={!editor.canSave}
          className="bg-blue-500/20 text-blue-300 border border-blue-500/30 hover:bg-blue-500/30"
        >
          Save Content
        </Button>
        <Button
          type="button"
          variant="ghost"
          onClick={editor.reset}
          disabled={editor.isLoading || editor.isSaving}
          className="border border-slate-700/60 text-slate-300 hover:bg-slate-700/40"
        >
          Reset
        </Button>
      </div>
    </div>
  );
}
