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 SignupPage = () => {
  const [email, setEmail] = useState('');
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [passwordVisible, setPasswordVisible] = useState(false);
  const [confirmPasswordVisible, setConfirmPasswordVisible] = 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");

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setIsLoading(true);
    setStatus({ message: '', isError: false });

    if (password !== confirmPassword) {
      setStatus({ message: 'Passwords do not match', isError: true });
      setIsLoading(false);
      return;
    }

    try {
      // Create the user
      const userData = {
        email,
        name,
        password,
        passwordConfirm: confirmPassword,
        emailVisibility: true,
      };

      const record = await pb.collection('users').create(userData);

      // Automatically login after signup
      const authData = await pb.collection('users').authWithPassword(email, password);
      
      if (!authData?.token || !authData?.record) {
        throw new Error("Authentication failed after signup");
      }

      const avatarUrl = authData.record.avatar ? pb.files.getUrl(authData.record, authData.record.avatar) : '';

      const authResponse: AuthResponse = {
        token: authData.token,
        record: {
          id: authData.record.id,
          email: authData.record.email,
          name: authData.record.name || authData.record.email.split('@')[0],
          type: authData.record.type || 'user',
          avatar: authData.record.avatar || '',
        }
      };

      await syncSessionWithBackend(authResponse, avatarUrl);
      window.location.href = '/profile';
    } catch (error: any) {
      console.error("Signup failed:", error);
      setStatus({ 
        message: error.message || "Signup failed. Please try again.", 
        isError: true 
      });
    } finally {
      setIsLoading(false);
    }
  };

  const signupWithOAuth2 = 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: {
          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} Signup failed:`, error);
      setStatus({ 
        message: `${provider} signup 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();

  if (loading) {
    return <Loader />;
  }

  if (isLoggedIn) {
    window.location.href = '/';
    return null;
  }

  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">Create an Account</CardTitle>
          <CardDescription className="">
            Join us to get started
          </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="name">Full Name</Label>
              <Input
                id="name"
                type="text"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Your Name"
                required
                className="focus:ring-2 focus:ring-blue-500"
              />
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="email">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">
              <Label htmlFor="password">Password</Label>
              <div className="relative">
                <Input
                  id="password"
                  type={passwordVisible ? "text" : "password"}
                  value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  placeholder="••••••••"
                  required
                  minLength={8}
                  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>
            
            <div className="space-y-2">
              <Label htmlFor="confirmPassword">Confirm Password</Label>
              <div className="relative">
                <Input
                  id="confirmPassword"
                  type={confirmPasswordVisible ? "text" : "password"}
                  value={confirmPassword}
                  onChange={(e) => setConfirmPassword(e.target.value)}
                  placeholder="••••••••"
                  required
                  minLength={8}
                  className="focus:ring-2 focus:ring-blue-500 pr-10"
                />
                <button
                  type="button"
                  onClick={() => setConfirmPasswordVisible(!confirmPasswordVisible)}
                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
                >
                  {confirmPasswordVisible ? <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" />
                  Creating account...
                </>
              ) : (
                'Sign Up'
              )}
            </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 sign up with
              </span>
            </div>
          </div>
          
          <div className="grid grid-cols-3 gap-3">
            <Button
              variant="outline"
              onClick={() => signupWithOAuth2('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={() => signupWithOAuth2('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={() => signupWithOAuth2('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">
          Already have an account?{' '}
          <a href="/login" className="font-medium text-[#6d9e37] hover:underline">
            Sign in
          </a>
        </div>
      </Card>
    </div>
  );
};

export default SignupPage;