// import React, { useState } from 'react';
// import {
//     Flex,
//     Input,
//     InputNumber,
//     Form,
//     Button,
//     Card,
//     Space,
//     Upload,
//     Divider,
//     Tooltip,
//     message,
//     Select,
// } from 'antd';
// import {
//     UploadOutlined,
//     UserOutlined,
//     IdcardOutlined,
//     PhoneOutlined,
//     LockOutlined,
//     InfoCircleOutlined,
//     MailOutlined,
// } from '@ant-design/icons';
// const { Item } = Form;
// const { Option } = Select;
// import sypiu_ggcp from 'assets/sypiu_ggcp.jpg';
// import { useNavigate } from 'react-router-dom';
// import { register, uploadFile, checkUsername } from '../../api/auth';
// import { NotifAlert } from '../../components/Global/ToastNotif';

// const Registration = () => {
//     const [form] = Form.useForm();
//     const navigate = useNavigate();
//     const [loading, setLoading] = useState(false);
//     const [fileListKontrak, setFileListKontrak] = useState([]);
//     const [fileListHsse, setFileListHsse] = useState([]);
//     const [fileListIcon, setFileListIcon] = useState([]);

//     // Daftar jenis vendor
//     const vendorTypes = [
//         { vendor_type: 1, vendor_type_name: 'One-Time' },
//         { vendor_type: 2, vendor_type_name: 'Rutin' },
//     ];

//     const onFinish = async (values) => {
//         setLoading(true);
//         try {
//             if (!fileListKontrak.length || !fileListHsse.length) {
//                 message.error('Harap unggah Lampiran Kontrak Kerja dan HSSE Plan!');
//                 setLoading(false);
//                 return;
//             }

//             const formData = new FormData();
//             formData.append('path_kontrak', fileListKontrak[0].originFileObj);
//             formData.append('path_hse_plant', fileListHsse[0].originFileObj);
//             if (fileListIcon.length) {
//                 formData.append('path_icon', fileListIcon[0].originFileObj);
//             }

//             const uploadResponse = await uploadFile(formData);

//             if (!uploadResponse.data?.pathKontrak && !uploadResponse.data?.pathHsePlant) {
//                 message.error(uploadResponse.message || 'Gagal mengunggah file.');
//                 setLoading(false);
//                 return;
//             }

//             const params = new URLSearchParams({ username: values.username });
//             const usernameCheck = await checkUsername(params);
//             if (usernameCheck.data.data && usernameCheck.data.data.available === false) {
//                 NotifAlert({
//                     icon: 'error',
//                     title: 'Gagal',
//                     message: usernameCheck.data.message || 'Terjadi kesalahan, silakan coba lagi',
//                 });
//                 setLoading(false);
//                 return;
//             }

//             const registerData = {
//                 nama_perusahaan: values.namaPerusahaan,
//                 no_kontak_wo: values.noKontakWo,
//                 path_kontrak: uploadResponse.data.pathKontrak || '',
//                 durasi: values.durasiPekerjaan,
//                 nilai_csms: values.nilaiCsms.toString(),
//                 vendor_type: values.jenisVendor, // Tambahkan jenis vendor ke registerData
//                 path_hse_plant: uploadResponse.data.pathHsePlant || '',
//                 nama_leader: values.penanggungJawab,
//                 no_identitas: values.noIdentitas,
//                 no_hp: values.noHandphone,
//                 email_register: values.username,
//                 password_register: values.password,
//             };

//             const response = await register(registerData);

//             if (response.data?.id_register) {
//                 message.success('Data berhasil disimpan!');

//                 try {
//                     form.resetFields();
//                     setFileListKontrak([]);
//                     setFileListHsse([]);
//                     setFileListIcon([]);

//                     navigate('/registration-submitted');
//                 } catch (postSuccessError) {
//                     message.warning(
//                         'Registrasi berhasil, tetapi ada masalah setelahnya. Silakan ke halaman login secara manual.'
//                     );
//                 }
//             } else {
//                 message.error(response.message || 'Pendaftaran gagal, silakan coba lagi.');
//             }
//         } catch (error) {
//             console.error('Error saat registrasi:', error);
//             NotifAlert({
//                 icon: 'error',
//                 title: 'Gagal',
//                 message: error.message || 'Terjadi kesalahan, silakan coba lagi',
//             });
//         } finally {
//             setLoading(false);
//         }
//     };

//     const onCancel = () => {
//         form.resetFields();
//         setFileListKontrak([]);
//         setFileListHsse([]);
//         setFileListIcon([]);
//         navigate('/signin');
//     };

//     const handleChangeKontrak = ({ fileList }) => {
//         setFileListKontrak(fileList);
//     };

//     const handleChangeHsse = ({ fileList }) => {
//         setFileListHsse(fileList);
//     };

//     const handleChangeIcon = ({ fileList }) => {
//         setFileListIcon(fileList);
//     };

//     const beforeUpload = (file, fieldname) => {
//         const isValidType = [
//             'image/jpeg',
//             'image/jpg',
//             'image/png',
//             fieldname !== 'path_icon' ? 'application/pdf' : null,
//         ]
//             .filter(Boolean)
//             .includes(file.type);
//         const isNotEmpty = file.size > 0;
//         const isSizeValid = file.size / 1024 / 1024 < 10;

//         if (!isValidType) {
//             message.error(
//                 `Hanya file ${
//                     fieldname === 'path_icon' ? 'JPG/PNG' : 'PDF/JPG/PNG'
//                 } yang diperbolehkan!`
//             );
//             return false;
//         }
//         if (!isNotEmpty) {
//             message.error('File tidak boleh kosong!');
//             return false;
//         }
//         if (!isSizeValid) {
//             message.error('Ukuran file maksimal 10MB!');
//             return false;
//         }
//         return true;
//     };

//     return (
//         <Flex
//             align="center"
//             justify="center"
//             style={{
//                 minHeight: '100vh',
//                 backgroundImage: `url(${sypiu_ggcp})`,
//                 backgroundSize: 'cover',
//                 backgroundPosition: 'center',
//                 padding: '20px',
//             }}
//         >
//             <Card
//                 style={{
//                     width: '100%',
//                     maxWidth: 800,
//                     background: 'rgba(255, 255, 255, 0.9)',
//                     backdropFilter: 'blur(10px)',
//                     borderRadius: '12px',
//                     boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
//                     padding: '24px',
//                 }}
//                 title={
//                     <Flex align="center" justify="space-between">
//                         <h2 style={{ margin: 0, color: '#1a3c34' }}>Formulir Pendaftaran</h2>
//                         <Button
//                             type="link"
//                             icon={<InfoCircleOutlined />}
//                             onClick={() => navigate('/signin')}
//                         >
//                             Kembali
//                         </Button>
//                     </Flex>
//                 }
//             >
//                 <Form
//                     form={form}
//                     onFinish={onFinish}
//                     layout="horizontal"
//                     labelCol={{ span: 8 }}
//                     wrapperCol={{ span: 16 }}
//                     labelAlign="left"
//                     style={{ maxWidth: 800 }}
//                 >
//                     {/* Informasi Perusahaan */}
//                     <Divider
//                         orientation="left"
//                         orientationMargin={0}
//                         style={{
//                             color: '#23A55A',
//                             fontWeight: 'bold',
//                             marginLeft: 0,
//                             paddingLeft: 0,
//                         }}
//                     >
//                         Informasi Perusahaan
//                     </Divider>
//                     <Item
//                         label="Nama Perusahaan"
//                         name="namaPerusahaan"
//                         rules={[{ required: true, message: 'Masukkan Nama Perusahaan!' }]}
//                     >
//                         <Input
//                             prefix={<UserOutlined />}
//                             placeholder="Masukkan Nama Perusahaan"
//                             size="large"
//                         />
//                     </Item>
//                     <Item
//                         label="Durasi Pekerjaan (Hari)"
//                         name="durasiPekerjaan"
//                         rules={[{ required: true, message: 'Masukkan Durasi Pekerjaan!' }]}
//                     >
//                         <InputNumber
//                             min={1}
//                             style={{ width: '100%' }}
//                             placeholder="Masukkan Durasi Pekerjaan"
//                             size="large"
//                         />
//                     </Item>
//                     <Item
//                         label="No Kontrak Kerja / Agreement"
//                         name="noKontakWo"
//                         rules={[
//                             { required: true, message: 'Masukkan No Kontrak Kerja / Agreement!' },
//                         ]}
//                     >
//                         <Input
//                             style={{
//                                 width: '100%',
//                             }}
//                             placeholder="Masukkan No Kontrak Kerja / Agreement"
//                             size="large"
//                         />
//                     </Item>
//                     <Item
//                         label="Lampiran Kontrak Kerja"
//                         name="lampiranKontrak"
//                         rules={[{ required: true, message: 'Unggah Lampiran Kontrak Kerja!' }]}
//                     >
//                         <Upload
//                             beforeUpload={(file) => beforeUpload(file, 'path_kontrak')}
//                             fileList={fileListKontrak}
//                             onChange={handleChangeKontrak}
//                             maxCount={1}
//                         >
//                             <Button icon={<UploadOutlined />} size="large">
//                                 Unggah PDF/JPG
//                             </Button>
//                         </Upload>
//                     </Item>
//                     <Item
//                         label="HSSE Plan"
//                         name="hssePlan"
//                         rules={[{ required: true, message: 'Unggah HSSE Plan!' }]}
//                     >
//                         <Upload
//                             beforeUpload={(file) => beforeUpload(file, 'path_hse_plant')}
//                             fileList={fileListHsse}
//                             onChange={handleChangeHsse}
//                             maxCount={1}
//                         >
//                             <Button icon={<UploadOutlined />} size="large">
//                                 Unggah PDF/JPG
//                             </Button>
//                         </Upload>
//                     </Item>
//                     <Item
//                         label="Nilai CSMS"
//                         name="nilaiCsms"
//                         rules={[{ required: true, message: 'Masukkan Nilai CSMS!' }]}
//                     >
//                         <InputNumber
//                             min={0}
//                             max={100}
//                             style={{ width: '100%' }}
//                             placeholder="Masukkan Nilai CSMS"
//                             size="large"
//                         />
//                     </Item>
//                     <Item
//                         label="Jenis Vendor"
//                         name="jenisVendor"
//                         rules={[{ required: true, message: 'Pilih Jenis Vendor!' }]}
//                     >
//                         <Select
//                             placeholder="Pilih Jenis Vendor"
//                             size="large"
//                             style={{ width: '100%' }}
//                         >
//                             {vendorTypes.map((vendor) => (
//                                 <Option key={vendor.vendor_type} value={vendor.vendor_type}>
//                                     {vendor.vendor_type_name}
//                                 </Option>
//                             ))}
//                         </Select>
//                     </Item>

//                     {/* Informasi Penanggung Jawab */}
//                     <Divider
//                         orientation="left"
//                         orientationMargin={0}
//                         style={{
//                             color: '#23A55A',
//                             fontWeight: 'bold',
//                             marginLeft: 0,
//                             paddingLeft: 0,
//                         }}
//                     >
//                         Informasi Penanggung Jawab
//                     </Divider>
//                     <Item
//                         label="Nama Penanggung Jawab"
//                         name="penanggungJawab"
//                         rules={[{ required: true, message: 'Masukkan Nama Penanggung Jawab!' }]}
//                     >
//                         <Input
//                             prefix={<UserOutlined />}
//                             placeholder="Masukkan Nama Penanggung Jawab"
//                             size="large"
//                         />
//                     </Item>
//                     <Item
//                         label="No Handphone"
//                         name="noHandphone"
//                         rules={[
//                             { required: true, message: 'Masukkan No Handphone!' },
//                             {
//                                 pattern: /^(\+62|0)[0-9]{9,12}$/,
//                                 message:
//                                     'Format nomor telepon tidak valid! (Contoh: +62.... atau 0....)',
//                             },
//                         ]}
//                     >
//                         <Input
//                             prefix={<PhoneOutlined />}
//                             placeholder="Masukkan No Handphone (+62)"
//                             size="large"
//                         />
//                     </Item>
//                     <Item
//                         label="No Identitas"
//                         name="noIdentitas"
//                         rules={[{ required: true, message: 'Masukkan No Identitas!' }]}
//                     >
//                         <Input
//                             prefix={<IdcardOutlined />}
//                             placeholder="Masukkan No Identitas"
//                             size="large"
//                         />
//                     </Item>

//                     {/* Akun Pengguna */}
//                     <Divider
//                         orientation="left"
//                         orientationMargin={0}
//                         style={{
//                             color: '#23A55A',
//                             fontWeight: 'bold',
//                             marginLeft: 0,
//                             paddingLeft: 0,
//                         }}
//                     >
//                         Akun Pengguna (digunakan sebagai user login SYPIU)
//                     </Divider>
//                     <Item
//                         label="Email"
//                         name="username"
//                         rules={[
//                             { required: true, message: 'Masukkan Email!' },
//                             { type: 'email', message: 'Format email tidak valid!' },
//                         ]}
//                     >
//                         <Input
//                             prefix={<MailOutlined />}
//                             placeholder="Masukkan Email"
//                             size="large"
//                         />
//                     </Item>
//                     <Item
//                         label="Password"
//                         name="password"
//                         rules={[
//                             { required: true, message: 'Masukkan Password!' },
//                             { min: 6, message: 'Password minimal 6 karakter!' },
//                         ]}
//                     >
//                         <Input.Password
//                             prefix={<LockOutlined />}
//                             placeholder="Masukkan Password"
//                             size="large"
//                         />
//                     </Item>

//                     {/* Tombol */}
//                     <Item wrapperCol={{ offset: 8, span: 16 }}>
//                         <Space style={{ marginTop: '24px', width: '100%' }}>
//                             <Button
//                                 type="primary"
//                                 htmlType="submit"
//                                 size="large"
//                                 loading={loading}
//                                 style={{
//                                     backgroundColor: '#23A55A',
//                                     borderColor: '#23A55A',
//                                     width: 120,
//                                 }}
//                             >
//                                 Simpan
//                             </Button>
//                             <Button onClick={onCancel} size="large" style={{ width: 120 }}>
//                                 Batal
//                             </Button>
//                         </Space>
//                     </Item>
//                 </Form>
//             </Card>
//         </Flex>
//     );
// };

// export default Registration;