import { useT } from '../i18n'
import { Dispatch, SetStateAction } from 'react'
import { ProcessStatus, User, Page } from '../types'
import { inp, lbl, chk, FormCard, DeletedBanner } from '../components/common'
import DateInput from '../components/DateInput'
import FormPageLayout from '../components/FormPageLayout'

interface Props {
  form: ProcessStatus
  setForm: Dispatch<SetStateAction<ProcessStatus>>
  formStatus: string
  viewMode?: boolean
  onEdit?: () => void
  onRestore?: (name: string) => void
  onPermanentDelete?: (name: string) => void
  darkMode: boolean
  notifCount: number
  onToggleDark: () => void
  onCountChange: (n: number) => void
  onViewProfile: () => void
  onSubmit: () => void
  onBack: () => void
  onNavigate: (page: Page) => void
  onLogout: () => void
  user: User
}

export default function ProcessStatusFormPage({ form, setForm, formStatus, viewMode, onEdit, onRestore, onPermanentDelete, darkMode, notifCount, onToggleDark, onCountChange, onViewProfile, onSubmit, onBack, onNavigate, onLogout, user }: Props) {
  const t = useT()
  const set = (patch: Partial<ProcessStatus>) => setForm(f => ({ ...f, ...patch }))
  const di: React.CSSProperties = viewMode ? { background: '#f8fafc' } : {}

  const title = form.name
    ? (viewMode ? `Process Status: ${form.name1 || form.name}` : 'Edit Process Status')
    : 'New Process Status'

  return (
    <FormPageLayout
      title={title} activePage="process-statuses"
      user={user} formStatus={formStatus}
      buttonText={t.saveName} buttonColor="#16a34a"
      viewMode={viewMode} onEdit={onEdit} darkMode={darkMode} notifCount={notifCount} onToggleDark={onToggleDark} onCountChange={onCountChange} onViewProfile={onViewProfile}
      onSubmit={onSubmit} onBack={onBack} onNavigate={onNavigate} onLogout={onLogout}
    >
      {(form as any).custom_is_deleted === 1 && (
        <DeletedBanner
          deletedBy={(form as any).custom_deleted_by}
          deletedOn={(form as any).custom_deleted_on}
          reason={(form as any).custom_deleted_reason}
          onRestore={onRestore && form.name ? () => onRestore(form.name) : undefined}
          onPermanentDelete={onPermanentDelete && form.name ? () => onPermanentDelete(form.name) : undefined}
        />
      )}
      <FormCard title="Process Status Details">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 16, marginBottom: 14 }}>
          <div>
            <label style={lbl}>{t.field.name1} <span style={{ color: '#e74c3c' }}>*</span></label>
            <input
              style={{ ...inp, ...di }}
              value={form.name1}
              disabled={viewMode || !!form.name}
              onChange={e => set({ name1: e.target.value })}
              placeholder="Process status name"
              required
            />
          </div>

          <div>
            <label style={lbl}>{t.field.creationDate}</label>
            <DateInput
              value={form.creation_date || ''}
              onChange={v => set({ creation_date: v })}
              disabled={viewMode}
              style={{ ...inp, ...di }}
            />
          </div>

          <div>
            <label style={lbl}>{t.field.status}</label>
            <select
              style={{ ...inp, ...di }}
              value={form.status || 'Active'}
              disabled={viewMode}
              onChange={e => set({ status: e.target.value })}
            >
              <option value="Active">{t.field.statusActive}</option>
              <option value="Inactive">{t.field.statusInactive}</option>
            </select>
          </div>
        </div>

        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <input
            type="checkbox"
            id="notify_manager"
            checked={!!form.notify_manager}
            disabled={viewMode}
            onChange={e => set({ notify_manager: e.target.checked ? 1 : 0 })}
            style={chk}
          />
          <label htmlFor="notify_manager" style={{ fontSize: 13, cursor: viewMode ? 'default' : 'pointer' }}>
            {t.field.notifyManager}
          </label>
        </div>
      </FormCard>
    </FormPageLayout>
  )
}