full.js

"use client";

import React, { useState, useEffect } from "react";
import { useUser } from "@clerk/nextjs";
import Navbar from "@/components/Navbar";
import { supabase } from "@/lib/supabase";
import CryptoJS from "crypto-js";

const ENCRYPTION_SECRET = process.env.NEXT_PUBLIC_ENCRYPTION_SECRET;

const Dashboard = () => {
  const { user } = useUser();
  const [activeTab, setActiveTab] = useState("passwords");
  const [visiblePasswords, setVisiblePasswords] = useState([]);
  const [visibleCards, setVisibleCards] = useState([]);
  const [savedPasswords, setSavedPasswords] = useState([]);
  const [savedCards, setSavedCards] = useState([]);

  const [passwordForm, setPasswordForm] = useState({
    website: "",
    username: "",
    password: "",
  });

  const [cardForm, setCardForm] = useState({
    card_name: "",
    card_number: "",
    card_type: "",
    expiry_date: "",
    cvv: "",
  });

  const togglePasswordVisibility = (id) => {
    setVisiblePasswords((prev) =>
      prev.includes(id) ? prev.filter((pid) => pid !== id) : [...prev, id]
    );
  };

  const toggleCardVisibility = (id) => {
    setVisibleCards((prev) =>
      prev.includes(id) ? prev.filter((cid) => cid !== id) : [...prev, id]
    );
  };

  const encrypt = (text) => {
    return CryptoJS.AES.encrypt(text, ENCRYPTION_SECRET).toString();
  };

  const decrypt = (ciphertext) => {
    try {
      const bytes = CryptoJS.AES.decrypt(ciphertext, ENCRYPTION_SECRET);
      return bytes.toString(CryptoJS.enc.Utf8);
    } catch {
      return "[Decryption Failed]";
    }
  };

  const handlePasswordFormChange = (e) => {
    const { name, value } = e.target;
    setPasswordForm((prev) => ({ ...prev, [name]: value }));
  };

  const handleCardFormChange = (e) => {
    const { name, value } = e.target;
    setCardForm((prev) => ({ ...prev, [name]: value }));
  };

  const handleSavePassword = async (e) => {
    e.preventDefault();
    if (!user?.emailAddresses[0]?.emailAddress) return;

    const encryptedPassword = encrypt(passwordForm.password);

    const { data, error } = await supabase
      .from("Passwords")
      .insert([
        {
          website: passwordForm.website,
          username: passwordForm.username,
          password: encryptedPassword,
          email: user.emailAddresses[0].emailAddress,
        },
      ])
      .select();

    if (error) {
      console.error("Error saving password:", error.message);
    } else {
      fetchPasswords();
      setPasswordForm({ website: "", username: "", password: "" });
    }
  };

  const handleSaveCard = async (e) => {
    e.preventDefault();
    if (!user?.emailAddresses[0]?.emailAddress) return;

    const encryptedCardNumber = encrypt(cardForm.card_number);
    const encryptedCVV = encrypt(cardForm.cvv);

    const { data, error } = await supabase
      .from("Cards")
      .insert([
        {
          card_name: cardForm.card_name,
          card_type: cardForm.card_type,
          expiry_date: cardForm.expiry_date,
          card_number: encryptedCardNumber,
          cvv: encryptedCVV,
          email: user.emailAddresses[0].emailAddress,
        },
      ])
      .select();

    if (error) {
      console.error("Error saving card:", error.message);
    } else {
      fetchCards();
      setCardForm({ card_name: "", card_number: "", card_type: "", expiry_date: "", cvv: "" });
    }
  };

  const fetchPasswords = async () => {
    if (!user?.emailAddresses[0]?.emailAddress) return;

    const { data, error } = await supabase
      .from("Passwords")
      .select("*")
      .eq("email", user.emailAddresses[0].emailAddress);

    if (error) {
      console.error("Error fetching passwords:", error.message);
    } else {
      const decrypted = data.map((item) => ({
        ...item,
        decryptedPassword: decrypt(item.password),
      }));
      setSavedPasswords(decrypted);
    }
  };

  const fetchCards = async () => {
    if (!user?.emailAddresses[0]?.emailAddress) return;

    const { data, error } = await supabase
      .from("Cards")
      .select("*")
      .eq("email", user.emailAddresses[0].emailAddress);

    if (error) {
      console.error("Error fetching cards:", error.message);
    } else {
      const decrypted = data.map((item) => ({
        ...item,
        decryptedCardNumber: decrypt(item.card_number),
        decryptedCVV: decrypt(item.cvv),
      }));
      setSavedCards(decrypted);
    }
  };

  const handleDeletePassword = async (id) => {
    const { error } = await supabase.from("Passwords").delete().eq("id", id);
    if (error) {
      console.error("Error deleting password:", error.message);
    } else {
      fetchPasswords();
    }
  };

  const handleDeleteCard = async (id) => {
    const { error } = await supabase.from("Cards").delete().eq("id", id);
    if (error) {
      console.error("Error deleting card:", error.message);
    } else {
      fetchCards();
    }
  };

  useEffect(() => {
    if (user) {
      fetchPasswords();
      fetchCards();
    }
  }, [user]);

  return (
    <div className="font-sans min-h-screen bg-[var(--background)] flex flex-col">
      <div className="flex-1 p-4 sm:p-6 lg:p-8">
        <div className="max-w-7xl mx-auto">
          <div className="mb-8">
            <h1 className="text-3xl sm:text-4xl font-bold text-[var(--primary-dark)] mb-2">
              Dashboard
            </h1>
            <p className="text-[var(--foreground)]/70">
              Manage your passwords and payment information securely
            </p>
          </div>

          <div className="flex space-x-1 bg-[var(--surface)] p-1 rounded-lg shadow-sm border border-[var(--border)] mb-8">
            <button
              onClick={() => setActiveTab("passwords")}
              className={`flex-1 py-3 px-4 rounded-md font-medium transition-colors ${
                activeTab === "passwords"
                  ? "bg-[var(--primary)] text-white shadow-sm"
                  : "text-[var(--primary-dark)] hover:bg-[var(--primary-light)]/20"
              }`}
            >
              Passwords
            </button>
            <button
              onClick={() => setActiveTab("cards")}
              className={`flex-1 py-3 px-4 rounded-md font-medium transition-colors ${
                activeTab === "cards"
                  ? "bg-[var(--primary)] text-white shadow-sm"
                  : "text-[var(--primary-dark)] hover:bg-[var(--primary-light)]/20"
              }`}
            >
              Credit Cards
            </button>
          </div>

          {activeTab === "passwords" ? (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                {/* Input Form */}
            <div className="bg-[var(--surface)] rounded-xl p-6 shadow-sm border border-[var(--border)]">
              <h2 className="text-xl font-semibold text-[var(--primary-dark)] mb-6">
                Add New Password
              </h2>

              <form className="space-y-4" onSubmit={handleSavePassword}>
                <div>
                  <label className="block text-sm font-medium text-[var(--primary-dark)] mb-2">
                    Website/Service
                  </label>
                  <input
                    type="text"
                    name="website"
                    value={passwordForm.website}
                    onChange={handlePasswordFormChange}
                    placeholder="e.g., Gmail, GitHub"
                    className="w-full px-4 py-3 rounded-lg border border-[var(--border)] bg-[var(--background)]"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-[var(--primary-dark)] mb-2">
                    Username/Email
                  </label>
                  <input
                    type="text"
                    name="username"
                    value={passwordForm.username}
                    onChange={handlePasswordFormChange}
                    placeholder="Enter username or email"
                    className="w-full px-4 py-3 rounded-lg border border-[var(--border)] bg-[var(--background)]"
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-[var(--primary-dark)] mb-2">
                    Password
                  </label>
                  <input
                    type="text"
                    name="password"
                    value={passwordForm.password}
                    onChange={handlePasswordFormChange}
                    placeholder="Enter password"
                    className="w-full px-4 py-3 rounded-lg border border-[var(--border)] bg-[var(--background)]"
                  />
                </div>
                <button
                  type="submit"
                  className="w-full py-3 px-4 bg-[var(--primary)] text-white font-semibold rounded-lg hover:bg-[var(--primary-dark)] transition-colors"
                >
                  Save Password
                </button>
              </form>
            </div>
              {/* Password List */}
            <div className="bg-[var(--surface)] rounded-xl p-6 shadow-sm border border-[var(--border)]">
              <h2 className="text-xl font-semibold text-[var(--primary-dark)] mb-6">
                Saved Passwords
              </h2>

              <div className="space-y-3 max-h-[400px] overflow-y-auto pr-2">
                {savedPasswords.map((item) => (
                  <div
                    key={item.id}
                    className="p-4 rounded-lg border border-[var(--border)] bg-[var(--background)] hover:shadow-sm transition-shadow"
                  >
                    <div className="flex items-center justify-between mb-2">
                      <h3 className="font-semibold text-[var(--primary-dark)]">
                        {item.website}
                      </h3>
                    </div>
                    <p className="text-sm text-[var(--foreground)]/80 mb-1">
                      {item.username}
                    </p>
                    <div className="flex items-center justify-between">
                      <span className="text-sm text-[var(--foreground)]/60">
                        {visiblePasswords.includes(item.id)
                          ? item.decryptedPassword
                          : "••••••••"}
                      </span>
                      <div className="flex space-x-2">
                        <button
                          className="text-xs px-2 py-1 bg-gray-100 text-gray-800 rounded hover:bg-gray-200 transition-colors"
                          onClick={() => togglePasswordVisibility(item.id)}
                        >
                          {visiblePasswords.includes(item.id) ? "Hide" : "View"}
                        </button>
                        <button
                          className="text-xs px-2 py-1 bg-[var(--primary-light)] text-white rounded hover:bg-[var(--primary)] transition-colors"
                          onClick={() =>
                            navigator.clipboard.writeText(item.decryptedPassword)
                          }
                        >
                          Copy
                        </button>
                        <button
                          className="text-xs px-2 py-1 bg-red-100 text-red-600 rounded hover:bg-red-200 transition-colors"
                          onClick={() => handleDeletePassword(item.id)}
                        >
                          Delete
                        </button>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

            </div>
          ) : (
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
              {/* Card Input Form */}
              <div className="bg-[var(--surface)] rounded-xl p-6 shadow-sm border border-[var(--border)]">
                <h2 className="text-xl font-semibold text-[var(--primary-dark)] mb-6">
                  Add New Card
                </h2>
                <form className="space-y-4" onSubmit={handleSaveCard}>
                  <input type="text" name="card_name" value={cardForm.card_name} onChange={handleCardFormChange} placeholder="Cardholder Name" className="w-full px-4 py-3 rounded-lg border border-[var(--border)] bg-[var(--background)]" />
                  <input type="text" name="card_number" value={cardForm.card_number} onChange={handleCardFormChange} placeholder="Card Number" className="w-full px-4 py-3 rounded-lg border border-[var(--border)] bg-[var(--background)]" />
                  <input type="text" name="card_type" value={cardForm.card_type} onChange={handleCardFormChange} placeholder="Card Type (e.g. Visa)" className="w-full px-4 py-3 rounded-lg border border-[var(--border)] bg-[var(--background)]" />
                  <input type="text" name="expiry_date" value={cardForm.expiry_date} onChange={handleCardFormChange} placeholder="Expiry Date (MM/YY)" className="w-full px-4 py-3 rounded-lg border border-[var(--border)] bg-[var(--background)]" />
                  <input type="text" name="cvv" value={cardForm.cvv} onChange={handleCardFormChange} placeholder="CVV" className="w-full px-4 py-3 rounded-lg border border-[var(--border)] bg-[var(--background)]" />
                  <button type="submit" className="w-full py-3 px-4 bg-[var(--primary)] text-white font-semibold rounded-lg hover:bg-[var(--primary-dark)] transition-colors">
                    Save Card
                  </button>
                </form>
              </div>

              {/* Saved Cards List */}
              <div className="bg-[var(--surface)] rounded-xl p-6 shadow-sm border border-[var(--border)]">
                <h2 className="text-xl font-semibold text-[var(--primary-dark)] mb-6">
                  Saved Cards
                </h2>
                <div className="space-y-3 max-h-[400px] overflow-y-auto pr-2">
                  {savedCards.map((item) => (
                    <div key={item.id} className="p-4 rounded-lg border border-[var(--border)] bg-[var(--background)] hover:shadow-sm transition-shadow">
                      <h3 className="font-semibold text-[var(--primary-dark)] mb-1">{item.card_name}</h3>
                      <p className="text-sm text-[var(--foreground)]/80 mb-1">{item.card_type} • {item.expiry_date}</p>
                      <div className="flex items-center justify-between">
                        <span className="text-sm text-[var(--foreground)]/60">
                          {visibleCards.includes(item.id) ? `${item.decryptedCardNumber} (${item.decryptedCVV})` : "•••• •••• •••• •••• (CVV)"}
                        </span>
                        <div className="flex space-x-2">
                          <button onClick={() => toggleCardVisibility(item.id)} className="text-xs px-2 py-1 bg-gray-100 text-gray-800 rounded hover:bg-gray-200 transition-colors">
                            {visibleCards.includes(item.id) ? "Hide" : "View"}
                          </button>
                          <button onClick={() => navigator.clipboard.writeText(item.decryptedCardNumber)} className="text-xs px-2 py-1 bg-[var(--primary-light)] text-white rounded hover:bg-[var(--primary)] transition-colors">
                            Copy
                          </button>
                          <button onClick={() => handleDeleteCard(item.id)} className="text-xs px-2 py-1 bg-red-100 text-red-600 rounded hover:bg-red-200 transition-colors">
                            Delete
                          </button>
                        </div>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          )}

        </div>
      </div>
    </div>
  );
};

export default Dashboard;