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

import type { FrameEntryViewModel } from '@/business/frame/types';
import { FRAME_SECTION_LABELS } from '@/shared/constants/frame';
import { Button } from '@/components/ui/button';
import { FrameSectionField } from '@/components/frame/FrameSectionField';
import type { FrameModuleWorkflow } from '@/components/frame/types';

interface FrameEntryEditFormProps {
  readonly editEntry: FrameEntryViewModel;
  readonly workflow: FrameModuleWorkflow;
}

export function FrameEntryEditForm({ editEntry, workflow }: FrameEntryEditFormProps) {
  return (
    <>
      {FRAME_SECTION_LABELS.map((section) => (
        <FrameSectionField
          key={section.key}
          section={section}
          value={editEntry[section.key]}
          onChange={(value) => workflow.updateEditEntrySection(section.key, value)}
        />
      ))}
      {workflow.formError && <p className="text-xs text-red-300">{workflow.formError}</p>}
      <div className="flex justify-between">
        <div className="flex gap-3">
          <Button
            type="button"
            onClick={() => {
              void workflow.saveEditEntry();
            }}
            disabled={workflow.isSaving || workflow.isDeleting}
            loading={workflow.isSaving}
            loadingLabel="Saving..."
            leadingIcon={<Save size={14} />}
            className="flex items-center gap-2 px-4 py-2 bg-emerald-500 text-white rounded-xl text-sm font-medium hover:bg-emerald-600 disabled:opacity-50"
          >
            Save Changes
          </Button>
          <Button
            type="button"
            onClick={workflow.cancelEditing}
            disabled={workflow.isSaving || workflow.isDeleting}
            className="px-4 py-2 bg-slate-700 text-slate-300 rounded-xl text-sm font-medium hover:bg-slate-600"
          >
            Cancel
          </Button>
        </div>
        <Button
          type="button"
          onClick={() => {
            void workflow.deleteEntry(editEntry.id);
          }}
          disabled={workflow.isSaving || workflow.isDeleting}
          loading={workflow.isDeleting}
          loadingLabel="Deleting..."
          leadingIcon={<Trash2 size={14} />}
          className="flex items-center gap-2 px-4 py-2 bg-red-500/20 text-red-400 rounded-xl text-sm font-medium hover:bg-red-500/30 disabled:opacity-50"
        >
          Delete
        </Button>
      </div>
    </>
  );
}
