"use client";

import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";

export default function UsersPage() {
  const [users, setUsers] = useState<any[]>([]);
  const [session, setSession] = useState<any>(null);
  
  const [showAddModal, setShowAddModal] = useState(false);
  const [newUsername, setNewUsername] = useState("");
  const [newPassword, setNewPassword] = useState("");
  const [newFullName, setNewFullName] = useState("");
  const [newRole, setNewRole] = useState("sale");

  const [loading, setLoading] = useState(true);

  const router = useRouter();

  const fetchUsers = async () => {
    try {
      const res = await fetch("/api/users");
      const data = await res.json();
      if (res.ok) setUsers(data.users);
    } catch (err) {
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    const init = async () => {
      const resMe = await fetch("/api/auth/me");
      if (resMe.ok) {
        const dataMe = await resMe.json();
        setSession(dataMe.user);
        if (dataMe.user.role === "sale") {
          router.push("/leads");
          return;
        }
        fetchUsers();
      } else {
        router.push("/login");
      }
    };
    init();
  }, [router]);

  const handleCreateUser = async (e: React.FormEvent) => {
    e.preventDefault();
    try {
      const res = await fetch("/api/users", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          username: newUsername,
          password: newPassword,
          fullName: newFullName,
          role: newRole
        })
      });
      const data = await res.json();
      if (res.ok) {
        setShowAddModal(false);
        setNewUsername("");
        setNewPassword("");
        setNewFullName("");
        fetchUsers();
      } else {
        alert(data.error);
      }
    } catch (err) {
      alert("Hata oluştu");
    }
  };

  const handleResetPassword = async (userId: number, username: string) => {
    const newPass = prompt(`Yeni şifreyi giriniz (${username}):`);
    if (!newPass || newPass.length < 6) {
      if (newPass) alert("Şifre en az 6 karakter olmalı");
      return;
    }
    
    try {
      const res = await fetch(`/api/users/${userId}/reset`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ newPassword: newPass })
      });
      if (res.ok) {
        alert("Şifre sıfırlandı!");
      } else {
        const data = await res.json();
        alert(data.error || "Sıfırlama başarısız");
      }
    } catch (err) {
      alert("Hata oluştu");
    }
  };

  if (!session || loading) return <div>Yükleniyor...</div>;

  return (
    <div className="max-w-4xl mx-auto">
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold">Kullanıcı Yönetimi</h1>
        <button 
          onClick={() => setShowAddModal(true)}
          className="bg-blue-600 hover:bg-blue-500 text-white px-4 py-2 rounded-md text-sm font-medium"
        >
          + Yeni Kullanıcı
        </button>
      </div>

      <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-700">
        <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
          <thead className="bg-gray-50 dark:bg-gray-900/50">
            <tr>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">İsim Soyisim</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Kullanıcı Adı</th>
              <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Rol</th>
              <th className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">İşlemler</th>
            </tr>
          </thead>
          <tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
            {users.map(u => (
              <tr key={u.id} className="hover:bg-gray-50 dark:hover:bg-gray-700/50">
                <td className="px-6 py-4 whitespace-nowrap font-medium text-gray-900 dark:text-white">
                  {u.full_name}
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-gray-500 dark:text-gray-400">
                  {u.username}
                </td>
                <td className="px-6 py-4 whitespace-nowrap">
                  <span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full 
                    ${u.role === 'admin' ? 'bg-purple-100 text-purple-800' : u.role === 'manager' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'}`}>
                    {u.role.toUpperCase()}
                  </span>
                </td>
                <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                  {session.role === 'admin' && (
                    <button 
                      onClick={() => handleResetPassword(u.id, u.username)}
                      className="text-orange-600 hover:text-orange-900 px-2"
                    >
                      Şifre Sıfırla
                    </button>
                  )}
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      {showAddModal && (
        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
          <div className="bg-white dark:bg-gray-800 p-6 rounded-lg w-full max-w-md">
            <h2 className="text-xl font-bold mb-4">Yeni Kullanıcı Ekle</h2>
            <form onSubmit={handleCreateUser}>
              <div className="mb-3">
                <label className="block text-sm font-medium mb-1">İsim Soyisim</label>
                <input required type="text" className="w-full border p-2 rounded-md dark:bg-gray-700 dark:border-gray-600" value={newFullName} onChange={(e) => setNewFullName(e.target.value)} />
              </div>
              <div className="mb-3">
                <label className="block text-sm font-medium mb-1">Kullanıcı Adı</label>
                <input required type="text" className="w-full border p-2 rounded-md dark:bg-gray-700 dark:border-gray-600" value={newUsername} onChange={(e) => setNewUsername(e.target.value)} />
              </div>
              <div className="mb-3">
                <label className="block text-sm font-medium mb-1">Şifre</label>
                <input required type="password" minLength={6} className="w-full border p-2 rounded-md dark:bg-gray-700 dark:border-gray-600" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} />
              </div>
              <div className="mb-4">
                <label className="block text-sm font-medium mb-1">Rol</label>
                <select className="w-full border p-2 rounded-md dark:bg-gray-700 dark:border-gray-600" value={newRole} onChange={(e) => setNewRole(e.target.value)}>
                  <option value="sale">Sale</option>
                  {session.role === 'admin' && <option value="manager">Manager</option>}
                  {session.role === 'admin' && <option value="admin">Admin</option>}
                </select>
                {session.role === 'manager' && <p className="text-xs text-gray-500 mt-1">Sadece Sale ekleyebilirsiniz.</p>}
              </div>
              
              <div className="flex justify-end gap-2">
                <button type="button" onClick={() => setShowAddModal(false)} className="px-4 py-2 border rounded-md">İptal</button>
                <button type="submit" className="px-4 py-2 bg-blue-600 text-white rounded-md">Kaydet</button>
              </div>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}