import { useState, useEffect } from "react";
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
import { apiRequest } from "@/lib/queryClient";
import { useAuth } from "@/hooks/use-auth";
import { useToast } from "@/hooks/use-toast";
import { Button } from "@/components/ui/button";
import { DeleteConfirmationDialog } from "@/components/ui/deleteDialog";
import { KeyRound, Plus, Pencil, Trash2, Eye, EyeOff, ExternalLink } from "lucide-react";

type ShoppingVendor = {
  id: number;
  userId: number;
  vendorName: string;
  websiteUrl: string;
  loginUsername: string;
  loginPassword: string;
};

const QUERY_KEY = ["/api/shopping-vendors/"];

// ─── Modal ─────────────────────────────────────────────────────────────────

function VendorModal({
  userId,
  defaultValues,
  onClose,
}: {
  userId: number;
  defaultValues?: ShoppingVendor;
  onClose: () => void;
}) {
  const { toast } = useToast();
  const qc = useQueryClient();

  const [vendorName, setVendorName] = useState(defaultValues?.vendorName ?? "");
  const [websiteUrl, setWebsiteUrl] = useState(defaultValues?.websiteUrl ?? "");
  const [loginUsername, setLoginUsername] = useState(defaultValues?.loginUsername ?? "");
  const [loginPassword, setLoginPassword] = useState(defaultValues?.loginPassword ?? "");
  const [showPassword, setShowPassword] = useState(false);

  useEffect(() => {
    setVendorName(defaultValues?.vendorName ?? "");
    setWebsiteUrl(defaultValues?.websiteUrl ?? "");
    setLoginUsername(defaultValues?.loginUsername ?? "");
    setLoginPassword(defaultValues?.loginPassword ?? "");
  }, [defaultValues]);

  const mutation = useMutation({
    mutationFn: async () => {
      const payload = { vendorName: vendorName.trim(), websiteUrl: websiteUrl.trim(), loginUsername: loginUsername.trim(), loginPassword: loginPassword.trim(), userId };
      const url = defaultValues?.id ? `/api/shopping-vendors/${defaultValues.id}` : "/api/shopping-vendors/";
      const method = defaultValues?.id ? "PUT" : "POST";
      const res = await apiRequest(method, url, payload);
      if (!res.ok) {
        const err = await res.json().catch(() => null);
        throw new Error(err?.message || "Failed to save vendor");
      }
      return res.json();
    },
    onSuccess: () => {
      toast({ title: `Vendor ${defaultValues?.id ? "updated" : "added"} successfully.` });
      qc.invalidateQueries({ queryKey: QUERY_KEY });
      onClose();
    },
    onError: (err: any) => {
      toast({ title: "Error", description: err.message, variant: "destructive" });
    },
  });

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!vendorName || !websiteUrl || !loginUsername || !loginPassword) {
      toast({ title: "All fields are required.", variant: "destructive" });
      return;
    }
    mutation.mutate();
  };

  return (
    <div className="fixed inset-0 bg-black/50 flex justify-center items-center z-50">
      <div className="bg-white rounded-xl p-6 w-full max-w-md shadow-xl">
        <h2 className="text-lg font-semibold mb-5">
          {defaultValues?.id ? "Edit Vendor" : "Add Vendor"}
        </h2>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Vendor Name</label>
            <input
              type="text"
              placeholder="e.g. Net32"
              value={vendorName}
              onChange={(e) => setVendorName(e.target.value)}
              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Website URL</label>
            <input
              type="url"
              placeholder="https://www.net32.com"
              value={websiteUrl}
              onChange={(e) => setWebsiteUrl(e.target.value)}
              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Username / Email</label>
            <input
              type="text"
              placeholder="your@email.com"
              value={loginUsername}
              onChange={(e) => setLoginUsername(e.target.value)}
              className="w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500"
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
            <div className="relative">
              <input
                type={showPassword ? "text" : "password"}
                placeholder="••••••••"
                value={loginPassword}
                onChange={(e) => setLoginPassword(e.target.value)}
                className="w-full border rounded-lg px-3 py-2 pr-10 text-sm focus:outline-none focus:ring-2 focus:ring-cyan-500"
              />
              <button
                type="button"
                tabIndex={-1}
                onClick={() => setShowPassword((p) => !p)}
                className="absolute inset-y-0 right-3 flex items-center text-gray-400 hover:text-gray-600"
              >
                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
              </button>
            </div>
          </div>

          <div className="flex justify-end gap-3 pt-2">
            <button
              type="button"
              onClick={onClose}
              disabled={mutation.isPending}
              className="text-sm text-gray-500 hover:underline"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={mutation.isPending}
              className="bg-cyan-600 text-white text-sm px-5 py-2 rounded-lg hover:bg-cyan-700 disabled:opacity-50"
            >
              {mutation.isPending ? "Saving..." : defaultValues?.id ? "Update" : "Add Vendor"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

// ─── Page ──────────────────────────────────────────────────────────────────

export default function DentalShoppingLoginInfoPage() {
  const { user } = useAuth();
  const { toast } = useToast();
  const qc = useQueryClient();

  const [modalOpen, setModalOpen] = useState(false);
  const [editingVendor, setEditingVendor] = useState<ShoppingVendor | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<ShoppingVendor | null>(null);
  const [revealedIds, setRevealedIds] = useState<Set<number>>(new Set());

  const { data: vendors = [], isLoading } = useQuery<ShoppingVendor[]>({
    queryKey: QUERY_KEY,
    queryFn: async () => {
      const res = await apiRequest("GET", "/api/shopping-vendors/");
      if (!res.ok) throw new Error("Failed to fetch vendors");
      return res.json();
    },
  });

  const deleteMutation = useMutation({
    mutationFn: async (id: number) => {
      const res = await apiRequest("DELETE", `/api/shopping-vendors/${id}`);
      if (!res.ok) throw new Error("Failed to delete vendor");
    },
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: QUERY_KEY });
      setDeleteTarget(null);
      toast({ title: "Vendor deleted." });
    },
    onError: (err: any) => {
      toast({ title: "Error", description: err.message, variant: "destructive" });
    },
  });

  const toggleReveal = (id: number) => {
    setRevealedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  return (
    <div className="p-6 max-w-4xl mx-auto">
      {/* Header */}
      <div className="flex items-center justify-between mb-6">
        <div className="flex items-center gap-3">
          <div className="p-2 rounded-lg bg-cyan-50">
            <KeyRound className="h-6 w-6 text-cyan-600" />
          </div>
          <div>
            <h1 className="text-2xl font-semibold text-gray-800">Login Info</h1>
            <p className="text-sm text-gray-500">Manage login credentials for dental shopping websites</p>
          </div>
        </div>
        <Button
          onClick={() => { setEditingVendor(null); setModalOpen(true); }}
          className="bg-cyan-600 hover:bg-cyan-700 text-white"
        >
          <Plus className="h-4 w-4 mr-2" /> Add Vendor
        </Button>
      </div>

      {/* Table */}
      <div className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        {isLoading ? (
          <div className="py-16 text-center text-gray-400 text-sm">Loading...</div>
        ) : vendors.length === 0 ? (
          <div className="py-16 flex flex-col items-center gap-3 text-center">
            <KeyRound className="h-10 w-10 text-gray-300" />
            <p className="text-gray-400 text-sm">No vendors saved yet. Click "Add Vendor" to get started.</p>
          </div>
        ) : (
          <table className="min-w-full divide-y divide-gray-200">
            <thead className="bg-gray-50">
              <tr>
                <th className="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Vendor</th>
                <th className="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Website</th>
                <th className="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Username / Email</th>
                <th className="px-5 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider">Password</th>
                <th className="px-5 py-3" />
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-100">
              {vendors.map((v) => (
                <tr key={v.id} className="hover:bg-gray-50 transition-colors">
                  <td className="px-5 py-3 font-medium text-gray-800 text-sm">{v.vendorName}</td>
                  <td className="px-5 py-3 text-sm">
                    <a
                      href={v.websiteUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-cyan-600 hover:underline flex items-center gap-1"
                    >
                      {v.websiteUrl.replace(/^https?:\/\//, "")}
                      <ExternalLink className="h-3 w-3 flex-shrink-0" />
                    </a>
                  </td>
                  <td className="px-5 py-3 text-sm text-gray-600">{v.loginUsername}</td>
                  <td className="px-5 py-3 text-sm text-gray-600">
                    <div className="flex items-center gap-2">
                      <span className="font-mono">
                        {revealedIds.has(v.id) ? v.loginPassword : "••••••••"}
                      </span>
                      <button
                        onClick={() => toggleReveal(v.id)}
                        className="text-gray-400 hover:text-gray-600"
                        title={revealedIds.has(v.id) ? "Hide password" : "Show password"}
                      >
                        {revealedIds.has(v.id) ? <EyeOff className="h-3.5 w-3.5" /> : <Eye className="h-3.5 w-3.5" />}
                      </button>
                    </div>
                  </td>
                  <td className="px-5 py-3 text-right">
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => { setEditingVendor(v); setModalOpen(true); }}
                    >
                      <Pencil className="h-4 w-4 text-gray-500" />
                    </Button>
                    <Button
                      variant="ghost"
                      size="sm"
                      onClick={() => setDeleteTarget(v)}
                    >
                      <Trash2 className="h-4 w-4 text-red-500" />
                    </Button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>

      {/* Add/Edit Modal */}
      {modalOpen && user?.id != null && (
        <VendorModal
          userId={user.id as number}
          defaultValues={editingVendor ?? undefined}
          onClose={() => { setModalOpen(false); setEditingVendor(null); }}
        />
      )}

      {/* Delete Confirm */}
      <DeleteConfirmationDialog
        isOpen={!!deleteTarget}
        onConfirm={() => deleteTarget && deleteMutation.mutate(deleteTarget.id)}
        onCancel={() => setDeleteTarget(null)}
        entityName={deleteTarget?.vendorName}
      />
    </div>
  );
}
