"use client";

import { useEffect, useState } from "react";

import type { VehicleSummary } from "@tracker/shared";

import type { AdminUserSummary } from "../../../lib/api";

export type UserAccessCardProps = {
  currentUserId: string;
  user: AdminUserSummary;
  vehicles: VehicleSummary[];
  isSaved: boolean;
  onSave: (
    userId: string,
    firstName: string,
    lastName: string,
    role: "admin" | "user",
    canEditVehicleInspection: boolean,
    canViewStats: boolean,
    vehicleIds: string[],
    password?: string,
  ) => void;
  onDelete: (userId: string, email: string) => void;
};

export function UserAccessCard({ currentUserId, user, vehicles, isSaved, onSave, onDelete }: UserAccessCardProps) {
  const [firstName, setFirstName] = useState(user.firstName);
  const [lastName, setLastName] = useState(user.lastName);
  const [role, setRole] = useState<"admin" | "user">(user.role);
  const [canEditVehicleInspection, setCanEditVehicleInspection] = useState(user.canEditVehicleInspection);
  const [canViewStats, setCanViewStats] = useState(user.canViewStats);
  const [vehicleIds, setVehicleIds] = useState<string[]>(user.vehicleIds);
  const [isPasswordEditorOpen, setIsPasswordEditorOpen] = useState(false);
  const [newPassword, setNewPassword] = useState("");
  const [confirmPassword, setConfirmPassword] = useState("");
  const userSyncKey = [
    user.id,
    user.firstName,
    user.lastName,
    user.role,
    user.canEditVehicleInspection ? "1" : "0",
    user.canViewStats ? "1" : "0",
    [...user.vehicleIds].sort().join(","),
  ].join("|");

  useEffect(() => {
    setFirstName(user.firstName);
    setLastName(user.lastName);
    setRole(user.role);
    setCanEditVehicleInspection(user.canEditVehicleInspection);
    setCanViewStats(user.canViewStats);
    setVehicleIds(user.vehicleIds);
    setIsPasswordEditorOpen(false);
    setNewPassword("");
    setConfirmPassword("");
  }, [userSyncKey]);

  const toggleVehicle = (vehicleId: string) => {
    setVehicleIds((current) =>
      current.includes(vehicleId)
        ? current.filter((currentId) => currentId !== vehicleId)
        : [...current, vehicleId],
    );
  };

  return (
    <div className="rounded-[1.4rem] border border-slate-200 bg-white/80 p-4">
      <div className="flex items-start justify-between gap-3">
        <div className="min-w-0">
          <div className="truncate text-sm font-semibold text-ink">{user.firstName} {user.lastName}</div>
          <div className="mt-1 truncate text-xs text-steel">{user.email}</div>
          <div
            className={`mt-1 text-xs transition-colors duration-300 ${
              isSaved ? "text-mint" : "text-steel"
            }`}
          >
            Utworzony: {new Date(user.createdAt).toLocaleDateString("pl-PL")}
          </div>
        </div>
        <select
          value={role}
          onChange={(event) => setRole(event.target.value as "admin" | "user")}
          className="h-9 rounded-2xl border border-slate-200 bg-white px-3 text-sm text-ink"
        >
          <option value="admin">Admin</option>
          <option value="user">User</option>
        </select>
      </div>
      <div className="mt-3 flex flex-wrap items-center justify-end gap-2">
        <label className="mr-auto inline-flex items-center gap-2 rounded-full border border-cyan-200 bg-cyan-50 px-3 py-1 text-[11px] font-semibold text-cyan-900">
          <input
            type="checkbox"
            checked={canEditVehicleInspection}
            onChange={(event) => setCanEditVehicleInspection(event.target.checked)}
            className="h-3.5 w-3.5 rounded border-cyan-300"
          />
          Przeglądy
        </label>
        <label className="inline-flex items-center gap-2 rounded-full border border-mint/30 bg-mint/10 px-3 py-1 text-[11px] font-semibold text-mint">
          <input
            type="checkbox"
            checked={canViewStats}
            onChange={(event) => setCanViewStats(event.target.checked)}
            className="h-3.5 w-3.5 rounded border-mint/40"
          />
          Stats
        </label>
        <button
          type="button"
          onClick={() => {
            setIsPasswordEditorOpen((current) => !current);
            setNewPassword("");
            setConfirmPassword("");
          }}
          className={`text-[11px] italic underline underline-offset-2 transition ${
            isPasswordEditorOpen
              ? "text-ink"
              : "text-steel hover:text-ink"
          }`}
          aria-label="Hasło"
          title="Hasło"
        >
          Hasło
        </button>
      </div>
      {isPasswordEditorOpen ? (
        <div className="mt-3 grid gap-2 sm:grid-cols-2">
          <input
            type="password"
            value={newPassword}
            onChange={(event) => setNewPassword(event.target.value)}
            className="h-9 w-full rounded-2xl border border-slate-200 bg-white px-3 text-sm text-ink"
            placeholder="Nowe hasło"
            minLength={8}
          />
          <input
            type="password"
            value={confirmPassword}
            onChange={(event) => setConfirmPassword(event.target.value)}
            className="h-9 w-full rounded-2xl border border-slate-200 bg-white px-3 text-sm text-ink"
            placeholder="Powtórz hasło"
            minLength={8}
          />
        </div>
      ) : null}
      <div className="mt-3 flex flex-wrap gap-2">
        {vehicles.map((vehicle) => {
          const isActive = vehicleIds.includes(vehicle.id);
          return (
            <button
              key={vehicle.id}
              type="button"
              onClick={() => toggleVehicle(vehicle.id)}
              className={`rounded-full border px-3 py-1 text-xs font-medium transition ${
                isActive
                  ? "border-slate-900 bg-slate-900 text-white"
                  : "border-slate-200 bg-white text-ink"
              }`}
            >
              {vehicle.name}
            </button>
          );
        })}
      </div>
      <div className="mt-3 flex justify-between gap-2">
        <button
          type="button"
          onClick={() => {
            const trimmedPassword = newPassword.trim();
            if (isPasswordEditorOpen) {
              if (!trimmedPassword) {
                window.alert("Wpisz nowe hasło");
                return;
              }

              if (trimmedPassword.length < 8) {
                window.alert("Hasło musi mieć co najmniej 8 znaków");
                return;
              }

              if (trimmedPassword !== confirmPassword.trim()) {
                window.alert("Hasła nie są takie same");
                return;
              }
            }

            onSave(
              user.id,
              firstName.trim(),
              lastName.trim(),
              role,
              canEditVehicleInspection,
              canViewStats,
              vehicleIds,
              isPasswordEditorOpen ? trimmedPassword : undefined,
            );
            setIsPasswordEditorOpen(false);
            setNewPassword("");
            setConfirmPassword("");
          }}
          className="rounded-2xl bg-ink px-4 py-2 text-sm font-semibold text-white"
        >
          Zapisz dostęp
        </button>
        <button
          type="button"
          onClick={() => onDelete(user.id, user.email)}
          disabled={user.id === currentUserId}
          className="rounded-2xl bg-coral px-4 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-40"
        >
          Usuń
        </button>
      </div>
    </div>
  );
}