'use client';

import React, { useState } from 'react';
import { Button } from '@/components/ui/button';
import { PassportFilePicker } from './passport-file-picker';
import { CreatePassportDialog } from './create-passport-dialog';
import { ProfileManagementDialog } from './profile-management-dialog';
import { useAuth } from '@/lib/auth/context';

interface LoginButtonProps {
  className?: string;
}

export function LoginButton({ className }: LoginButtonProps) {
  const [showFilePicker, setShowFilePicker] = useState(false);
  const [showCreatePassport, setShowCreatePassport] = useState(false);
  const [showProfileManagement, setShowProfileManagement] = useState(false);
  const [selectedPassportFile, setSelectedPassportFile] = useState<File | null>(null);

  const handleFileSelected = async (file: File) => {
    console.log('File selected:', file.name);
    setSelectedPassportFile(file);
    // The passport-file-picker will handle password input and decryption
    // We just need to close the file picker dialog
    setShowFilePicker(false);
  };

  const handleCreatePassport = () => {
    setShowFilePicker(false);
    setShowCreatePassport(true);
  };

  const handlePassportCreated = () => {
    // Optional: Show success message or trigger login with the new passport
    console.log('Passport created successfully');
  };

  return (
    <>
      <Button
        onClick={() => setShowFilePicker(true)}
        className={className}
        variant="outline"
      >
        Login with Passport
      </Button>

      {showFilePicker && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div className="bg-white rounded-lg p-6 max-w-md w-full">
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-lg font-semibold">Select Passport File</h3>
              <button
                onClick={() => setShowFilePicker(false)}
                className="text-gray-400 hover:text-gray-600"
              >
                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                </svg>
              </button>
            </div>
            <PassportFilePicker onFileSelected={handleFileSelected} />

            <div className="mt-6 pt-6 border-t border-gray-200">
              <div className="text-center">
                <p className="text-sm text-gray-600 mb-3">Don't have a passport yet?</p>
                <Button
                  onClick={handleCreatePassport}
                  variant="outline"
                  className="w-full"
                >
                  Create New Passport
                </Button>
              </div>
            </div>
          </div>
        </div>
      )}

      <CreatePassportDialog
        open={showCreatePassport}
        onOpenChange={setShowCreatePassport}
        onPassportCreated={handlePassportCreated}
      />

      <ProfileManagementDialog
        open={showProfileManagement}
        onOpenChange={setShowProfileManagement}
        passportId={null}
      />
    </>
  );
}