import { Head, useForm } from '@inertiajs/react';
import AppLayout from '@/layouts/app-layout';
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';

interface User { id:number; name:string; email:string; }
export default function ProfileSettings({ user }: { user: User }) {
  const form = useForm({ name:user.name ?? '', email:user.email ?? '', current_password:'', password:'', password_confirmation:'' });
  const submit = (e: React.FormEvent) => { e.preventDefault(); form.put('/settings/profile'); };
  return <AppLayout breadcrumbs={[{title:'Profil Saya',href:'/settings/profile'}]}>
    <Head title="Profil Saya" />
    <div className="flex flex-col gap-6 p-4 md:p-6"><Card><CardHeader><CardTitle>Profil Saya</CardTitle></CardHeader><CardContent><form onSubmit={submit} className="grid gap-5 max-w-2xl">
      <div className="grid gap-2"><Label>Nama</Label><Input value={form.data.name} onChange={e=>form.setData('name',e.target.value)} /></div>
      <div className="grid gap-2"><Label>Email</Label><Input type="email" value={form.data.email} onChange={e=>form.setData('email',e.target.value)} /></div>
      <div className="border-t pt-5"><p className="font-medium">Ganti Password</p><p className="mb-4 text-sm text-muted-foreground">Kosongkan jika tidak ingin mengganti password.</p></div>
      <div className="grid gap-2"><Label>Password saat ini</Label><Input type="password" value={form.data.current_password} onChange={e=>form.setData('current_password',e.target.value)} />{form.errors.current_password&&<p className="text-sm text-destructive">{form.errors.current_password}</p>}</div>
      <div className="grid gap-2"><Label>Password baru</Label><Input type="password" value={form.data.password} onChange={e=>form.setData('password',e.target.value)} />{form.errors.password&&<p className="text-sm text-destructive">{form.errors.password}</p>}</div>
      <div className="grid gap-2"><Label>Konfirmasi password</Label><Input type="password" value={form.data.password_confirmation} onChange={e=>form.setData('password_confirmation',e.target.value)} /></div>
      <div className="flex justify-end"><Button disabled={form.processing}>Simpan Perubahan</Button></div>
    </form></CardContent></Card></div>
  </AppLayout>;
}
