<style>
/* Modern dark theme with glassmorphism */
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #fff;
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 2rem;
}

header {
  margin-bottom: 2rem;
  text-align: left;
}

h1 { 
  margin: 0 0 0.5rem 0;
  font-size: 2.5rem;
  font-weight: bold;
  color: #fff;
}

h2 {
  margin: 0.5rem 0;
  color: #fff;
}

input {
  flex-grow: 1;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  backdrop-filter: blur(10px);
}

input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

button,
.button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

button:hover,
.button:hover { 
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.status {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}
.status .connected { 
  color: #10b981; 
  font-weight: bold;
  text-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.connectionFailed { 
  color: #ff6b6b; 
  font-weight: bold;
  text-shadow: 0 0 10px rgba(255, 107, 107, 0.5);
}

.poll-container {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 2.5rem;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.2);
  width: 100%;
  max-width: 600px;
}

.back-btn { 
  margin-left: 1rem; 
  padding: 0.5rem 1rem; 
  font-size: 0.85rem; 
  background: rgba(100, 116, 139, 0.8);
  backdrop-filter: blur(10px);
}

.back-btn:hover {
  background: rgba(100, 116, 139, 1);
}

/* Hide the actual file input */
input[type="file"] {
  display: none;
}

/* Add subtle animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.poll-container {
  animation: fadeIn 0.5s ease-out;
}

/* Responsive design */
@media (max-width: 640px) {
  body {
    padding: 1rem;
  }
  
  .poll-container {
    padding: 1.5rem;
  }
  
  h1 {
    font-size: 2rem;
  }
}
</style>
<template>
    <div class="poll-container">
        <header>
            <h1 @click="activePollId = null" style="cursor:pointer">P2P Polling App 🗳️</h1>
            <div class="status">
                <button v-if="activePollId" @click="activePollId = null" class="back-btn">← Back To List</button>
                <span :class="{ 'connected': isConnected }">
                    ● {{ isConnected ? 'Synced' : 'Waiting for other Peers...' }}
                </span>
                <span> | Peers online: {{ connectedPeers }}</span>
                <h2 v-if="connectionAttempFailed" class="connectionFailed">⚠ Connection to Signaling Server Failed!</h2>
                <div v-if="user===null" style="margin-top: 10px;">
                    <button @click="createUser">Create New User</button>
                    Or
                    <label title="Select Key File">
                        <span class="button">Login</span>
                        <input 
                            type="file"
                            accept=".pem"
                            @change="loadUser"
                        />
                    </label>
                    <div style="margin-top: 10px;">
                        <label title="Register Public Key">
                            <span class="button" style="font-size: 0.8rem; padding: 0.5rem 1rem;">Register Public Key</span>
                            <input 
                                type="file"
                                accept=".pem"
                                @change="registerPublicKey"
                            />
                        </label>
                    </div>
                </div>
            </div>
        </header>

        <main>
            <PollList v-if="!activePollId" :userid="user?.userid" @select-poll="selectPoll" />
            <Poll v-else :activePollId="activePollId" :userid="user?.userid" :poll-data="pollData" :addOption="addOption" :vote="vote"/>
        </main>
    </div>
</template>

<script setup lang="ts">
    import { v4 as uuidv4 } from 'uuid';
    import { generateUserKeyPair, exportPrivateKey, savePrivateKeyToFile, exportPublicKey, stringToCryptoKey } from '~/utils/crypto';
    const activePollId = ref<string | null>(null);
    const user = shallowRef<UserData | null>(null);

    const { pollData, isConnected, connectionAttempFailed, connectedPeers, addOption, vote } = usePoll(activePollId,user);

    const selectPoll = (id: string) => {
        activePollId.value = id;
    };


    const createUser = async () => {
        try {
            const keypair : CryptoKeyPair = await generateUserKeyPair();
            console.log('keypair:', keypair);
            const uuid = uuidv4();
            user.value = {
                userid: uuid,
                private_key: keypair.privateKey,
                public_key: keypair.publicKey,
            };
            const prvKeyString = await exportPrivateKey(keypair.privateKey);
            await savePrivateKeyToFile(prvKeyString,uuid+".pem")

            const pubKeyString = await exportPublicKey(keypair.publicKey);
            
            // Save public key to server
            await $fetch(`/api/users/${uuid}`, {
                method: 'POST',
                headers: {
                    'Authorization': `Bearer ${process.env.ADMIN_API_KEY || 'default-admin-key-change-in-production'}`
                },
                body: { public_key: pubKeyString }
            });

            // Also save public key to a file for backup
            const pubPemHeader = "-----BEGIN PUBLIC KEY-----\n";
            const pubPemFooter = "\n-----END PUBLIC KEY-----";
            const pubFileContent = pubPemHeader + pubKeyString + pubPemFooter;
            const blob = new Blob([pubFileContent], { type: "text/plain" });
            const url = URL.createObjectURL(blob);
            const link = document.createElement("a");
            link.href = url;
            link.download = uuid + "_public.pem";
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
            
            console.log("User created successfully. Please save both key files.");
        } catch (err) {
            user.value = null
            console.error("Failed to create new User!", err);
        }
    };
    const loadUser = async (event: Event) => {
        const target = event.target as HTMLInputElement;
        const file = target.files?.[0];

        if (file) {
            try {
                const content = await file.text();
                console.log("File loaded: ");
                if (file.name && content) {
                    try {
                        const uuid = file.name.replace(".pem", "").replace("_public", "");
                        // Standardize the string for the importer
                        const pkBase64 = content.replace(/-----BEGIN PRIVATE KEY-----|-----END PRIVATE KEY-----/g, "").replace(/\s+/g, "");

                        const key = await stringToCryptoKey(pkBase64, "private");
                        
                        user.value = {
                            userid: uuid,
                            private_key: key,
                            public_key: undefined,
                        };
                        
                        console.log("Login successful for:", uuid);
                    } catch (err) {
                        console.error("Crypto Import Error:", err);
                        alert("The file content is not a valid Private Key.");
                    }
                }
            } catch (e) {
                console.error("Failed to read file", e);
            }
        }
    };

    const registerPublicKey = async (event: Event) => {
        const target = event.target as HTMLInputElement;
        const file = target.files?.[0];

        if (file) {
            try {
                const content = await file.text();
                if (file.name && content) {
                    try {
                        const uuid = file.name.replace(".pem", "").replace("_public", "");
                        console.log("Attempting to register public key for user:", uuid);
                        
                        // Standardize the string for the importer
                        const pubKeyBase64 = content.replace(/-----BEGIN PUBLIC KEY-----|-----END PUBLIC KEY-----/g, "").replace(/\s+/g, "");
                        console.log("Public key length:", pubKeyBase64.length);

                        // Save public key to server
                        await $fetch(`/api/users/${uuid}`, {
                            method: 'POST',
                            headers: {
                                'Authorization': `Bearer ${process.env.ADMIN_API_KEY || 'default-admin-key-change-in-production'}`
                            },
                            body: { public_key: pubKeyBase64 }
                        });
                        
                        alert(`Public key registered successfully for user: ${uuid}`);
                    } catch (err: any) {
                        console.error("Registration Error:", err);
                        const errorMsg = err.data?.message || err.statusMessage || err.message || "Unknown error";
                        alert(`Failed to register public key: ${errorMsg}`);
                    }
                }
            } catch (e) {
                console.error("Failed to read file", e);
                alert("Failed to read file.");
            }
        }
    };
</script>