"use client";

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Filter, MoreVertical, Search } from "lucide-react";
import { useTranslations } from "next-intl";
import { useState } from "react";
import { UserFormWrapper } from "./components/UserFormWrapper";
import { UserMobileCard } from "./components/UserMobileCard";

// Temporary user data for demonstration
const tempUsers = [
  {
    id: 1,
    name: "John Doe",
    email: "john@example.com",
    role: "Admin",
    joinedAt: "2023-01-01",
    status: "active",
  },
  {
    id: 2,
    name: "Alice Smith",
    email: "alice@test.com",
    role: "Editor",
    joinedAt: "2023-02-15",
    status: "active",
  },
  {
    id: 3,
    name: "Bob Johnson",
    email: "bob@community.com",
    role: "Member",
    joinedAt: "2023-03-10",
    status: "inactive",
  },
  {
    id: 4,
    name: "Charlie Brown",
    email: "charlie@community.com",
    role: "Member",
    joinedAt: "2023-04-20",
    status: "active",
  },
];

export default function UsersPage() {
  const [open, setOpen] = useState(false);
  const t = useTranslations("users");

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-6 p-0 md:gap-10">
        {/* Header: Title + Button for Desktop only */}
        <div className="hidden items-center justify-between md:flex">
          <div className="space-y-1">
            <h1 className="text-4xl font-bold tracking-tight text-white">
              {t("title")}
            </h1>
            <p className="text-muted-foreground mt-3 hidden max-w-2xl text-lg md:block">
              {t("welcome")}
            </p>
          </div>

          {/* Button: Add New User for Desktop only */}
          <UserFormWrapper />
        </div>

        {/* Search + Filter */}
        <div className="flex gap-3 md:gap-4">
          <div className="group relative w-full">
            <Search className="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" />
            <Input
              className="bg-card border-border h-10 w-full rounded-lg border py-1 pr-12 pl-10 focus:outline-1"
              placeholder="Search users..."
            />
            <div className="absolute top-1/2 right-2 -translate-y-1/2">
              <Button
                variant="ghost"
                size="icon"
                className="hover:bg-muted text-muted-foreground size-8 transition-colors hover:text-white md:size-10"
              >
                <Filter className="size-4 md:size-5" />
                <span className="sr-only">Filters</span>
              </Button>
            </div>
          </div>
          {/* Button: Add New User for Mobile only */}
          <div className="md:hidden">
            <UserFormWrapper />
          </div>
        </div>
      </div>

      {/* --- For Mobile Phones --- */}
      <div className="flex flex-col gap-4 md:hidden">
        {tempUsers.map((user) => (
          <UserMobileCard
            key={user.id}
            name={user.name}
            email={user.email}
            role={user.role}
            joinedAt={user.joinedAt}
            status={user.status as "active" | "inactive"}
          />
        ))}
      </div>

      {/* Users List / Table */}
      <div className="bg-card border-border hidden overflow-hidden rounded-xl border shadow-sm md:block">
        <table className="w-full text-left">
          <thead className="bg-muted/50 border-border border-b">
            <tr>
              <th className="text-muted-foreground px-6 py-3 text-xs font-semibold tracking-wider uppercase">
                User
              </th>
              <th className="text-muted-foreground px-6 py-3 text-xs font-semibold tracking-wider uppercase">
                Role
              </th>
              <th className="text-muted-foreground px-6 py-3 text-xs font-semibold tracking-wider uppercase">
                Status
              </th>
              <th className="text-muted-foreground px-6 py-3 text-xs font-semibold tracking-wider uppercase">
                Joined
              </th>
              <th className="px-6 py-3"></th>
            </tr>
          </thead>
          <tbody className="divide-border divide-y">
            {/* Example Row */}
            {tempUsers.map((user) => (
              <tr
                key={user.id}
                className="hover:bg-muted/20 cursor-pointer transition-colors"
              >
                <td className="px-6 py-4">
                  <div className="flex items-center gap-3">
                    <div className="bg-primary/20 text-primary flex h-10 w-10 items-center justify-center rounded-full font-bold">
                      {user.name.charAt(0)}
                    </div>
                    <div>
                      <div className="text-foreground text-sm font-medium">
                        {user.name}
                      </div>
                      <div className="text-muted-foreground text-xs">
                        {user.email}
                      </div>
                    </div>
                  </div>
                </td>
                <td className="px-6 py-4">
                  <span className="text-muted-foreground text-sm">
                    {user.role}
                  </span>
                </td>
                <td className="px-6 py-4">
                  <span
                    className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
                      user.status === "active"
                        ? "bg-green-500/10 text-green-500"
                        : "bg-red-500/10 text-red-500"
                    }`}
                  >
                    {user.status}
                  </span>
                </td>
                <td className="text-muted-foreground px-6 py-4 text-sm">
                  {user.joinedAt}
                </td>
                <td className="px-6 py-4 text-right">
                  <button
                    title="More options"
                    className="hover:bg-muted rounded-full p-2 transition-colors"
                  >
                    <MoreVertical className="text-muted-foreground h-4 w-4" />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}