import React from 'react';
import { Modal, Input, Radio } from 'antd';
import type { DailyAttendanceItem } from '../types';

interface EditSingleAttendanceModalProps {
  open: boolean;
  onCancel: () => void;
  editEmployee: DailyAttendanceItem | null;
  saving: boolean;
  setEditEmployee: React.Dispatch<React.SetStateAction<DailyAttendanceItem | null>>;
  onSaveAttendance: () => void;
}

export const EditSingleAttendanceModal: React.FC<EditSingleAttendanceModalProps> = ({
  open,
  onCancel,
  editEmployee,
  saving,
  setEditEmployee,
  onSaveAttendance,
}) => {
  if (!editEmployee) return null;

  return (
    <Modal
      title={`Edit Attendance - ${editEmployee.name}`}
      open={open}
      onCancel={onCancel}
      onOk={onSaveAttendance}
      confirmLoading={saving}
      okText="Save Changes"
      okButtonProps={{ className: 'bg-emerald-600 hover:bg-emerald-700 text-white font-bold' }}
    >
      <div className="py-4 space-y-4">
        <div>
          <label className="block text-xs font-bold text-slate-700 mb-1">Employee Name</label>
          <Input value={editEmployee.name} disabled className="rounded-lg font-bold" />
        </div>

        <div>
          <label className="block text-xs font-bold text-slate-700 mb-2">Attendance Status</label>
          <Radio.Group
            value={editEmployee.status || 'PRESENT'}
            onChange={(e) => {
              setEditEmployee({ ...editEmployee, status: e.target.value });
            }}
            buttonStyle="solid"
            size="middle"
          >
            <Radio.Button value="PRESENT" className="font-bold">
              🟢 Present (P)
            </Radio.Button>
            <Radio.Button value="ABSENT" className="font-bold">
              🔴 Absent (A)
            </Radio.Button>
            <Radio.Button value="HALF_DAY" className="font-bold">
              🟡 Half Day (H)
            </Radio.Button>
          </Radio.Group>
        </div>

        <div>
          <label className="block text-xs font-bold text-slate-700 mb-1">Remarks</label>
          <Input
            placeholder="Optional remarks..."
            value={editEmployee.remarks || ''}
            onChange={(e) => {
              setEditEmployee({ ...editEmployee, remarks: e.target.value });
            }}
            className="rounded-lg"
          />
        </div>
      </div>
    </Modal>
  );
};