import { Save, X } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { NativeSelect } from '@/components/ui/native-select';
import { SAFETY_PROTOCOL_TAG_OPTIONS } from '@/shared/constants/safetyProtocols';
import { SafetyDynamicListEditor } from '@/components/safety-protocols/SafetyDynamicListEditor';
import type { SafetyProtocolsViewProps } from '@/components/safety-protocols/types';

/** Create / edit form for a safety protocol (manager-only). */
export function SafetyProtocolForm({ workflow }: SafetyProtocolsViewProps) {
  const isEditing = workflow.editId !== null;

  return (
    <div className="bg-white rounded-2xl border border-violet-100 shadow-sm p-6 space-y-4">
      <div className="flex items-center justify-between">
        <h3 className="font-bold text-gray-800 text-lg">
          {isEditing ? 'Edit Safety Protocol' : 'New Safety Protocol'}
        </h3>
        <Button
          type="button"
          variant="ghost"
          size="icon"
          onClick={workflow.cancelForm}
          aria-label="Close form"
          className="h-auto w-auto p-1 text-gray-400 hover:text-gray-700 hover:bg-transparent"
        >
          <X size={18} />
        </Button>
      </div>

      <div>
        <label className="text-sm font-medium text-gray-700">Protocol Title</label>
        <Input
          type="text"
          value={workflow.draft.title}
          onChange={(event) => workflow.updateDraftField({ title: event.target.value })}
          placeholder="e.g. Fire Drill Procedures"
          className="w-full mt-1 px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 placeholder-gray-400 focus:ring-2 focus:ring-violet-500 outline-none"
        />
      </div>

      <div>
        <label className="text-sm font-medium text-gray-700">Category</label>
        <NativeSelect
          value={workflow.draft.tag}
          onChange={(event) => workflow.updateDraftField({ tag: event.target.value })}
          className="w-full mt-1 px-4 py-2.5 bg-gray-50 border border-gray-200 rounded-xl text-sm text-gray-800 focus:ring-2 focus:ring-violet-500 outline-none"
        >
          {SAFETY_PROTOCOL_TAG_OPTIONS.map((option) => (
            <option key={option.value} value={option.value}>{option.label}</option>
          ))}
        </NativeSelect>
      </div>

      <SafetyDynamicListEditor
        label="Procedure Steps"
        numbered
        items={workflow.draft.steps}
        placeholder="Describe a step..."
        addLabel="Add Step"
        disabled={workflow.isSaving}
        onChange={(index, value) => workflow.updateListItem('steps', index, value)}
        onAdd={() => workflow.addListItem('steps')}
        onRemove={(index) => workflow.removeListItem('steps', index)}
      />

      <SafetyDynamicListEditor
        label="Autism-Specific Considerations"
        items={workflow.draft.autismConsiderations}
        placeholder="Add a consideration..."
        addLabel="Add Consideration"
        disabled={workflow.isSaving}
        onChange={(index, value) =>
          workflow.updateListItem('autismConsiderations', index, value)
        }
        onAdd={() => workflow.addListItem('autismConsiderations')}
        onRemove={(index) => workflow.removeListItem('autismConsiderations', index)}
      />

      {workflow.formError && <p className="text-xs text-red-500">{workflow.formError}</p>}

      <div className="flex gap-3">
        <Button
          type="button"
          onClick={() => {
            void workflow.saveDraft();
          }}
          disabled={workflow.isSaving}
          loading={workflow.isSaving}
          loadingLabel="Saving..."
          leadingIcon={<Save size={14} />}
          className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-emerald-500 to-teal-500 text-white rounded-xl font-medium text-sm hover:shadow-lg transition-all disabled:opacity-50"
        >
          {isEditing ? 'Save Changes' : 'Publish Protocol'}
        </Button>
        <Button
          type="button"
          onClick={workflow.cancelForm}
          disabled={workflow.isSaving}
          className="px-5 py-2.5 bg-gray-100 text-gray-600 rounded-xl font-medium text-sm hover:bg-gray-200 transition-colors"
        >
          Cancel
        </Button>
      </div>
    </div>
  );
}
