import React, { useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Calendar } from '@/components/ui/calendar';
import { format } from 'date-fns';

export default function CadastroPonto() {
  const [data, setData] = useState<Date | undefined>(new Date());
  const [horarioEntrada, setHorarioEntrada] = useState('');
  const [horarioSaida, setHorarioSaida] = useState('');
  const [funcionario, setFuncionario] = useState('');

  const handleSalvar = () => {
    console.log({ funcionario, data, horarioEntrada, horarioSaida });
    // aqui será feita a integração com o backend
  };

  return (
    <div className="p-6">
      <Card className="max-w-xl mx-auto">
        <CardContent className="space-y-4">
          <h2 className="text-xl font-bold">Cadastro de Ponto Manual</h2>

          <div className="space-y-2">
            <Label>Funcionário</Label>
            <Input
              placeholder="Nome ou matrícula"
              value={funcionario}
              onChange={(e) => setFuncionario(e.target.value)}
            />
          </div>

          <div className="space-y-2">
            <Label>Data</Label>
            <Calendar selected={data} onSelect={setData} />
          </div>

          <div className="grid grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label>Horário de Entrada</Label>
              <Input
                type="time"
                value={horarioEntrada}
                onChange={(e) => setHorarioEntrada(e.target.value)}
              />
            </div>

            <div className="space-y-2">
              <Label>Horário de Saída</Label>
              <Input
                type="time"
                value={horarioSaida}
                onChange={(e) => setHorarioSaida(e.target.value)}
              />
            </div>
          </div>

          <Button onClick={handleSalvar} className="w-full mt-4">Salvar Registro</Button>
        </CardContent>
      </Card>
    </div>
  );
}
