"use client";

import { CornerDownLeft, UserRoundPlus } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";

interface InviteUser1Props {
  heading?: string;
  className?: string;
}

const InviteUser1 = ({
  heading = "دعوت کاربران",
  className,
}: InviteUser1Props) => {
  const users = [
    {
      id: 1,
      name: "سارا رضایی",
      email: "sarah.j@company.com",
      role: "مدیر",
      status: "فعال",
    },
    {
      id: 2,
      name: "مایکل چن",
      email: "m.chen@company.com",
      role: "همکار",
      status: "دعوت‌شده",
    },
  ];

  return (
    <section className="py-32">
      <div className="container flex flex-col gap-6">
        <div className="text-start">
          <h2 className="text-xl font-semibold tracking-tight">اعضای تیم</h2>
          <p className="mt-2 text-sm text-muted-foreground">
            مدیریت و دعوت کاربران به تیم
          </p>
        </div>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>نام</TableHead>
              <TableHead>ایمیل</TableHead>
              <TableHead>نقش</TableHead>
              <TableHead>وضعیت</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {users.map((user) => (
              <TableRow key={user.id}>
                <TableCell className="font-medium">{user.name}</TableCell>
                <TableCell>{user.email}</TableCell>
                <TableCell>{user.role}</TableCell>
                <TableCell>{user.status}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
        <Dialog>
          <DialogTrigger asChild>
            <Button className="w-fit">دعوت کاربران</Button>
          </DialogTrigger>
          <DialogContent className={cn("gap-0 overflow-hidden p-0", className)}>
            <DialogTitle className="flex items-center gap-2 border-b p-4 text-sm font-medium">
              <UserRoundPlus className="size-4" />
              {heading}
            </DialogTitle>
            <form
              autoComplete="off"
              onSubmit={(e) => e.preventDefault()}
              className="flex flex-col gap-4 bg-muted pt-4"
            >
              <div className="flex flex-col gap-4 px-4">
                <div className="space-y-1">
                  <Label className="text-xs">آدرس ایمیل</Label>
                  <Textarea
                    dir="rtl"
                    style={{
                      resize: "none",
                      minHeight: "100px",
                    }}
                    placeholder="آدرس‌های ایمیل را وارد کنید..."
                    className="text-end"
                  />
                </div>
                <div className="space-y-1">
                  <Label className="text-xs">تعیین نقش</Label>
                  <Select defaultValue="collaborator">
                    <SelectTrigger className="w-full">
                      <SelectValue placeholder="انتخاب نقش" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="collaborator">همکار</SelectItem>
                      <SelectItem value="administrator">مدیر</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
              <DialogFooter className="border-t bg-background px-4 py-3">
                <Button size="sm" type="submit">
                  ارسال دعوت‌نامه
                  <CornerDownLeft className="rtl:rotate-180" />
                </Button>
              </DialogFooter>
            </form>
          </DialogContent>
        </Dialog>
      </div>
    </section>
  );
};

export { InviteUser1 };