'use client';

import React, { useState } from 'react';
import { Clock, Smartphone, CheckCircle2 } from 'lucide-react';

interface Props {
  puCode: string;
  onNext: (data: any) => void;
}

export const Step1ArrivalReport: React.FC<Props> = ({ puCode, onNext }) => {
  const [arrivalTime, setArrivalTime] = useState('7:45 AM');
  const [presidingOfficer, setPresidingOfficer] = useState(true);
  const [apo1, setApo1] = useState(true);
  const [apo2, setApo2] = useState(true);
  const [apo3, setApo3] = useState(true);
  const [bvasDeviceId, setBvasDeviceId] = useState('BVAS-LAG-2411-012');
  const [isSubmitted, setIsSubmitted] = useState(false);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitted(true);
    onNext({
      arrivalTime,
      officialsPresent: { presidingOfficer, apo1, apo2, apo3 },
      bvasDeviceId,
    });
  };

  return (
    <div className="bg-white text-slate-900 border border-emerald-900/20 rounded-2xl p-5 shadow-xl font-sans">
      <div className="border-b border-emerald-100 pb-3 mb-4">
        <span className="text-[10px] font-bold text-emerald-800 bg-emerald-100 px-2 py-0.5 rounded-full uppercase tracking-wider">
          1. Morning Report (7:30 - 8:00 AM)
        </span>
        <h2 className="text-lg font-black text-emerald-950 mt-1">Arrival Report</h2>
        <p className="text-xs text-slate-500">Submit official arrival and presence details for PU {puCode}.</p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-4">
        {/* Arrival Time */}
        <div>
          <label className="block text-xs font-bold text-slate-700 mb-1 flex items-center gap-1.5">
            <Clock className="w-3.5 h-3.5 text-emerald-700" />
            Arrival Time
          </label>
          <input
            type="text"
            value={arrivalTime}
            onChange={(e) => setArrivalTime(e.target.value)}
            className="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 bg-slate-50 text-slate-900 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-emerald-600"
            placeholder="e.g. 7:45 AM"
            required
          />
        </div>

        {/* Officials Present */}
        <div>
          <label className="block text-xs font-bold text-slate-700 mb-2">
            Officials Present
          </label>
          <div className="space-y-2 bg-slate-50 p-3 rounded-xl border border-slate-200">
            <label className="flex items-center space-x-2.5 cursor-pointer text-xs font-semibold text-slate-800">
              <input
                type="checkbox"
                checked={presidingOfficer}
                onChange={(e) => setPresidingOfficer(e.target.checked)}
                className="w-4 h-4 text-emerald-700 rounded border-slate-300 focus:ring-emerald-600"
              />
              <span>Presiding Officer</span>
            </label>
            <label className="flex items-center space-x-2.5 cursor-pointer text-xs font-semibold text-slate-800">
              <input
                type="checkbox"
                checked={apo1}
                onChange={(e) => setApo1(e.target.checked)}
                className="w-4 h-4 text-emerald-700 rounded border-slate-300 focus:ring-emerald-600"
              />
              <span>APO 1</span>
            </label>
            <label className="flex items-center space-x-2.5 cursor-pointer text-xs font-semibold text-slate-800">
              <input
                type="checkbox"
                checked={apo2}
                onChange={(e) => setApo2(e.target.checked)}
                className="w-4 h-4 text-emerald-700 rounded border-slate-300 focus:ring-emerald-600"
              />
              <span>APO 2</span>
            </label>
            <label className="flex items-center space-x-2.5 cursor-pointer text-xs font-semibold text-slate-800">
              <input
                type="checkbox"
                checked={apo3}
                onChange={(e) => setApo3(e.target.checked)}
                className="w-4 h-4 text-emerald-700 rounded border-slate-300 focus:ring-emerald-600"
              />
              <span>APO 3</span>
            </label>
          </div>
        </div>

        {/* BVAS Device ID */}
        <div>
          <label className="block text-xs font-bold text-slate-700 mb-1 flex items-center gap-1.5">
            <Smartphone className="w-3.5 h-3.5 text-emerald-700" />
            BVAS Device ID
          </label>
          <input
            type="text"
            value={bvasDeviceId}
            onChange={(e) => setBvasDeviceId(e.target.value)}
            className="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 bg-slate-50 text-slate-900 text-sm font-semibold focus:outline-none focus:ring-2 focus:ring-emerald-600"
            placeholder="BVAS Device ID"
            required
          />
        </div>

        {/* Primary Action Button */}
        <button
          type="submit"
          className="w-full py-3 px-4 rounded-xl bg-[#065F46] hover:bg-[#047857] text-white font-bold text-sm shadow-md transition active:scale-98 flex items-center justify-center gap-2"
        >
          {isSubmitted && <CheckCircle2 className="w-4 h-4 text-emerald-300" />}
          <span>Report Arrival</span>
        </button>

        <p className="text-[11px] text-center text-slate-400 italic">
          Submit official arrival and presence details.
        </p>
      </form>
    </div>
  );
};