"use client";

import { Search, ChevronDown, ListFilter } from "lucide-react";

export default function UsersPage() {
  return (
    <div
      style={{
        padding: "32px 48px",
        fontFamily: '"Outfit", "Inter", sans-serif',
        color: "#18181b",
        maxWidth: 900,
      }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "flex-start",
          marginBottom: 24,
        }}
      >
        <div>
          <h1
            style={{ fontSize: "1.5rem", fontWeight: 600, margin: "0 0 4px 0" }}
          >
            Users
          </h1>
          <p style={{ fontSize: "0.9rem", color: "#71717a", margin: 0 }}>
            Manage the app's users and their roles
          </p>
        </div>
        <div style={{ display: "flex", gap: 12 }}>
          <button
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              width: 36,
              height: 36,
              background: "#fff",
              border: "1px solid #e4e4e7",
              borderRadius: 8,
              cursor: "pointer",
            }}
          >
            <ListFilter size={16} color="#18181b" />
          </button>
          <button
            style={{
              background: "#18181b",
              color: "#fff",
              border: "none",
              borderRadius: 8,
              padding: "0 16px",
              fontSize: "0.85rem",
              fontWeight: 500,
              cursor: "pointer",
              height: 36,
            }}
          >
            Invite User
          </button>
        </div>
      </div>

      <div style={{ display: "flex", gap: 8, marginBottom: 24 }}>
        <button
          style={{
            background: "#fff",
            border: "1px solid #e4e4e7",
            borderRadius: 8,
            padding: "8px 48px",
            fontSize: "0.85rem",
            fontWeight: 500,
            cursor: "pointer",
            boxShadow: "0 1px 2px rgba(0,0,0,0.05)",
          }}
        >
          Users
        </button>
        <button
          style={{
            background: "#f4f4f5",
            border: "none",
            color: "#71717a",
            borderRadius: 8,
            padding: "8px 48px",
            fontSize: "0.85rem",
            fontWeight: 500,
            cursor: "pointer",
          }}
        >
          Pending requests
        </button>
      </div>

      <div
        style={{
          background: "#fff",
          border: "1px solid #e4e4e7",
          borderRadius: 12,
          overflow: "hidden",
        }}
      >
        <div
          style={{
            padding: "16px",
            borderBottom: "1px solid #e4e4e7",
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
          }}
        >
          <h2 style={{ fontSize: "1rem", fontWeight: 600, margin: 0 }}>
            Users
          </h2>
          <div style={{ display: "flex", gap: 12 }}>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                gap: 8,
                background: "#fff",
                border: "1px solid #e4e4e7",
                borderRadius: 6,
                padding: "6px 12px",
                width: 240,
              }}
            >
              <Search size={14} color="#a1a1aa" />
              <input
                type="text"
                placeholder="Search by Email or Name"
                style={{
                  border: "none",
                  outline: "none",
                  background: "transparent",
                  fontSize: "0.8rem",
                  width: "100%",
                }}
              />
            </div>
            <button
              style={{
                display: "flex",
                alignItems: "center",
                gap: 6,
                background: "#fff",
                border: "1px solid #e4e4e7",
                borderRadius: 6,
                padding: "6px 12px",
                fontSize: "0.8rem",
                fontWeight: 500,
                cursor: "pointer",
              }}
            >
              all roles <ChevronDown size={14} />
            </button>
          </div>
        </div>
        <table
          style={{
            width: "100%",
            borderCollapse: "collapse",
            textAlign: "left",
            fontSize: "0.85rem",
          }}
        >
          <thead>
            <tr
              style={{
                background: "#fafafa",
                borderBottom: "1px solid #e4e4e7",
              }}
            >
              <th
                style={{
                  padding: "12px 16px",
                  fontWeight: 500,
                  color: "#71717a",
                  width: "40%",
                }}
              >
                Name
              </th>
              <th
                style={{
                  padding: "12px 16px",
                  fontWeight: 500,
                  color: "#71717a",
                  width: "20%",
                }}
              >
                Role
              </th>
              <th
                style={{
                  padding: "12px 16px",
                  fontWeight: 500,
                  color: "#71717a",
                  width: "40%",
                }}
              >
                Email
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td
                style={{ padding: "16px", borderBottom: "1px solid #e4e4e7" }}
              >
                <div style={{ fontWeight: 500, color: "#18181b" }}>
                  Mark Henderson
                </div>
                <div
                  style={{ color: "#71717a", fontSize: "0.8rem", marginTop: 2 }}
                >
                  Owner
                </div>
              </td>
              <td
                style={{
                  padding: "16px",
                  borderBottom: "1px solid #e4e4e7",
                  fontWeight: 500,
                }}
              >
                admin
              </td>
              <td
                style={{
                  padding: "16px",
                  borderBottom: "1px solid #e4e4e7",
                  color: "#18181b",
                }}
              >
                markhenderson1977@gmail.com
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  );
}