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

import { FRAME_SECTION_LABELS } from '@/shared/constants/frame';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { FrameSectionField } from '@/components/frame/FrameSectionField';
import type { FrameModuleViewProps } from '@/components/frame/types';

export function FrameEntryForm({ workflow }: FrameModuleViewProps) {
  if (!workflow.showNewForm || !workflow.canEdit) {
    return null;
  }

  return (
    <div className="bg-slate-800/60 backdrop-blur-sm rounded-2xl border-2 border-amber-500/30 shadow-lg shadow-amber-500/10 p-6 space-y-4">
      <h3 className="font-bold text-lg text-white flex items-center gap-2">
        <Edit3 size={18} className="text-amber-400" /> Create New F.R.A.M.E. Entry
      </h3>
      <div>
        <label className="text-sm font-medium text-slate-300">Week Of</label>
        <Input
          type="text"
          value={workflow.newEntry.weekOf}
          onChange={(event) => workflow.updateNewEntryField('weekOf', event.target.value)}
          placeholder="Week label or date"
          className="w-full mt-1 px-4 py-2.5 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white placeholder-slate-500 focus:ring-2 focus:ring-violet-500 outline-none"
        />
      </div>
      {FRAME_SECTION_LABELS.map((section) => (
        <FrameSectionField
          key={section.key}
          section={section}
          value={workflow.newEntry[section.key]}
          onChange={(value) => workflow.updateNewEntrySection(section.key, value)}
        />
      ))}
      {workflow.formError && <p className="text-xs text-red-300">{workflow.formError}</p>}
      <div className="flex gap-3">
        <Button
          type="button"
          onClick={() => {
            void workflow.saveNewEntry();
          }}
          disabled={workflow.isSaving}
          loading={workflow.isSaving}
          loadingLabel="Saving..."
          leadingIcon={<Save size={16} />}
          className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-emerald-500 to-emerald-600 text-white rounded-xl font-medium text-sm hover:shadow-lg transition-all disabled:opacity-50"
        >
          Publish Entry
        </Button>
        <Button
          type="button"
          onClick={() => workflow.setShowNewForm(false)}
          className="px-5 py-2.5 bg-slate-700 text-slate-300 rounded-xl font-medium text-sm hover:bg-slate-600 transition-colors"
        >
          Cancel
        </Button>
      </div>
    </div>
  );
}
