"use client";

import { Camera, Github, Globe, Linkedin, MapPin, Twitter } from "lucide-react";
import { useState } from "react";

import { FileUpload, FileUploadTrigger } from "@/components/diceui/file-upload";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
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 { Separator } from "@/components/ui/separator";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

interface ProfileData {
  name: string;
  username: string;
  email: string;
  avatar?: string;
  bio?: string;
  role?: string;
  location?: string;
  website?: string;
  twitter?: string;
  linkedin?: string;
  github?: string;
}

interface SettingsProfile5Props {
  defaultValues?: Partial<ProfileData>;
  className?: string;
}

const SettingsProfile5 = ({
  defaultValues = {
    name: "ژوبین چناری",
    username: "jordanchen",
    email: "jordan.chen@email.com",
    avatar:
      "/block-media/shadcnblocks/block/avatar/avatar3.jpg",
    bio: "مهندس ارشد پلتفرم؛ ابزارهای داخلی فروش و اتوماسیون سامانه مدیریت ارتباط با مشتری می‌سازم.",
    role: "مهندس ارشد پلتفرم",
    location: "تهران، ایران",
    website: "https://jordanchen.dev",
    twitter: "jordanchen",
    linkedin: "jordanchen",
    github: "jordanchen",
  },
  className,
}: SettingsProfile5Props) => {
  const [formData, setFormData] = useState(defaultValues);
  const [avatarFiles, setAvatarFiles] = useState<File[]>([]);

  const updateField = (field: keyof ProfileData, value: string) => {
    setFormData((prev) => ({ ...prev, [field]: value }));
  };

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

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

  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-8">
        <div className="mb-8">
          <h1 className="text-xl font-semibold">ویرایش پروفایل</h1>
          <p className="text-muted-foreground">
            اطلاعات پروفایل را ویرایش کنید؛ تغییرات زنده در پیش‌نمایش دیده می‌شود.
          </p>
        </div>

        <div className="grid gap-8 lg:grid-cols-5">
          {/* Edit Form - Takes more space */}
          <div className="space-y-6 lg:col-span-3">
            <Card>
              <CardHeader>
                <CardTitle>اطلاعات پایه</CardTitle>
                <CardDescription>مشخصات عمومی که در فضای کاری دیده می‌شود</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <FileUpload
                  value={avatarFiles}
                  onValueChange={setAvatarFiles}
                  accept="image/*"
                  maxFiles={1}
                  maxSize={2 * 1024 * 1024}
                >
                  <div className="flex items-center gap-4">
                    <div className="relative">
                      <Avatar className="size-16">
                        <AvatarImage
                          src={avatarPreview}
                          alt={`آواتار ${formData.name}`}
                          className="object-cover"
                        />
                        <AvatarFallback>{initials}</AvatarFallback>
                      </Avatar>
                      <FileUploadTrigger asChild>
                        <Button
                          size="icon"
                          variant="secondary"
                          className="absolute -end-1 -bottom-1 size-6 rounded-full shadow-sm"
                        >
                          <Camera className="size-3" />
                        </Button>
                      </FileUploadTrigger>
                    </div>
                    <div className="space-y-1">
                      <p className="text-sm font-medium">عکس پروفایل</p>
                      <p className="text-xs text-muted-foreground">
                        JPG، PNG یا WEBP — حداکثر ۲ مگابایت.
                      </p>
                    </div>
                  </div>
                </FileUpload>

                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="name">نام و نام خانوادگی</Label>
                    <Input
                      id="name"
                      value={formData.name}
                      onChange={(e) => updateField("name", e.target.value)}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="username">نام کاربری</Label>
                    <Input
                      id="username"
                      value={formData.username}
                      onChange={(e) => updateField("username", e.target.value)}
                    />
                  </div>
                </div>

                <div className="space-y-2">
                  <Label htmlFor="role">سمت شغلی</Label>
                  <Input
                    id="role"
                    value={formData.role}
                    onChange={(e) => updateField("role", e.target.value)}
                    placeholder="مثال: مدیر موفقیت مشتری"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="bio">معرفی کوتاه</Label>
                  <Textarea
                    id="bio"
                    rows={3}
                    value={formData.bio}
                    onChange={(e) => updateField("bio", e.target.value)}
                    placeholder="نقش و حوزه تمرکز خود را بنویسید"
                  />
                </div>

                <div className="space-y-2">
                  <Label htmlFor="location">موقعیت مکانی</Label>
                  <Input
                    id="location"
                    value={formData.location}
                    onChange={(e) => updateField("location", e.target.value)}
                    placeholder="شهر، کشور"
                  />
                </div>
              </CardContent>
            </Card>

            <Card>
              <CardHeader>
                <CardTitle>لینک‌های حرفه‌ای</CardTitle>
                <CardDescription>وب‌سایت و پروفایل‌های حرفه‌ای شما</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="website">وب‌سایت</Label>
                  <Input
                    id="website"
                    type="url"
                    value={formData.website}
                    onChange={(e) => updateField("website", e.target.value)}
                    placeholder="https://yourwebsite.com"
                  />
                </div>

                <div className="grid gap-4 sm:grid-cols-3">
                  <div className="space-y-2">
                    <Label htmlFor="twitter">X / توییتر</Label>
                    <Input
                      id="twitter"
                      value={formData.twitter}
                      onChange={(e) => updateField("twitter", e.target.value)}
                      placeholder="نام کاربری"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="linkedin">لینکدین</Label>
                    <Input
                      id="linkedin"
                      value={formData.linkedin}
                      onChange={(e) => updateField("linkedin", e.target.value)}
                      placeholder="نام کاربری"
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="github">گیت‌هاب</Label>
                    <Input
                      id="github"
                      value={formData.github}
                      onChange={(e) => updateField("github", e.target.value)}
                      placeholder="نام کاربری"
                    />
                  </div>
                </div>
              </CardContent>
            </Card>

            <div className="flex justify-end gap-3">
              <Button variant="outline">انصراف</Button>
              <Button>ذخیره تغییرات</Button>
            </div>
          </div>

          {/* Live Preview */}
          <div className="lg:col-span-2">
            <div className="sticky top-8">
              <div className="rounded-xl bg-muted/50 p-6">
                <div className="mb-3 flex items-center justify-between">
                  <p className="text-sm font-medium">پیش‌نمایش زنده</p>
                  <Badge variant="secondary" className="text-xs">
                    نمای عمومی
                  </Badge>
                </div>

                <Card className="!shadow-none">
                  <CardContent className="pt-6">
                    <div className="flex flex-col items-center text-center">
                      <Avatar className="size-20 ring-2 ring-background">
                        <AvatarImage
                          src={avatarPreview}
                          alt={`آواتار ${formData.name}`}
                          className="object-cover"
                        />
                        <AvatarFallback className="text-xl">
                          {initials}
                        </AvatarFallback>
                      </Avatar>

                      <h3 className="mt-4 text-lg font-semibold">
                        {formData.name || "نام شما"}
                      </h3>
                      <p className="text-sm text-muted-foreground">
                        @{formData.username || "نام‌کاربری"}
                      </p>

                      {formData.role && (
                        <p className="mt-1 text-sm">{formData.role}</p>
                      )}

                      {formData.location && (
                        <div className="mt-2 flex items-center gap-1 text-sm text-muted-foreground">
                          <MapPin className="size-3.5" />
                          <span>{formData.location}</span>
                        </div>
                      )}

                      {formData.bio && (
                        <>
                          <Separator className="my-4" />
                          <p className="text-sm text-muted-foreground">
                            {formData.bio}
                          </p>
                        </>
                      )}

                      {(formData.website ||
                        formData.twitter ||
                        formData.linkedin ||
                        formData.github) && (
                        <>
                          <Separator className="my-4" />
                          <div className="flex gap-3">
                            {formData.website && (
                              <a
                                href={formData.website}
                                className="text-muted-foreground hover:text-foreground"
                              >
                                <Globe className="size-5" />
                              </a>
                            )}
                            {formData.twitter && (
                              <a
                                href={`https://x.com/${formData.twitter}`}
                                className="text-muted-foreground hover:text-foreground"
                              >
                                <Twitter className="size-5" />
                              </a>
                            )}
                            {formData.linkedin && (
                              <a
                                href={`https://linkedin.com/in/${formData.linkedin}`}
                                className="text-muted-foreground hover:text-foreground"
                              >
                                <Linkedin className="size-5" />
                              </a>
                            )}
                            {formData.github && (
                              <a
                                href={`https://github.com/${formData.github}`}
                                className="text-muted-foreground hover:text-foreground"
                              >
                                <Github className="size-5" />
                              </a>
                            )}
                          </div>
                        </>
                      )}
                    </div>
                  </CardContent>
                </Card>

                <p className="mt-3 text-center text-xs text-muted-foreground">
                  پروفایل شما برای همکاران به این شکل دیده می‌شود
                </p>
              </div>
            </div>
          </div>
        </div>
        </div>
      </div>
    </section>
  );
};

export { SettingsProfile5 };