import AvatarUpload from '@/Components/AvatarUpload';
import AppLayout from '@/Layouts/AppLayout';
import Link from '@/Components/Link';
import { Head, usePage } from '@inertiajs/react';
import { ChevronRight, ShieldCheck, ShieldOff } from 'lucide-react';
import UpdatePasswordForm from './Partials/UpdatePasswordForm';
import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm';

interface Props {
    mustVerifyEmail: boolean;
    status?: string;
    twoFactorEnabled?: boolean;
    avatar_url_full?: string | null;
    kullanici_ad?: string;
}

export default function Edit({ mustVerifyEmail, status, twoFactorEnabled, avatar_url_full, kullanici_ad }: Props) {
    // Backend Inertia share yapmadıysa user'dan al
    const auth = (usePage().props as any).auth;
    const iki = twoFactorEnabled ?? !!auth?.user?.two_factor_enabled;

    return (
        <AppLayout title="Profil Ayarları">
            <Head title="Profil" />

            <div className="space-y-4">
                <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                    <div className="mb-4 flex items-center gap-2">
                        <h3 className="text-base font-semibold text-slate-900">Profil Fotoğrafı</h3>
                    </div>
                    <AvatarUpload
                        mevcutUrl={avatar_url_full ?? auth?.user?.avatar_url_full}
                        adSoyad={kullanici_ad ?? auth?.user?.name}
                        yukleUrl="/profile/avatar"
                        silUrl="/profile/avatar"
                    />
                </div>

                <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                    <UpdateProfileInformationForm
                        mustVerifyEmail={mustVerifyEmail}
                        status={status}
                        className="max-w-xl"
                    />
                </div>

                <div className="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
                    <UpdatePasswordForm className="max-w-xl" />
                </div>

                {/* 2FA bağlantısı */}
                <Link
                    href="/profil/iki-faktor/"
                    className="flex items-center justify-between rounded-xl border border-slate-200 bg-white p-5 shadow-sm transition hover:border-blue-300 hover:shadow-md"
                >
                    <div className="flex items-center gap-3">
                        {iki ? (
                            <div className="rounded-lg bg-emerald-50 p-2.5 text-emerald-700">
                                <ShieldCheck className="h-5 w-5" />
                            </div>
                        ) : (
                            <div className="rounded-lg bg-slate-100 p-2.5 text-slate-500">
                                <ShieldOff className="h-5 w-5" />
                            </div>
                        )}
                        <div>
                            <h3 className="font-semibold text-slate-900">İki Faktörlü Doğrulama (2FA)</h3>
                            <p className="text-sm text-slate-600">
                                {iki
                                    ? 'Aktif — her girişte Authenticator kodu istenir'
                                    : 'Devre dışı — yalnızca şifreyle giriş yapılıyor'}
                            </p>
                        </div>
                    </div>
                    <ChevronRight className="h-5 w-5 text-slate-400" />
                </Link>

                <p className="text-center text-xs text-slate-500">
                    Hesap silme yetkisi sadece sistem yöneticilerindedir. Hesabınızla ilgili
                    talepler için yöneticinizle iletişime geçin.
                </p>
            </div>
        </AppLayout>
    );
}
