echos-ocr/src/app/(dashboard)/profile/page.tsx

"use client";

import * as React from "react";
import { toast } from "sonner";
import {
  Save,
  UserCircle,
  Camera,
  X,
  Mail,
  Briefcase,
  Building2,
  Shield,
  Loader2,
} from "lucide-react";

import { Header } from "@/components/layout/header";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { Badge } from "@/components/ui/badge";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { useUserProfile } from "@/lib/user-profile";

export default function ProfilePage() {
  const { profile, updateProfile, initials, role, isAuthenticated, loading } = useUserProfile();

  const [form, setForm] = React.useState({
    jobTitle: profile.jobTitle,
    company: profile.company,
    bio: profile.bio,
    displayName: profile.displayName,
    email: profile.email,
    avatarUrl: profile.avatarUrl,
  });
  const [dirty, setDirty] = React.useState(false);

  React.useEffect(() => {
    setForm({
      jobTitle: profile.jobTitle,
      company: profile.company,
      bio: profile.bio,
      displayName: profile.displayName,
      email: profile.email,
      avatarUrl: profile.avatarUrl,
    });
  }, [profile]);

  const handleChange = (field: string, value: string) => {
    setForm((prev) => ({ ...prev, [field]: value }));
    setDirty(true);
  };

  const handleSave = () => {
    updateProfile({
      jobTitle: form.jobTitle,
      company: form.company,
      bio: form.bio,
      displayName: form.displayName,
      email: form.email,
      avatarUrl: form.avatarUrl,
    });
    setDirty(false);
    toast.success("Profile updated");
  };

  const handleAvatarUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    if (!file.type.startsWith("image/")) {
      toast.error("Please select an image file");
      return;
    }

    if (file.size > 2 * 1024 * 1024) {
      toast.error("Image must be under 2 MB");
      return;
    }

    const reader = new FileReader();
    reader.onload = () => {
      handleChange("avatarUrl", reader.result as string);
    };
    reader.readAsDataURL(file);
  };

  const removeAvatar = () => {
    handleChange("avatarUrl", "");
  };

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
        <Loader2 className="size-8 animate-spin text-muted-foreground" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <Header title="Profile" description="Manage your personal information" icon={UserCircle}>
        <Button className="rounded-xl" onClick={handleSave} disabled={!dirty}>
          <Save className="mr-2 size-4" />
          Save Changes
        </Button>
      </Header>

      {isAuthenticated && (
        <div className="flex items-center gap-2 rounded-xl border border-emerald-500/20 bg-emerald-500/5 px-4 py-3">
          <Shield className="size-4 shrink-0 text-emerald-600 dark:text-emerald-400" />
          <p className="text-sm text-emerald-700 dark:text-emerald-300">
            Signed in as <span className="font-medium">{profile.displayName || profile.email}</span>.
            Role: <Badge variant="secondary" className="ml-1 text-[10px] px-1.5 py-0">{role}</Badge>
          </p>
        </div>
      )}

      <div className="grid gap-4 sm:gap-6 grid-cols-1 lg:grid-cols-3">
        <Card variant="glass" className="lg:col-span-1">
          <CardHeader>
            <CardTitle className="text-base">Photo</CardTitle>
            <CardDescription>
              Your profile picture is visible in the header
            </CardDescription>
          </CardHeader>
          <CardContent className="flex flex-col items-center gap-4">
            <div className="relative group">
              <Avatar size="lg" className="!size-24 text-2xl">
                {form.avatarUrl && (
                  <AvatarImage src={form.avatarUrl} alt={form.displayName} />
                )}
                <AvatarFallback className="text-2xl">
                  {initials || <UserCircle className="size-10 text-muted-foreground" />}
                </AvatarFallback>
              </Avatar>
              <label className="absolute inset-0 flex cursor-pointer items-center justify-center rounded-full bg-black/40 opacity-0 transition-opacity group-hover:opacity-100">
                <Camera className="size-6 text-white" />
                <input
                  type="file"
                  accept="image/*"
                  className="hidden"
                  onChange={handleAvatarUpload}
                />
              </label>
            </div>
            <div className="flex gap-2">
              <Button
                variant="outline"
                size="sm"
                className="rounded-xl"
                onClick={() => document.querySelector<HTMLInputElement>('input[type="file"]')?.click()}
              >
                <Camera className="mr-1.5 size-3" />
                Upload
              </Button>
              {form.avatarUrl && (
                <Button
                  variant="ghost"
                  size="sm"
                  className="rounded-xl text-muted-foreground"
                  onClick={removeAvatar}
                >
                  <X className="mr-1.5 size-3" />
                  Remove
                </Button>
              )}
            </div>
            <p className="text-center text-xs text-muted-foreground">
              JPG, PNG or WebP. Max 2 MB.
            </p>
          </CardContent>
        </Card>

        <Card variant="glass" className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="text-base">Personal Information</CardTitle>
            <CardDescription>
              Update your name, email, and other details
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-5">
            <div className="grid gap-4 sm:grid-cols-2">
              <div>
                <Label className="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
                  <UserCircle className="size-3" />
                  Display Name
                </Label>
                <Input
                  value={form.displayName}
                  onChange={(e) => handleChange("displayName", e.target.value)}
                  placeholder="Your name"
                />
              </div>
              <div>
                <Label className="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
                  <Mail className="size-3" />
                  Email
                </Label>
                <Input
                  type="email"
                  value={form.email}
                  onChange={(e) => handleChange("email", e.target.value)}
                  placeholder="you@example.com"
                  readOnly
                  className="bg-muted/40 cursor-default"
                />
              </div>
            </div>

            <div className="grid gap-4 sm:grid-cols-2">
              <div>
                <Label className="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
                  <Briefcase className="size-3" />
                  Job Title
                </Label>
                <Input
                  value={form.jobTitle}
                  onChange={(e) => handleChange("jobTitle", e.target.value)}
                  placeholder="e.g. Project Manager"
                />
              </div>
              <div>
                <Label className="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
                  <Building2 className="size-3" />
                  Company
                </Label>
                <Input
                  value={form.company}
                  onChange={(e) => handleChange("company", e.target.value)}
                  placeholder="e.g. Echo Labs"
                />
              </div>
            </div>

            <div>
              <Label className="mb-1.5 block text-xs font-medium text-muted-foreground">
                Bio
              </Label>
              <Textarea
                value={form.bio}
                onChange={(e) => handleChange("bio", e.target.value)}
                placeholder="Tell us a little about yourself..."
                className="min-h-24 resize-none"
              />
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}