sp/src/components/Login.tsx

import { useState } from 'react';
import type { FormEvent } from 'react';
import PocketBase from 'pocketbase';
import { Input } from "./ui/input";
import { Button } from "./ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "./ui/card";
import { Eye, EyeOff, Loader2 } from "lucide-react";
import { Separator } from "./ui/separator";
import { Label } from "./ui/label";
import { useIsLoggedIn } from '../lib/isLoggedIn';
import Loader from "./ui/loader";
interface AuthStatus {
  message: string;
  isError: boolean;
}

interface UserRecord {
  id: string;
  email: string;
  name?: string;
  type?: string;
  avatar?: string;
  [key: string]: any;
}

interface AuthResponse {
  token: string;
  record: UserRecord;
}


const LoginPage = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [passwordVisible, setPasswordVisible] = useState(false);
  const [status, setStatus] = useState<AuthStatus>({ message: '', isError: false });
  const [isLoading, setIsLoading] = useState(false);

  const pb = new PocketBase("https://tst-pb.s38.siliconpin.com");

  interface AuthResponse {
    token: string;
    record: {
      query: string;
      id: string;
      email: string;
      name: string;
      type: string;
      avatar: string;
    };
  }
  
  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setStatus({ message: '', isError: false });
  
    try {
      const authData = await pb.collection("users").authWithPassword(email, password);
      if (!authData?.token || !authData?.record) {
        throw new Error("Authentication failed: No token or user record received");
      }
      
      const avatarUrl = authData.record.avatar ? pb.files.getUrl(authData.record, authData.record.avatar) : '';
  
      const authResponse: AuthResponse = {
        token: authData.token,
        record: {
          query: 'new',
          id: authData.record.id,
          email: authData.record.email,
          name: authData.record.name || authData.record.email.split('@')[0], // Fallback name
          type: authData.record.type || 'user',
          avatar: authData.record.avatar || ''
        }
      };
      
      await syncSessionWithBackend(authResponse, avatarUrl);
      window.location.href = '/profile';
    } catch (error: any) {
      console.error("Login failed:", error);
      setStatus({ 
        message: error.message || "Login failed. Please check your credentials.", 
        isError: true 
      });
    } finally {
      setIsLoading(false);
    }
  };

  const loginWithOAuth2 = async (provider: 'google' | 'facebook' | 'github') => {
    try {
      setIsLoading(true);
      setStatus({ message: '', isError: false });
      
      const authData = await pb.collection('users').authWithOAuth2({ provider });
      
      if (!authData?.record) {
        throw new Error("No user record found");
      }
  
      const avatarUrl = authData.record.avatar ? pb.files.getUrl(authData.record, authData.record.avatar) : '';
      const authResponse: AuthResponse = {
        token: authData.token,
        record: {
          query: 'new',
          id: authData.record.id,
          email: authData.record.email || '',
          name: authData.record.name || '',
          type: authData.record.type || '',
          avatar: authData.record.avatar || ''
        }
      };
      
      await syncSessionWithBackend(authResponse, avatarUrl);
      window.location.href = '/profile';
    } catch (error) {
      console.error(`${provider} Login failed:`, error);
      setStatus({ 
        message: `${provider} login failed. Please try again.`, 
        isError: true 
      });
    } finally {
      setIsLoading(false);
    }
  };

  const syncSessionWithBackend = async (authData: AuthResponse, avatarUrl: string) => {
    try {
      const response = await fetch('https://host-api.cs1.hz.siliconpin.com/v1/users/?query=login', {
        method: 'POST',
        credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          query: 'new',
          accessToken: authData.token,
          email: authData.record.email,
          name: authData.record.name,
          type: authData.record.type,
          avatar: avatarUrl,
          isAuthenticated: true,
          id: authData.record.id
        })
      });
      
      if (!response.ok) {
        const errorData = await response.json().catch(() => ({}));
        throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
      }
      
      const data = await response.json();
      console.log('Session synced with backend:', data);
      return data;
    } catch (error: any) {
      console.error('Error syncing session:', error);
      throw new Error(`Session sync failed: ${error.message}`);
    }
  };
  const { isLoggedIn, loading, error } = useIsLoggedIn();
  // console.log(isLoggedIn)
  if(loading){
    return <Loader />
  }
  if(isLoggedIn){
    return (
      window.location.href = '/'
    )
  }
  return (
    <div className="min-h-screen flex items-center justify-center p-4">
      <Card className="w-full max-w-md shadow-lg rounded-xl overflow-hidden">
        <CardHeader className="text-center space-y-1">
          <CardTitle className="text-2xl font-bold">Welcome Back</CardTitle>
          <CardDescription className="">
            Sign in to access your account
          </CardDescription>
        </CardHeader>
        
        <CardContent className="space-y-6">
          {status.message && (
            <div className={`p-3 rounded-md text-sm ${status.isError ? 'bg-red-50 text-red-600' : 'bg-green-50 text-green-600'}`}>
              {status.message}
            </div>
          )}
          
          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email" className="">
                Email Address
              </Label>
              <Input
                id="email"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@example.com"
                required
                className="focus:ring-2 focus:ring-blue-500"
              />
            </div>
            
            <div className="space-y-2">
              <div className="flex justify-between items-center">
                <Label htmlFor="password" className="">
                  Password
                </Label>
                <button
                  type="button"
                  onClick={() => setPasswordVisible(!passwordVisible)}
                  className="text-sm text-[#6d9e37]"
                >
                  
                </button>
              </div>
              <div className="relative">
                <Input
                  id="password"
                  type={passwordVisible ? "text" : "password"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="••••••••"
                  required
                  className="focus:ring-2 focus:ring-blue-500 pr-10"
                />
                <button
                  type="button"
                  onClick={() => setPasswordVisible(!passwordVisible)}
                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
                >
                  {passwordVisible ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
                </button>
              </div>
            </div>
            
            <Button
              type="submit"
              disabled={isLoading}
              className="w-full"
            >
              {isLoading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Signing in...
                </>
              ) : (
                'Sign In'
              )}
            </Button>
          </form>
          
          <div className="relative">
            <div className="absolute inset-0 flex items-center">
              <Separator className="w-full" />
            </div>
            <div className="relative flex justify-center text-xs uppercase">
              <span className="bg-background px-2 text-muted-foreground">
                Or continue with
              </span>
            </div>
          </div>
          
          <div className="grid grid-cols-3 gap-3">
            <Button
              variant="outline"
              onClick={() => loginWithOAuth2('google')}
              disabled={isLoading}
              className="flex items-center justify-center gap-2"
            >
              <img src="/assets/google.svg" alt="Google" className="h-6 w-6" />
            </Button>
            <Button
              variant="outline"
              onClick={() => loginWithOAuth2('facebook')}
              disabled={isLoading}
              className="flex items-center justify-center gap-2"
            >
              <img src="/assets/facebook.svg" alt="Facebook" className="h-6 w-6" />
            </Button>
            <Button
              variant="outline"
              onClick={() => loginWithOAuth2('github')}
              disabled={isLoading}
              className="flex items-center justify-center gap-2"
            >
              <img src="/assets/github.svg" alt="GitHub" className="h-6 w-6" />
            </Button>
          </div>
        </CardContent>
        
        <div className="px-6 pb-6 text-center text-sm text-gray-500">
          Don't have an account?{' '}
          <a href="/sign-up" className="font-medium text-[#6d9e37] hover:underline">
            Sign up
          </a>
        </div>
      </Card>
    </div>
  );
};

export default LoginPage;