import { Head, useForm, Link } from '@inertiajs/react';
import React from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import AppLayout from '@/layouts/app-layout';

interface Position {
    id: number;
    name: string;
    basic_salary: number | null;
}

interface PageProps {
    position: Position;
}

export default function Edit({ position }: PageProps) {
    const { data, setData, put, processing, errors } = useForm({
        name: position.name,
        basic_salary: position.basic_salary ?? '',
    });

    const submit = (e: React.FormEvent) => {
        e.preventDefault();
        put(`/admin/positions/${position.id}`);
    };

    return (
        <AppLayout>
            <Head title="Edit Jabatan" />

            <div className="p-4 md:p-8 w-full">
                <div className="flex items-center justify-between mb-6">
                    <div>
                        <h2 className="text-2xl font-bold tracking-tight">Edit Jabatan</h2>
                        <p className="text-muted-foreground">Perbarui nama dan gaji pokok jabatan.</p>
                    </div>
                    <Button variant="outline" asChild>
                        <Link href="/admin/positions">Kembali</Link>
                    </Button>
                </div>

                <Card>
                    <CardHeader>
                        <CardTitle>Form Edit Jabatan</CardTitle>
                    </CardHeader>
                    <Separator />
                    <CardContent className="pt-6">
                        <form onSubmit={submit} className="space-y-6">

                            <div className="max-w-xl space-y-4">
                                {/* Nama Jabatan */}
                                <div className="space-y-2">
                                    <Label>Nama Jabatan</Label>
                                    <Input
                                        value={data.name}
                                        onChange={e => setData('name', e.target.value)}
                                    />
                                    {errors.name && (
                                        <p className="text-red-500 text-xs">{errors.name}</p>
                                    )}
                                </div>

                                {/* Gaji Pokok */}
                                <div className="space-y-2">
                                    <Label>Gaji Pokok (Rp)</Label>
                                    <Input
                                        type="number"
                                        min={0}
                                        placeholder="Contoh: 5000000"
                                        value={data.basic_salary}
                                        onChange={e => setData('basic_salary', e.target.value)}
                                    />
                                    <p className="text-xs text-muted-foreground">
                                        Perubahan ini TIDAK mempengaruhi data payroll yang sudah ada.
                                    </p>
                                    {errors.basic_salary && (
                                        <p className="text-red-500 text-xs">{errors.basic_salary}</p>
                                    )}
                                </div>
                            </div>

                            <div className="flex justify-start gap-4 pt-2">
                                <Button type="submit" disabled={processing}>
                                    Simpan Perubahan
                                </Button>
                                <Button type="button" variant="ghost" asChild>
                                    <Link href="/admin/positions">Batal</Link>
                                </Button>
                            </div>

                        </form>
                    </CardContent>
                </Card>
            </div>
        </AppLayout>
    );
}