import { useState } from "react";
import { Link } from "react-router";
import { UserPlus, Eye } from "lucide-react";
import { ProtectedRoute } from "~/components/protected-route";
import { Header } from "~/components/header";
import { Button } from "~/components/ui/button/button";
import { Input } from "~/components/ui/input/input";
import { Label } from "~/components/ui/label/label";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "~/components/ui/table/table";
import { mockUsers, type VPNUser } from "~/data/users";
import styles from "./users.module.css";

export default function Users() {
  const [users, setUsers] = useState<VPNUser[]>(mockUsers);
  const [showForm, setShowForm] = useState(false);
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    server: "vpn-us-east-01.company.com",
    protocol: "OpenVPN",
  });
  const [successMessage, setSuccessMessage] = useState("");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();

    const newUser: VPNUser = {
      id: String(users.length + 1),
      name: formData.name,
      email: formData.email,
      status: "active",
      createdAt: new Date().toISOString().split("T")[0],
      lastActive: new Date().toISOString().split("T")[0],
      vpnConfig: {
        username: formData.email.split("@")[0],
        server: formData.server,
        protocol: formData.protocol,
        port: formData.protocol === "OpenVPN" ? 1194 : 51820,
        configKey: generateConfigKey(),
      },
    };

    setUsers([...users, newUser]);
    setFormData({ name: "", email: "", server: "vpn-us-east-01.company.com", protocol: "OpenVPN" });
    setShowForm(false);
    setSuccessMessage(`کاربر "${newUser.name}" با موفقیت با دسترسی VPN ایجاد شد.`);
    setTimeout(() => setSuccessMessage(""), 5000);
  };

  const generateConfigKey = () => {
    const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    return Array.from({ length: 20 }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
  };

  return (
    <ProtectedRoute>
      <div className={styles.container}>
        <Header />
        <main className={styles.content}>
          <div className={styles.pageHeader}>
            <div className={styles.headerContent}>
              <h1 className={styles.pageTitle}>مدیریت کاربران</h1>
              <p className={styles.pageDescription}>مدیریت حساب‌های کاربری VPN و اطلاعات دسترسی</p>
            </div>
            <Button onClick={() => setShowForm(!showForm)}>
              <UserPlus style={{ width: "16px", height: "16px", marginRight: "var(--space-2)" }} />
              {showForm ? "لغو" : "افزودن کاربر جدید"}
            </Button>
          </div>

          {successMessage && <div className={styles.success}>{successMessage}</div>}

          {showForm && (
            <div className={styles.addUserSection}>
              <h2 className={styles.sectionTitle}>ایجاد کاربر VPN جدید</h2>
              <form onSubmit={handleSubmit} className={styles.form}>
                <div className={styles.formGroup}>
                  <Label htmlFor="name" className={styles.label}>
                    نام کامل
                  </Label>
                  <Input
                    id="name"
                    value={formData.name}
                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                    placeholder="علی احمدی"
                    required
                  />
                </div>

                <div className={styles.formGroup}>
                  <Label htmlFor="email" className={styles.label}>
                    آدرس ایمیل
                  </Label>
                  <Input
                    id="email"
                    type="email"
                    value={formData.email}
                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                    placeholder="ali.ahmadi@company.com"
                    required
                  />
                </div>

                <div className={styles.formGroup}>
                  <Label htmlFor="server" className={styles.label}>
                    سرور VPN
                  </Label>
                  <select
                    id="server"
                    value={formData.server}
                    onChange={(e) => setFormData({ ...formData, server: e.target.value })}
                    style={{
                      padding: "var(--space-2) var(--space-3)",
                      borderRadius: "var(--radius-2)",
                      border: "1px solid var(--color-neutral-7)",
                      background: "var(--color-neutral-1)",
                      color: "var(--color-neutral-12)",
                      fontSize: "var(--font-size-1)",
                    }}
                  >
                    <option value="vpn-us-east-01.company.com">آمریکا شرقی</option>
                    <option value="vpn-us-west-01.company.com">آمریکا غربی</option>
                    <option value="vpn-eu-west-01.company.com">اروپا غربی</option>
                    <option value="vpn-asia-01.company.com">آسیا</option>
                  </select>
                </div>

                <div className={styles.formGroup}>
                  <Label htmlFor="protocol" className={styles.label}>
                    پروتکل
                  </Label>
                  <select
                    id="protocol"
                    value={formData.protocol}
                    onChange={(e) => setFormData({ ...formData, protocol: e.target.value })}
                    style={{
                      padding: "var(--space-2) var(--space-3)",
                      borderRadius: "var(--radius-2)",
                      border: "1px solid var(--color-neutral-7)",
                      background: "var(--color-neutral-1)",
                      color: "var(--color-neutral-12)",
                      fontSize: "var(--font-size-1)",
                    }}
                  >
                    <option value="OpenVPN">OpenVPN</option>
                    <option value="WireGuard">WireGuard</option>
                  </select>
                </div>

                <div className={styles.formActions}>
                  <Button type="submit">ایجاد کاربر</Button>
                  <Button type="button" variant="outline" onClick={() => setShowForm(false)}>
                    لغو
                  </Button>
                </div>
              </form>
            </div>
          )}

          <div className={styles.userListSection}>
            <div className={styles.sectionHeader}>
              <h2 className={styles.sectionTitle}>همه کاربران ({users.length})</h2>
            </div>
            <div className={styles.tableWrapper}>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>نام</TableHead>
                    <TableHead>ایمیل</TableHead>
                    <TableHead>وضعیت</TableHead>
                    <TableHead>سرور</TableHead>
                    <TableHead>پروتکل</TableHead>
                    <TableHead>تاریخ ایجاد</TableHead>
                    <TableHead>آخرین فعالیت</TableHead>
                    <TableHead>عملیات</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {users.map((user) => (
                    <TableRow key={user.id}>
                      <TableCell style={{ fontWeight: 500 }}>{user.name}</TableCell>
                      <TableCell>{user.email}</TableCell>
                      <TableCell>
                        <span className={`${styles.statusBadge} ${styles[user.status]}`}>
                          <span className={`${styles.statusDot} ${styles[user.status]}`} />
                          {user.status === "active" ? "فعال" : "غیرفعال"}
                        </span>
                      </TableCell>
                      <TableCell>{user.vpnConfig.server.split(".")[0]}</TableCell>
                      <TableCell>{user.vpnConfig.protocol}</TableCell>
                      <TableCell>{user.createdAt}</TableCell>
                      <TableCell>{user.lastActive}</TableCell>
                      <TableCell>
                        <div className={styles.actions}>
                          <Link to={`/users/${user.id}`}>
                            <Button variant="outline" size="sm" className={styles.viewButton}>
                              <Eye className={styles.viewIcon} />
                              مشاهده
                            </Button>
                          </Link>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>
        </main>
      </div>
    </ProtectedRoute>
  );
}