'use client';

import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { useAuth } from '@/components/auth-provider';
import { auth } from '@/lib/firebase';
import { updatePassword, EmailAuthProvider, linkWithCredential } from 'firebase/auth';
import { doc, updateDoc, getDoc } from 'firebase/firestore';
import { db } from '@/lib/firebase';
import { toast } from '@/hooks/use-toast';
import { ArrowLeft, LogOut, User, Phone, Calendar, Shield, KeyRound, Lock } from 'lucide-react';
import { Skeleton } from '@/components/ui/skeleton';
import { useLanguage } from '@/hooks/use-language';
import { t } from '@/lib/i18n';

export default function SettingsPage() {
  const router = useRouter();
  const { user, userData, loading, isAdmin, signOutUser } = useAuth();
  const [newPassword, setNewPassword] = useState('');
  const [settingPw, setSettingPw] = useState(false);
  const [hasPassword, setHasPassword] = useState(false);
  const { lang } = useLanguage();

  useEffect(() => {
    if (!loading && !user) {
      router.push('/auth?redirect=/settings');
    }
  }, [user, loading, router]);

  useEffect(() => {
    if (user) {
      getDoc(doc(db, 'users', user.uid)).then((snap) => {
        if (snap.exists()) {
          setHasPassword(snap.data()?.passwordSet || false);
        }
      });
    }
  }, [user]);

  if (loading) {
    return (
      <div className="min-h-screen bg-background">
        <header className="sticky top-0 z-50 border-b border-zinc-900 bg-background/80 backdrop-blur-md">
          <div className="max-w-3xl mx-auto px-4 h-14 flex items-center">
            <Skeleton className="h-6 w-24" />
          </div>
        </header>
        <main className="max-w-3xl mx-auto px-4 py-8 space-y-4">
          <Skeleton className="h-20 w-full rounded-2xl" />
          <Skeleton className="h-20 w-full rounded-2xl" />
        </main>
      </div>
    );
  }

  if (!user) return null;

  const handleSignOut = async () => {
    await signOutUser();
    router.push('/');
  };

  return (
    <div className="min-h-screen bg-background">
      <header className="sticky top-0 z-50 border-b border-zinc-900 bg-background/80 backdrop-blur-md">
        <div className="max-w-3xl mx-auto px-4 h-14 flex items-center gap-4">
          <Link href="/dashboard" className="text-zinc-400 hover:text-white transition-colors">
            <ArrowLeft className="h-5 w-5" />
          </Link>
          <h1 className="text-lg font-bold">{t(lang, 'settings')}</h1>
        </div>
      </header>

      <main className="max-w-3xl mx-auto px-4 py-8 space-y-6">
        {/* {t(lang, 'profile')} */}
        <div className="rounded-2xl border border-zinc-800 bg-zinc-900/30 p-6">
          <div className="flex items-center gap-4 mb-6">
            <div className="h-16 w-16 rounded-full bg-zinc-800 flex items-center justify-center">
              <User className="h-8 w-8 text-zinc-400" />
            </div>
            <div>
              <h2 className="font-semibold text-lg text-white">{userData?.displayName || t(lang, 'user')}</h2>
              <p className="text-sm text-zinc-500">{user.phoneNumber || userData?.phoneNumber || t(lang, 'noPhone')}</p>
            </div>
          </div>

          <div className="space-y-4">
            <div className="flex items-center gap-3 text-sm">
              <Phone className="h-4 w-4 text-zinc-500" />
              <span className="text-zinc-300">{user.phoneNumber || userData?.phoneNumber || t(lang, 'notSet')}</span>
            </div>
            <div className="flex items-center gap-3 text-sm">
              <Calendar className="h-4 w-4 text-zinc-500" />
              <span className="text-zinc-300">
                {t(lang, 'joined')} {userData?.createdAt ? userData.createdAt.toLocaleDateString() : t(lang, 'recently')}
              </span>
            </div>
            {isAdmin && (
              <div className="flex items-center gap-3 text-sm">
                <Shield className="h-4 w-4 text-amber-400" />
                <span className="text-amber-400">{t(lang, 'administrator')}</span>
              </div>
            )}
          </div>
        </div>

        {/* Set Password */}
        <div className="rounded-2xl border border-zinc-800 bg-zinc-900/30 p-6">
          <div className="flex items-center gap-3 mb-4">
            <Lock className="h-5 w-5 text-zinc-400" />
            <h3 className="font-semibold text-white">{t(lang, 'password')}</h3>
            {hasPassword && (
              <span className="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full border text-emerald-400 bg-emerald-950/50 border-emerald-800">
                {t(lang, 'passwordSet')}
              </span>
            )}
          </div>
          <div className="space-y-3">
            <input
              type="password"
              placeholder={hasPassword ? t(lang, 'updatePassword') : t(lang, 'setPassword')}
              value={newPassword}
              onChange={(e) => setNewPassword(e.target.value)}
              className="w-full h-11 px-4 rounded-xl bg-zinc-900 border border-zinc-800 text-white placeholder-zinc-500 focus:outline-none focus:border-zinc-600 transition-colors text-sm"
            />
            <button
              onClick={async () => {
                if (!newPassword || newPassword.length < 6) {
                  toast({ title: t(lang, 'passwordMinChars'), variant: 'destructive' });
                  return;
                }
                if (!user) return;
                setSettingPw(true);
                try {
                  const email = `${user.phoneNumber?.replace(/[^0-9]/g, '') || user.uid}@once.app`;
                  try {
                    const credential = EmailAuthProvider.credential(email, newPassword);
                    await linkWithCredential(user, credential);
                  } catch (linkErr: any) {
                    if (linkErr.code === 'auth/provider-already-linked') {
                      await updatePassword(user, newPassword);
                    } else if (linkErr.code === 'auth/operation-not-allowed') {
                      toast({
                        title: t(lang, 'emailPasswordDisabled'),
                        description: t(lang, 'enableEmailPassword'),
                        variant: 'destructive',
                      });
                      setSettingPw(false);
                      return;
                    } else {
                      throw linkErr;
                    }
                  }
                  await updateDoc(doc(db, 'users', user.uid), {
                    passwordSet: true,
                    loginEmail: email,
                  });
                  setHasPassword(true);
                  setNewPassword('');
                  toast({ title: t(lang, 'passwordSaved'), variant: 'success' });
                } catch (err: any) {
                  toast({ title: err.message || t(lang, 'failedSavePassword'), variant: 'destructive' });
                } finally {
                  setSettingPw(false);
                }
              }}
              disabled={settingPw}
              className="w-full h-11 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-medium text-sm hover:from-indigo-600 hover:to-purple-700 transition-all shadow-md shadow-indigo-500/20 disabled:opacity-50"
            >
              {settingPw ? t(lang, 'save') : hasPassword ? t(lang, 'updatePassword') : t(lang, 'setPassword')}
            </button>
          </div>
        </div>

        {/* Account Actions */}
        <div className="rounded-2xl border border-zinc-800 bg-zinc-900/30 overflow-hidden">
          <button
            onClick={handleSignOut}
            className="w-full flex items-center gap-3 p-4 text-start hover:bg-zinc-800/30 transition-colors"
          >
            <LogOut className="h-5 w-5 text-red-400" />
            <span className="text-red-400 font-medium">{t(lang, 'signOut')}</span>
          </button>
        </div>

        {/* Back to Dashboard */}
        <Link
          href="/dashboard"
          className="block text-center text-sm text-zinc-500 hover:text-zinc-300 transition-colors"
        >
          {t(lang, 'backToDashboard')}
        </Link>
      </main>
    </div>
  );
}