'use client'

import { useEffect, useState } from 'react'
import { getSessionUser, updateProfile, changePassword, getSettings, getUserNotificationConfig, updateUserNotificationConfig } from '@/app/actions'
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'
import {
  Loader2,
  Save,
  CheckCircle,
  ShieldCheck,
  UserCircle,
  KeyRound,
  LockKeyhole,
  MessageCircle,
} from 'lucide-react'

export default function ProfilePage() {
  const [user, setUser] = useState<any>(null)
  const [name, setName] = useState('')
  const [photo, setPhoto] = useState('')
  const [loading, setLoading] = useState(true)

  // Notification Config state
  const [globalNotifEnabled, setGlobalNotifEnabled] = useState(false)
  const [mmChannelId, setMmChannelId] = useState('')
  const [mmActive, setMmActive] = useState(true)
  const [savingNotif, setSavingNotif] = useState(false)
  const [notifSuccess, setNotifSuccess] = useState(false)

  // Profile state
  const [savingProfile, setSavingProfile] = useState(false)
  const [profileError, setProfileError] = useState('')
  const [profileSuccess, setProfileSuccess] = useState(false)

  // Password state
  const [oldPassword, setOldPassword] = useState('')
  const [newPassword, setNewPassword] = useState('')
  const [confirmPassword, setConfirmPassword] = useState('')
  const [savingPassword, setSavingPassword] = useState(false)
  const [passwordError, setPasswordError] = useState('')
  const [passwordSuccess, setPasswordSuccess] = useState(false)
  const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false)

  useEffect(() => {
    loadUser()
  }, [])

  const loadUser = async () => {
    setLoading(true)
    const sessionUser = await getSessionUser()
    if (sessionUser) {
      setUser(sessionUser)
      setName(sessionUser.name)
      setPhoto(sessionUser.photo || '')

      const [globalSettings, notifConfig] = await Promise.all([
        getSettings(),
        getUserNotificationConfig(sessionUser.id)
      ])

      if (globalSettings?.MATTERMOST_NOTIF_ENABLED === 'true') {
        setGlobalNotifEnabled(true)
      }

      if (notifConfig?.success && notifConfig.config) {
        setMmChannelId(notifConfig.config.mattermost_channel_id || '')
        setMmActive(notifConfig.config.is_active ?? true)
      }
    }
    setLoading(false)
  }

  const handleSaveProfile = async (e: React.FormEvent) => {
    e.preventDefault()
    if (!name.trim()) {
      setProfileError('Nama wajib diisi')
      return
    }

    setProfileError('')
    setProfileSuccess(false)
    setSavingProfile(true)

    const [res, notifRes] = await Promise.all([
      updateProfile(user.id, name.trim(), photo.trim() || null),
      globalNotifEnabled ? updateUserNotificationConfig(user.id, {
        mattermost_channel_id: mmChannelId,
        is_active: mmActive
      }) : Promise.resolve({ success: true, error: null })
    ])

    if (res.success && notifRes.success) {
      setUser(res.user)
      setProfileSuccess(true)
      setTimeout(() => setProfileSuccess(false), 3000)
    } else {
      setProfileError(res.error || notifRes.error || 'Terjadi kesalahan')
    }
    setSavingProfile(false)
  }

  const handleChangePassword = async (e: React.FormEvent) => {
    e.preventDefault()
    setPasswordError('')
    setPasswordSuccess(false)

    if (!oldPassword || !newPassword || !confirmPassword) {
      setPasswordError('Semua field wajib diisi')
      return
    }
    if (newPassword !== confirmPassword) {
      setPasswordError('Konfirmasi password tidak cocok')
      return
    }
    if (newPassword.length < 6) {
      setPasswordError('Password baru minimal 6 karakter')
      return
    }

    setSavingPassword(true)
    const res = await changePassword(user.id, oldPassword, newPassword)
    if (res.success) {
      setPasswordSuccess(true)
      setOldPassword('')
      setNewPassword('')
      setConfirmPassword('')
      setTimeout(() => {
        setPasswordSuccess(false)
        setIsPasswordModalOpen(false)
      }, 2000)
    } else {
      setPasswordError(res.error || 'Gagal mengubah password')
    }
    setSavingPassword(false)
  }

  if (loading) {
    return (
      <div className="flex min-h-[50vh] flex-col items-center justify-center gap-3">
        <Loader2 className="h-8 w-8 animate-spin text-[#1B2CC1]" />
        <span className="text-xs font-semibold text-slate-500">Memuat profil...</span>
      </div>
    )
  }

  if (!user) {
    return (
      <div className="flex min-h-[50vh] flex-col items-center justify-center gap-3">
        <span className="text-xs font-semibold text-slate-500">Anda belum login.</span>
      </div>
    )
  }

  return (
    <div className="animate-in fade-in max-w-5xl space-y-6 pb-12 duration-500">
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
        {/* Left 2 Cols: Forms */}
        <div className="space-y-6 lg:col-span-2">
          {/* PROFILE FORM */}
          <Card className="overflow-hidden rounded-3xl border border-slate-200/90 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <div className="flex items-center justify-between border-b border-slate-100 p-6 dark:border-slate-800">
              <div>
                <h2 className="text-lg font-black text-slate-900 dark:text-white">
                  Informasi Akun
                </h2>
                <p className="mt-0.5 text-xs text-slate-500">
                  Ubah nama tampilan dan foto profil Anda.
                </p>
              </div>
              <span className="rounded-full bg-[#1B2CC1]/10 px-2.5 py-1 text-[11px] font-bold tracking-wider text-[#1B2CC1] uppercase">
                {user.role}
              </span>
            </div>

            <form onSubmit={handleSaveProfile}>
              <CardContent className="space-y-6 p-6">
                <div className="space-y-2">
                  <Label className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300">
                    Foto Profil
                  </Label>
                  <div className="flex flex-col items-center gap-5 rounded-2xl border-2 border-dashed border-slate-200 bg-slate-50/50 p-5 sm:flex-row dark:border-slate-800 dark:bg-slate-800/30">
                    {photo ? (
                      <img
                        src={photo}
                        alt={name}
                        className="h-20 w-20 shrink-0 rounded-2xl object-cover shadow-md ring-4 ring-white dark:ring-slate-700"
                      />
                    ) : (
                      <div className="flex h-20 w-20 shrink-0 items-center justify-center rounded-2xl bg-[#1B2CC1]/10 text-2xl font-bold text-[#1B2CC1] shadow-sm ring-4 ring-white dark:ring-slate-700">
                        {name ? name.charAt(0).toUpperCase() : <UserCircle className="h-10 w-10" />}
                      </div>
                    )}
                    <div className="w-full flex-1 space-y-1.5 text-center sm:text-left">
                      <p className="text-xs font-bold text-slate-800 dark:text-slate-200">
                        Pratinjau Avatar
                      </p>
                      <p className="text-[11px] text-slate-400">
                        Masukkan tautan URL foto gambar di bawah untuk memperbarui gambar profil.
                      </p>
                    </div>
                  </div>
                </div>

                <div className="space-y-1.5">
                  <Label
                    htmlFor="prof-name"
                    className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300"
                  >
                    Nama Tampilan <span className="text-red-500">*</span>
                  </Label>
                  <Input
                    id="prof-name"
                    value={name}
                    onChange={(e) => setName(e.target.value)}
                    placeholder="Contoh: Budi Santoso"
                    className="h-11 rounded-xl"
                  />
                </div>

                <div className="space-y-1.5">
                  <Label
                    htmlFor="prof-photo"
                    className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300"
                  >
                    URL Foto Profil
                  </Label>
                  <Input
                    id="prof-photo"
                    value={photo}
                    onChange={(e) => setPhoto(e.target.value)}
                    placeholder="https://..."
                    className="h-11 rounded-xl"
                  />
                </div>

                {globalNotifEnabled && (
                  <div className="space-y-6 pt-6 mt-6 border-t border-slate-100 dark:border-slate-800">
                    <div className="flex items-center gap-3">
                      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400">
                        <MessageCircle className="h-5 w-5" />
                      </div>
                      <div>
                        <h3 className="text-sm font-bold text-slate-900 dark:text-white">
                          Notifikasi Mattermost
                        </h3>
                        <p className="mt-0.5 text-[11px] text-slate-500">
                          Terima update pesanan PO langsung di DM Mattermost Anda.
                        </p>
                      </div>
                    </div>

                    <div className="flex flex-row items-start space-x-3 space-y-0 rounded-md border border-slate-200 p-4 dark:border-slate-800">
                      <input
                        type="checkbox"
                        id="mmActive"
                        checked={mmActive}
                        onChange={(e) => setMmActive(e.target.checked)}
                        className="mt-1 h-4 w-4 rounded border-slate-300 text-[#1B2CC1] focus:ring-[#1B2CC1]"
                      />
                      <div className="space-y-1 leading-none">
                        <Label htmlFor="mmActive" className="text-sm font-bold">
                          Aktifkan Notifikasi
                        </Label>
                        <p className="text-[11px] text-slate-500">
                          Kirim notifikasi setiap kali ada yang merubah pesanannya di PO Anda.
                        </p>
                      </div>
                    </div>

                    <div className="space-y-1.5">
                      <Label htmlFor="mm-channel" className="text-xs font-bold tracking-wider text-slate-700 uppercase dark:text-slate-300">
                        Username / Channel ID
                      </Label>
                      <Input
                        id="mm-channel"
                        value={mmChannelId}
                        onChange={(e) => setMmChannelId(e.target.value)}
                        placeholder="Contoh: @firman atau 9dpxnitm..."
                        className="h-11 rounded-xl"
                      />
                    </div>
                  </div>
                )}

                {profileError && (
                  <div className="rounded-xl bg-red-50 p-3 text-xs font-semibold text-red-600">
                    {profileError}
                  </div>
                )}
                {profileSuccess && (
                  <div className="flex items-center gap-2 rounded-xl bg-emerald-50 p-3 text-xs font-bold text-emerald-700">
                    <CheckCircle className="h-4 w-4" />
                    <span>Perubahan berhasil disimpan!</span>
                  </div>
                )}
              </CardContent>

              <div className="flex justify-end border-t border-slate-100 bg-slate-50/60 p-6">
                <Button
                  type="submit"
                  disabled={savingProfile}
                  className="h-11 rounded-xl bg-[#1B2CC1] px-6 font-bold text-white hover:bg-[#15229E]"
                >
                  {savingProfile ? (
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  ) : (
                    <Save className="mr-2 h-4 w-4" />
                  )}
                  Simpan Profil
                </Button>
              </div>
            </form>
          </Card>

        </div>

        {/* Right 1 Col: Account Details */}
        <div className="space-y-6">
          <Card className="space-y-4 rounded-3xl border border-slate-200/90 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900">
            <div className="mb-0 flex items-center gap-2 text-sm font-bold text-slate-800 dark:text-slate-200">
              <ShieldCheck className="h-4 w-4 text-[#1B2CC1]" />
              <span>Detail Akun</span>
            </div>

            <div className="space-y-2 border-t border-slate-100 pt-2 dark:border-slate-800">
              <div className="space-y-1">
                <span className="block text-[10px] font-bold text-slate-400 uppercase">
                  Username
                </span>
                <div className="text-sm font-semibold text-slate-800">{user.username}</div>
              </div>
              <div className="space-y-1">
                <span className="block text-[10px] font-bold text-slate-400 uppercase">
                  Role Akses
                </span>
                <div className="text-sm font-semibold text-[#1B2CC1] uppercase">{user.role}</div>
              </div>
            </div>

            {/* PASSWORD CHANGE MODAL BUTTON */}
            <div className="border-t border-slate-100 pt-2 dark:border-slate-800">
              <Dialog open={isPasswordModalOpen} onOpenChange={setIsPasswordModalOpen}>
                <DialogTrigger className="inline-flex h-11 w-full cursor-pointer items-center justify-center gap-2 rounded-xl border border-[#1B2CC1]/20 bg-[#1B2CC1]/5 px-4 py-2 text-sm font-bold whitespace-nowrap text-[#1B2CC1] hover:bg-[#1B2CC1]/10 hover:text-[#15229E] focus-visible:ring-1 focus-visible:ring-[#1B2CC1] focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50">
                  <KeyRound className="h-4 w-4" />
                  Ganti Password
                </DialogTrigger>
                <DialogContent className="overflow-hidden rounded-3xl border-slate-200/90 p-0 shadow-xl sm:max-w-[425px] dark:border-slate-800">
                  <DialogHeader className="border-b border-slate-100 bg-slate-50 p-6 dark:border-slate-800 dark:bg-slate-900/50">
                    <DialogTitle className="text-xl font-black text-slate-900 dark:text-white">
                      Ganti Password
                    </DialogTitle>
                    <p className="mt-1 text-xs text-slate-500">
                      Lindungi akun Anda dengan mengubah password secara berkala.
                    </p>
                  </DialogHeader>

                  <form onSubmit={handleChangePassword}>
                    <div className="space-y-5 bg-white p-6 dark:bg-slate-900">
                      <div className="space-y-4">
                        <div className="space-y-1.5">
                          <Label className="text-xs font-bold tracking-wider text-slate-700 uppercase">
                            Password Lama
                          </Label>
                          <div className="relative">
                            <LockKeyhole className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-slate-400" />
                            <Input
                              type="password"
                              value={oldPassword}
                              onChange={(e) => setOldPassword(e.target.value)}
                              className="h-11 rounded-xl pl-9"
                              placeholder="Masukkan password lama"
                            />
                          </div>
                        </div>
                        <div className="space-y-1.5">
                          <Label className="text-xs font-bold tracking-wider text-slate-700 uppercase">
                            Password Baru
                          </Label>
                          <div className="relative">
                            <KeyRound className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-slate-400" />
                            <Input
                              type="password"
                              value={newPassword}
                              onChange={(e) => setNewPassword(e.target.value)}
                              className="h-11 rounded-xl pl-9"
                              placeholder="Minimal 6 karakter"
                            />
                          </div>
                        </div>
                        <div className="space-y-1.5">
                          <Label className="text-xs font-bold tracking-wider text-slate-700 uppercase">
                            Konfirmasi Password Baru
                          </Label>
                          <div className="relative">
                            <KeyRound className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-slate-400" />
                            <Input
                              type="password"
                              value={confirmPassword}
                              onChange={(e) => setConfirmPassword(e.target.value)}
                              className="h-11 rounded-xl pl-9"
                              placeholder="Ketik ulang password baru"
                            />
                          </div>
                        </div>
                      </div>

                      {passwordError && (
                        <div className="rounded-xl bg-red-50 p-3 text-xs font-semibold text-red-600">
                          {passwordError}
                        </div>
                      )}
                      {passwordSuccess && (
                        <div className="flex items-center gap-2 rounded-xl bg-emerald-50 p-3 text-xs font-bold text-emerald-700">
                          <CheckCircle className="h-4 w-4" />
                          <span>Password berhasil diubah!</span>
                        </div>
                      )}
                    </div>

                    <div className="flex justify-end gap-3 border-t border-slate-100 bg-slate-50/60 p-6">
                      <Button
                        type="button"
                        variant="ghost"
                        onClick={() => setIsPasswordModalOpen(false)}
                        className="h-11 rounded-xl font-bold"
                      >
                        Batal
                      </Button>
                      <Button
                        type="submit"
                        disabled={savingPassword}
                        className="h-11 rounded-xl bg-[#1B2CC1] px-6 font-bold text-white hover:bg-[#15229E]"
                      >
                        {savingPassword ? (
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                        ) : (
                          <Save className="mr-2 h-4 w-4" />
                        )}
                        Ubah Password
                      </Button>
                    </div>
                  </form>
                </DialogContent>
              </Dialog>
            </div>
          </Card>
        </div>
      </div>
    </div>
  )
}