app/src/admin/components/BulkAttendanceModal.tsx

import FormModal from "./FormModal";
import AdminDatePicker from "./AdminDatePicker";

interface BulkAttendanceForm {
  month: string;
  user_ids: string[];
  arrival_time: string;
  departure_time: string;
  break_start_time: string;
  break_end_time: string;
}

interface BulkAttendanceUser {
  id: number | string;
  name: string;
}

interface BulkAttendanceModalProps {
  isOpen: boolean;
  onClose: () => void;
  form: BulkAttendanceForm;
  setForm: (form: BulkAttendanceForm) => void;
  users: BulkAttendanceUser[];
  onSubmit: () => void;
  submitting: boolean;
  toggleUser: (userId: number | string) => void;
  toggleAllUsers: () => void;
}

export default function BulkAttendanceModal({
  isOpen,
  onClose,
  form,
  setForm,
  users,
  onSubmit,
  submitting,
  toggleUser,
  toggleAllUsers,
}: BulkAttendanceModalProps) {
  return (
    <FormModal
      isOpen={isOpen}
      onClose={onClose}
      title="Vyplnit docházku za měsíc"
      size="lg"
      loading={submitting}
      onSubmit={onSubmit}
      submitLabel="Vyplnit měsíc"
      submitDisabled={form.user_ids.length === 0}
    >
      <p
        style={{
          color: "var(--text-secondary)",
          marginTop: "0.25rem",
          marginBottom: "1rem",
          fontSize: "0.875rem",
        }}
      >
        Vytvoří záznamy pro všechny pracovní dny. Svátky se automaticky označí.
        Existující záznamy se přeskočí.
      </p>

      <div className="admin-form">
        <div className="admin-form-group">
          <label className="admin-form-label">Měsíc</label>
          <AdminDatePicker
            mode="month"
            value={form.month}
            onChange={(val) => setForm({ ...form, month: val })}
          />
        </div>

        <div className="admin-form-group">
          <label className="admin-form-label">
            Zaměstnanci
            <button
              type="button"
              onClick={toggleAllUsers}
              style={{
                marginLeft: "0.75rem",
                background: "none",
                border: "none",
                color: "var(--accent-color)",
                cursor: "pointer",
                fontSize: "0.8125rem",
                fontWeight: 500,
                padding: 0,
              }}
            >
              {form.user_ids.length === users.length
                ? "Odznačit vše"
                : "Vybrat vše"}
            </button>
          </label>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              gap: "0.375rem",
              maxHeight: "200px",
              overflowY: "auto",
              padding: "0.75rem",
              background: "var(--bg-tertiary)",
              borderRadius: "var(--border-radius-sm)",
              border: "1px solid var(--border-color)",
            }}
          >
            {users.map((user) => (
              <label key={user.id} className="admin-form-checkbox">
                <input
                  type="checkbox"
                  checked={form.user_ids.includes(String(user.id))}
                  onChange={() => toggleUser(user.id)}
                />
                <span>{user.name}</span>
              </label>
            ))}
          </div>
          <small className="admin-form-hint">
            Vybráno: {form.user_ids.length} z {users.length}
          </small>
        </div>

        <div className="admin-form-row">
          <div className="admin-form-group">
            <label className="admin-form-label">Příchod</label>
            <AdminDatePicker
              mode="time"
              value={form.arrival_time}
              onChange={(val) => setForm({ ...form, arrival_time: val })}
            />
          </div>
          <div className="admin-form-group">
            <label className="admin-form-label">Odchod</label>
            <AdminDatePicker
              mode="time"
              value={form.departure_time}
              onChange={(val) => setForm({ ...form, departure_time: val })}
            />
          </div>
        </div>

        <div className="admin-form-row">
          <div className="admin-form-group">
            <label className="admin-form-label">Začátek pauzy</label>
            <AdminDatePicker
              mode="time"
              value={form.break_start_time}
              onChange={(val) => setForm({ ...form, break_start_time: val })}
            />
          </div>
          <div className="admin-form-group">
            <label className="admin-form-label">Konec pauzy</label>
            <AdminDatePicker
              mode="time"
              value={form.break_end_time}
              onChange={(val) => setForm({ ...form, break_end_time: val })}
            />
          </div>
        </div>
      </div>
    </FormModal>
  );
}