CRM_ENVR/src/app/(dashboard)/profile/page.tsx

// ───────────────────────────────────────────────
// Profile Page (/(dashboard)/profile)
// ───────────────────────────────────────────────
// Route: /profile
// Purpose: View and edit the current user's
//   profile — avatar upload, personal info,
//   role, join date, and status.
// Layout: Two-column grid — left card with avatar
//   + metadata badges, right card with account
//   details in a 2-column grid.
// ───────────────────────────────────────────────

"use client"

import { useRef } from "react"
import { PageHeader } from "@/components/shared/page-header"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Badge } from "@/components/ui/badge"
import { useUser } from "@/providers/user-provider"
import { Mail, Calendar, Shield, Activity, Camera } from "lucide-react"
import { toast } from "sonner"

/**
 * ProfilePage
 * ───────────
 * Displays the currently logged-in user's profile.
 * Allows avatar upload (PNG/JPEG) via a hidden
 * file input with a hover-triggered camera overlay.
 *
 * @returns Profile layout or null if no user.
 */
export default function ProfilePage() {
  const { user, updateAvatar } = useUser()
  if (!user) return null
  const fileInputRef = useRef<HTMLInputElement>(null)

  // ── Avatar upload handler ──
  const handleAvatarChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
    // Validate file type — only PNG and JPEG accepted
    const validTypes = ["image/png", "image/jpeg"]
    if (!validTypes.includes(file.type)) {
      toast.error("Only PNG and JPEG files are allowed")
      return
    }
    // Read as data URL, then POST to API
    const reader = new FileReader()
    reader.onload = async () => {
      const dataUrl = reader.result as string
      try {
        const res = await fetch("/api/users/avatar", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ avatar: dataUrl }),
        })
        if (res.ok) {
          const data = await res.json()
          updateAvatar(data.avatar)
          toast.success("Avatar updated")
        } else {
          toast.error("Failed to save avatar")
        }
      } catch {
        console.warn("Failed to save avatar")
        toast.error("Failed to save avatar")
      }
    }
    reader.readAsDataURL(file)
  }

  return (
    <div className="space-y-6">
      <PageHeader title="Profile" description="Your account information" />

      <div className="grid gap-6 lg:grid-cols-3">
        {/* ── Left column: Avatar + quick info ── */}
        <Card className="lg:col-span-1">
          <CardContent className="flex flex-col items-center pt-8">
            {/* Avatar with hover-to-upload overlay */}
            <div className="relative">
              <Avatar className="h-24 w-24">
                <AvatarImage src={user.avatar} />
                <AvatarFallback className="text-2xl">{user.name.split(" ").map((n) => n[0]).join("")}</AvatarFallback>
              </Avatar>
              <button
                type="button"
                onClick={() => fileInputRef.current?.click()}
                className="absolute inset-0 flex items-center justify-center rounded-full bg-black/40 opacity-0 transition-opacity hover:opacity-100"
              >
                <Camera className="h-6 w-6 text-white" />
              </button>
              <input
                ref={fileInputRef}
                type="file"
                accept=".png,.jpeg,.jpg"
                className="hidden"
                onChange={handleAvatarChange}
              />
            </div>
            <h2 className="mt-4 text-xl font-semibold">{user.name}</h2>
            <Badge variant="secondary" className="mt-1 capitalize">
              {user.role}
            </Badge>
            {/* Metadata rows */}
            <div className="mt-6 flex w-full flex-col gap-3 text-sm">
              <div className="flex items-center gap-3 rounded-lg bg-muted/50 px-4 py-3">
                <Mail className="h-4 w-4 text-muted-foreground" />
                <span className="text-muted-foreground">{user.email}</span>
              </div>
              <div className="flex items-center gap-3 rounded-lg bg-muted/50 px-4 py-3">
                <Calendar className="h-4 w-4 text-muted-foreground" />
                <span className="text-muted-foreground">
                  Joined {new Date(user.createdAt).toLocaleDateString("en-US", { month: "long", year: "numeric" })}
                </span>
              </div>
              <div className="flex items-center gap-3 rounded-lg bg-muted/50 px-4 py-3">
                <Shield className="h-4 w-4 text-muted-foreground" />
                <span className="text-muted-foreground capitalize">{user.role} access</span>
              </div>
              <div className="flex items-center gap-3 rounded-lg bg-muted/50 px-4 py-3">
                <Activity className="h-4 w-4 text-muted-foreground" />
                <span className="text-muted-foreground">{user.active ? "Active" : "Inactive"}</span>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* ── Right column: Full account details ── */}
        <div className="lg:col-span-2 space-y-6">
          <Card>
            <CardHeader>
              <CardTitle>Account Details</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-1">
                  <span className="text-xs text-muted-foreground">Full Name</span>
                  <p className="text-sm font-medium">{user.name}</p>
                </div>
                <div className="space-y-1">
                  <span className="text-xs text-muted-foreground">Email</span>
                  <p className="text-sm font-medium">{user.email}</p>
                </div>
                <div className="space-y-1">
                  <span className="text-xs text-muted-foreground">Role</span>
                  <p className="text-sm font-medium capitalize">{user.role}</p>
                </div>
                <div className="space-y-1">
                  <span className="text-xs text-muted-foreground">Status</span>
                  <p className="text-sm font-medium">{user.active ? "Active" : "Inactive"}</p>
                </div>
                <div className="space-y-1">
                  <span className="text-xs text-muted-foreground">Member Since</span>
                  <p className="text-sm font-medium">
                    {new Date(user.createdAt).toLocaleDateString("en-US", { month: "long", day: "numeric", year: "numeric" })}
                  </p>
                </div>
                <div className="space-y-1">
                  <span className="text-xs text-muted-foreground">User ID</span>
                  <p className="text-sm font-medium font-mono">{user.id}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  )
}