import React, { useState } from "react";

const assistants = ["Yuli", "Putri", "Senja", "Alif"];
const fgs = ["Rangga", "Rizal", "Maul", "Rafly"];
const allStaff = [...assistants, ...fgs];

export default function AttendanceForm() {
  const [step, setStep] = useState(1);
  const [form, setForm] = useState({
    name: "",
    datang: "",
    mulaiRename: "",
    selesaiRename: "",
    mulaiIstirahat: "",
    mulaiProduksi: "",
  });

  const isAsisten = assistants.includes(form.name);

  const handleChange = (field) => (e) => {
    setForm({ ...form, [field]: e.target.value });
  };

  const handleNext = () => {
    if (form.name) setStep(2);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    const response = await fetch("https://script.google.com/macros/s/AKfycbyMd12TAyu6OtgHSYZNQva7zqZk0pzBCEHhEWe7DiRWkSZGy-pjTyrxdPDlFI1tug2jkA/exec", {
      method: "POST",
      body: JSON.stringify(form),
      headers: {
        "Content-Type": "application/json",
      },
    });

    const result = await response.json();
    alert("Data berhasil dikirim!");
    console.log("Google Sheets response:", result);
  };

  return (
    <div className="container mx-auto max-w-md mt-10 p-4 border rounded shadow">
      {step === 1 ? (
        <div className="space-y-4">
          <label className="block text-sm font-medium">Pilih Nama</label>
          <select
            value={form.name}
            onChange={(e) => setForm({ ...form, name: e.target.value })}
            className="w-full p-2 border rounded"
          >
            <option value="">-- Pilih Nama --</option>
            {allStaff.map((name) => (
              <option key={name} value={name}>
                {name}
              </option>
            ))}
          </select>
          <button
            onClick={handleNext}
            disabled={!form.name}
            className="w-full bg-blue-600 text-white p-2 rounded"
          >
            Lanjut
          </button>
        </div>
      ) : (
        <form onSubmit={handleSubmit} className="space-y-4">
          <label className="block text-sm font-medium">Jam Datang</label>
          <input type="time" value={form.datang} onChange={handleChange("datang")} className="w-full p-2 border rounded" />

          {isAsisten && (
            <>
              <label className="block text-sm font-medium">Mulai Rename</label>
              <input type="time" value={form.mulaiRename} onChange={handleChange("mulaiRename")} className="w-full p-2 border rounded" />
              <label className="block text-sm font-medium">Selesai Rename</label>
              <input type="time" value={form.selesaiRename} onChange={handleChange("selesaiRename")} className="w-full p-2 border rounded" />
            </>
          )}

          <label className="block text-sm font-medium">Mulai Istirahat</label>
          <input type="time" value={form.mulaiIstirahat} onChange={handleChange("mulaiIstirahat")} className="w-full p-2 border rounded" />

          <label className="block text-sm font-medium">Mulai Produksi</label>
          <input type="time" value={form.mulaiProduksi} onChange={handleChange("mulaiProduksi")} className="w-full p-2 border rounded" />

          <button type="submit" className="w-full bg-green-600 text-white p-2 rounded">
            Submit
          </button>
        </form>
      )}
    </div>
  );
}