"use client";

import { useEffect, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { RefreshCw, Mail } from "lucide-react";
import { useSession, signIn } from "next-auth/react";

export function Email() {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const { status } = useSession();

  useEffect(() => {
    if (status === 'authenticated') {
      setLoading(false);
    } else if (status === 'unauthenticated') {
      signIn();
    }
  }, [status]);

  if (status === 'loading' || loading) {
    return (
      <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
        <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
          <CardTitle className="text-lg font-semibold text-gray-800">
            <div className="flex items-center gap-2">
              <Mail className="h-5 w-5" />
              <span>Emails</span>
            </div>
          </CardTitle>
        </CardHeader>
        <CardContent className="p-6">
          <div className="flex items-center justify-center">
            <RefreshCw className="h-5 w-5 animate-spin text-gray-400" />
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
      <CardHeader className="flex flex-row items-center justify-between pb-2 space-x-4 border-b border-gray-100">
        <CardTitle className="text-lg font-semibold text-gray-800">
          <div className="flex items-center gap-2">
            <Mail className="h-5 w-5" />
            <span>Emails</span>
          </div>
        </CardTitle>
      </CardHeader>
      <CardContent className="p-0 h-[calc(100%-3.5rem)]">
        <iframe
          src="https://lab.slm-lab.net/email"
          className="w-full h-full border-0"
          title="Email Inbox"
        />
      </CardContent>
    </Card>
  );
}