reui-blocks/blocks/settings-profile3.tsx

"use client";

import { Upload, X } from "lucide-react";
import { useState } from "react";

import { FileUpload, FileUploadTrigger } from "@/components/diceui/file-upload";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

interface ProfileFormData {
  name: string;
  email: string;
  avatar?: string;
  coverImage?: string;
  bio?: string;
  timezone?: string;
  language?: string;
}

interface SettingsProfile3Props {
  defaultValues?: Partial<ProfileFormData>;
  onSave?: (data: ProfileFormData) => void;
  className?: string;
}

const SettingsProfile3 = ({
  defaultValues = {
    name: "سام رضایی",
    email: "sam.rivera@email.com",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar5.jpg",
    coverImage:
      "/block-media/shadcnblocks/block/photos/pawel-czerwinski-O4fAgtXLRwI-unsplash.jpg",
    bio: "مدیر بازاریابی رشد؛ روی جذب لید، اتوماسیون کمپین و افزایش MRR برای تیم‌های SaaS تمرکز دارم.",
    timezone: "America/Los_Angeles",
    language: "en",
  },
  className,
}: SettingsProfile3Props) => {
  const [avatarFiles, setAvatarFiles] = useState<File[]>([]);
  const [coverFiles, setCoverFiles] = useState<File[]>([]);

  const initials = defaultValues.name
    ?.split(" ")
    .map((n) => n[0])
    .join("")
    .toUpperCase();

  const avatarPreview =
    avatarFiles.length > 0
      ? URL.createObjectURL(avatarFiles[0])
      : defaultValues.avatar;

  const coverPreview =
    coverFiles.length > 0
      ? URL.createObjectURL(coverFiles[0])
      : defaultValues.coverImage;

  return (
    <section dir="rtl" lang="fa" className={cn("w-full py-32", className)}>
      <div className="w-full px-4 sm:px-6 lg:px-8">
        <div className="flex w-full flex-col gap-6">
      {/* Cover Image Card */}
      <Card className="overflow-hidden pt-0">
        <FileUpload
          value={coverFiles}
          onValueChange={setCoverFiles}
          accept="image/*"
          maxFiles={1}
          maxSize={5 * 1024 * 1024}
        >
          <div
            className="relative h-32 bg-muted bg-cover bg-center sm:h-40"
            style={{
              backgroundImage: coverPreview
                ? `url(${coverPreview})`
                : undefined,
            }}
          >
            <div className="absolute inset-0 bg-black/20" />
            <div className="absolute start-3 bottom-3 flex gap-2">
              <FileUploadTrigger asChild>
                <Button size="sm" variant="secondary" className="shadow-md">
                  <Upload className="me-2 size-4" />
                  تغییر آواتار کاور
                </Button>
              </FileUploadTrigger>
              {coverFiles.length > 0 && (
                <Button
                  size="icon"
                  variant="secondary"
                  className="size-8 shadow-md"
                  onClick={() => setCoverFiles([])}
                >
                  <X className="size-4" />
                </Button>
              )}
            </div>
          </div>
        </FileUpload>

        <CardContent className="-mt-12 pb-6 sm:-mt-14">
          <div className="flex flex-col items-center gap-4 sm:flex-row sm:items-end">
            <FileUpload
              dir="rtl"
              value={avatarFiles}
              onValueChange={setAvatarFiles}
              accept="image/*"
              maxFiles={1}
              maxSize={2 * 1024 * 1024}
            >
              <div className="relative">
                <Avatar className="size-24 border-4 border-card shadow-lg sm:size-28">
                  <AvatarImage
                    src={avatarPreview}
                    alt={`آواتار ${defaultValues.name}`}
                    className="object-cover"
                  />
                  <AvatarFallback className="text-xl font-semibold">
                    {initials}
                  </AvatarFallback>
                </Avatar>
                <FileUploadTrigger asChild>
                  <Button
                    size="icon"
                    variant="secondary"
                    className="absolute -end-1 -bottom-1 size-8 rounded-full shadow-md"
                  >
                    <Upload className="size-4" />
                  </Button>
                </FileUploadTrigger>
              </div>
            </FileUpload>
            <div className="space-y-1 text-center sm:pb-1 sm:text-start">
              <h3 className="text-lg font-semibold">{defaultValues.name}</h3>
              <p className="text-sm text-muted-foreground">
                {defaultValues.email}
              </p>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Basic Info Card */}
      <Card>
        <CardHeader>
          <CardTitle>اطلاعات پایه</CardTitle>
          <CardDescription>
            این اطلاعات در پروفایل عمومی فضای کاری نمایش داده می‌شود.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="space-y-2">
            <Label htmlFor="name">نام نمایشی</Label>
            <Input id="name" defaultValue={defaultValues.name} />
          </div>
          <div className="space-y-2">
            <Label htmlFor="bio">معرفی کوتاه</Label>
            <Textarea
              id="bio"
              rows={4}
              defaultValue={defaultValues.bio}
              placeholder="نقش و حوزه تخصصی خود را بنویسید"
            />
            <p className="text-xs text-muted-foreground">
              متن ساده کافی است؛ حداکثر چند جمله کوتاه.
            </p>
          </div>
        </CardContent>
      </Card>

      {/* Preferences Card */}
      <Card>
        <CardHeader>
          <CardTitle>ترجیحات حساب</CardTitle>
          <CardDescription>
            زبان رابط و منطقه زمانی فضای کاری خود را تنظیم کنید.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-4 sm:grid-cols-2">
            <div className="space-y-2">
              <Label htmlFor="language">زبان رابط</Label>
              <Select defaultValue={defaultValues.language}>
                <SelectTrigger id="language">
                  <SelectValue placeholder="انتخاب زبان رابط" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="fa">فارسی</SelectItem>
                  <SelectItem value="en">انگلیسی</SelectItem>
                  <SelectItem value="es">اسپانیایی</SelectItem>
                  <SelectItem value="fr">فرانسوی</SelectItem>
                  <SelectItem value="de">آلمانی</SelectItem>
                  <SelectItem value="ja">ژاپنی</SelectItem>
                  <SelectItem value="zh">چینی</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="timezone">منطقه زمانی</Label>
              <Select defaultValue={defaultValues.timezone}>
                <SelectTrigger id="timezone">
                  <SelectValue placeholder="انتخاب منطقه زمانی" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="America/New_York">
                    وقت شرقی آمریکا (ET)
                  </SelectItem>
                  <SelectItem value="America/Chicago">
                    وقت مرکزی آمریکا (CT)
                  </SelectItem>
                  <SelectItem value="America/Denver">
                    وقت کوهستانی آمریکا (MT)
                  </SelectItem>
                  <SelectItem value="America/Los_Angeles">
                    وقت اقیانوس آرام (PT)
                  </SelectItem>
                  <SelectItem value="Europe/London">
                    وقت گرینویچ (GMT)
                  </SelectItem>
                  <SelectItem value="Europe/Paris">
                    وقت اروپای مرکزی (CET)
                  </SelectItem>
                  <SelectItem value="Asia/Tehran">
                    وقت ایران (IRST)
                  </SelectItem>
                  <SelectItem value="Asia/Tokyo">
                    وقت استاندارد ژاپن (JST)
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
        </CardContent>
      </Card>

      {/* Actions */}
      <div className="flex justify-end gap-2">
        <Button variant="outline">انصراف</Button>
        <Button>ذخیره تغییرات</Button>
      </div>
        </div>
      </div>
    </section>
  );
};

export { SettingsProfile3 };