'use client';

import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Card, CardContent } from '@/components/ui/card';
import { useState } from 'react';

export default function EdicaoFuncionario() {
  const [fotoPreview, setFotoPreview] = useState('/assets/img/funcionarios/funcionario-demo.png');

  const handleFotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files?.[0]) {
      const reader = new FileReader();
      reader.onload = () => setFotoPreview(reader.result as string);
      reader.readAsDataURL(e.target.files[0]);
    }
  };

  return (
    <div className="p-6 max-w-3xl mx-auto">
      <h1 className="text-3xl font-bold mb-6 text-center">Editar Funcionário</h1>

      <Card className="shadow-lg">
        <CardContent className="p-6 space-y-4">

          <div className="flex justify-center">
            <img src={fotoPreview} alt="Foto do Funcionário" className="w-32 h-32 rounded-full object-cover border shadow" />
          </div>

          <div className="flex flex-col items-center">
            <Label className="mb-1">Alterar Foto</Label>
            <Input type="file" accept="image/*" onChange={handleFotoChange} className="w-60 text-sm" />
          </div>

          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-6">
            <div>
              <Label htmlFor="nome">Nome</Label>
              <Input id="nome" defaultValue="João da Silva" />
            </div>

            <div>
              <Label htmlFor="cargo">Cargo</Label>
              <Input id="cargo" defaultValue="Motorista" />
            </div>

            <div>
              <Label htmlFor="telefone">Telefone</Label>
              <Input id="telefone" defaultValue="(11) 91234-5678" />
            </div>

            <div>
              <Label>Status</Label>
              <Select defaultValue="ativo">
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="ativo">Ativo</SelectItem>
                  <SelectItem value="ferias">Férias</SelectItem>
                  <SelectItem value="afastado">Afastado</SelectItem>
                  <SelectItem value="inativo">Inativo</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="flex justify-end gap-4 pt-4">
            <Button variant="secondary" type="reset">Cancelar</Button>
            <Button type="submit">Salvar Alterações</Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
