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

import { FRAME_SECTION_LABELS } from '@/shared/constants/frame';
import { Button } from '@/components/ui/button';
import { FrameSectionField } from '@/components/frame/FrameSectionField';
import { FrameWeekPicker } from '@/components/frame/FrameWeekPicker';
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>
      <FrameWeekPicker
        weekStart={workflow.newEntry.weekStart}
        weekLabel={workflow.newEntry.weekLabel}
        onWeekStartChange={(iso) => workflow.updateNewEntryField('weekStart', iso)}
        onLabelChange={(label) => workflow.updateNewEntryField('weekLabel', label)}
      />
      {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>
  );
}