"use client"

import { useEffect, useState } from "react"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Skeleton } from "@/components/ui/skeleton"

interface EmployeeData {
  id: string
  name: string
  username: string
  department: string
  position: string
  joinDate: string
  email?: string
  selfieImage?: string
}

export function EmployeeProfile() {
  const [employeeData, setEmployeeData] = useState<EmployeeData | null>(null)
  const [isLoading, setIsLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)

  useEffect(() => {
    const fetchEmployeeData = async () => {
      try {
        setIsLoading(true)
        // Get employeeId from localStorage
        const employeeId = localStorage.getItem("employeeId")
        
        if (!employeeId) {
          setError("Employee ID not found. Please log in again.")
          setIsLoading(false)
          return
        }
        
        // Fetch data from the API
        const response = await fetch(`/api/auth/profile?employeeId=${employeeId}`)
        const data = await response.json()
        
        if (!data.success) {
          throw new Error(data.error || "Failed to fetch profile data")
        }
        
        // Format the date properly
        const joinDate = data.profile.joinDate 
          ? new Date(data.profile.joinDate).toISOString().split("T")[0]
          : new Date().toISOString().split("T")[0]
        
        setEmployeeData({
          id: data.profile.id,
          name: data.profile.name,
          username: data.profile.username || data.profile.email?.split("@")[0] || "",
          department: data.profile.department || "Not assigned",
          position: data.profile.position || "Employee",
          joinDate: joinDate,
          email: data.profile.email,
          selfieImage: data.latestAttendance?.selfieImage || null
        })
      } catch (err) {
        console.error("Error fetching employee data:", err)
        setError("Failed to load profile data. Please try again later.")
      } finally {
        setIsLoading(false)
      }
    }
    
    fetchEmployeeData()
  }, [])

  if (isLoading) {
    return <ProfileSkeleton />
  }

  if (error) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>Error</CardTitle>
        </CardHeader>
        <CardContent>
          <p className="text-red-500">{error}</p>
          <button 
            className="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
            onClick={() => window.location.href = "/login"}
          >
            Return to Login
          </button>
        </CardContent>
      </Card>
    )
  }

  if (!employeeData) {
    return (
      <Card>
        <CardHeader>
          <CardTitle>No Data Available</CardTitle>
        </CardHeader>
        <CardContent>
          <p>No profile data found. Please log in again.</p>
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle>Employee Profile</CardTitle>
        <CardDescription>Your personal information</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col md:flex-row gap-6">
          <div className="flex flex-col items-center">
            <Avatar className="h-24 w-24 mb-4">
              {employeeData.selfieImage ? (
                <AvatarImage 
                  src={`data:image/jpeg;base64,${employeeData.selfieImage}`} 
                  alt="Profile" 
                />
              ) : (
                <AvatarImage src="/placeholder.svg?height=96&width=96" alt="Profile" />
              )}
              <AvatarFallback className="text-2xl">
                {employeeData.name
                  .split(" ")
                  .map((n) => n[0])
                  .join("")}
              </AvatarFallback>
            </Avatar>
            <h3 className="text-lg font-medium">{employeeData.name}</h3>
            <p className="text-sm text-slate-500 dark:text-slate-400">{employeeData.position}</p>
            <Badge variant="outline" className="mt-2">
              {employeeData.department}
            </Badge>
          </div>

          <div className="flex-1 space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              <div>
                <p className="text-sm text-slate-500 dark:text-slate-400">Employee ID</p>
                <p className="font-medium">{employeeData.id}</p>
              </div>
              <div>
                <p className="text-sm text-slate-500 dark:text-slate-400">Username</p>
                <p className="font-medium">{employeeData.username}</p>
              </div>
              <div>
                <p className="text-sm text-slate-500 dark:text-slate-400">Department</p>
                <p className="font-medium">{employeeData.department}</p>
              </div>
              <div>
                <p className="text-sm text-slate-500 dark:text-slate-400">Join Date</p>
                <p className="font-medium">{new Date(employeeData.joinDate).toLocaleDateString()}</p>
              </div>
              {employeeData.email && (
                <div>
                  <p className="text-sm text-slate-500 dark:text-slate-400">Email</p>
                  <p className="font-medium">{employeeData.email}</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

function ProfileSkeleton() {
  return (
    <Card>
      <CardHeader className="pb-2">
        <CardTitle>Employee Profile</CardTitle>
        <CardDescription>Your personal information</CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col md:flex-row gap-6">
          <div className="flex flex-col items-center">
            <Skeleton className="h-24 w-24 rounded-full mb-4" />
            <Skeleton className="h-5 w-32 mb-2" />
            <Skeleton className="h-4 w-24 mb-2" />
            <Skeleton className="h-6 w-20 mt-2" />
          </div>
          <div className="flex-1 space-y-4">
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {[1, 2, 3, 4].map((i) => (
                <div key={i}>
                  <Skeleton className="h-4 w-24 mb-2" />
                  <Skeleton className="h-5 w-32" />
                </div>
              ))}
            </div>
          </div>
        </div>
      </CardContent>
    </Card>
  )
}