"use client";

import { useState, useEffect, useCallback } from "react";
import { useSession } from "next-auth/react";
import { useTranslations } from "next-intl";
import { Building2, Plus, Search, MapPin, GitBranch, Users, ChevronRight, ToggleLeft, ToggleRight, Pencil, Trash2 } from "lucide-react";
import { Link } from "@/i18n/navigation";
import BusinessFormModal from "@/components/businesses/BusinessFormModal";
import BusinessImpersonateModal from "@/components/businesses/BusinessImpersonateModal";
import ConfirmModal from "@/components/ui/ConfirmModal";
import Button from "@/components/ui/Button";
import { Tooltip } from "@/components/ui/Tooltip";

interface BusinessCount {
  franchises: number;
  locations: number;
  members: number;
}

interface Business {
  id: string;
  name: string;
  slug: string;
  description: string | null;
  logo: string | null;
  email: string | null;
  phone: string | null;
  address: string | null;
  isActive: boolean;
  createdAt: string;
  _count: BusinessCount;
}

interface BusinessesClientProps {
  canCreate: boolean;
  canUpdate: boolean;
  canDelete: boolean;
  canImpersonate: boolean;
}

export default function BusinessesClient({ canCreate, canUpdate, canDelete, canImpersonate }: BusinessesClientProps) {
  const t = useTranslations("businesses");
  const tc = useTranslations("common");
  const { data: session } = useSession();

  const [businesses, setBusinesses] = useState<Business[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [search, setSearch] = useState("");
  const [loading, setLoading] = useState(true);
  const [modalOpen, setModalOpen] = useState(false);
  const [editingBusiness, setEditingBusiness] = useState<Business | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<Business | null>(null);
  const [deleting, setDeleting] = useState(false);
  const [impersonateTarget, setImpersonateTarget] = useState<Business | null>(null);

  const activeBusinessId = (session?.user as { businessContext?: { id: string } } | undefined)
    ?.businessContext?.id;

  const canImpersonateBusiness = useCallback(
    (business: Business) =>
      canImpersonate &&
      business.isActive &&
      activeBusinessId !== business.id,
    [canImpersonate, activeBusinessId]
  );

  const limit = 20;

  const fetchBusinesses = useCallback(async () => {
    setLoading(true);
    try {
      const params = new URLSearchParams({ page: String(page), limit: String(limit), search });
      const res = await fetch(`/api/businesses?${params}`);
      const text = await res.text();
      let data: { businesses?: Business[]; total?: number; error?: string } = {};
      try {
        data = text ? JSON.parse(text) : {};
      } catch {
        throw new Error("Invalid response from server");
      }
      if (!res.ok) {
        throw new Error(typeof data.error === "string" ? data.error : "Failed to load businesses");
      }
      setBusinesses(data.businesses ?? []);
      setTotal(data.total ?? 0);
    } catch (err) {
      setBusinesses([]);
      setTotal(0);
      console.error("Failed to fetch businesses:", err);
    } finally {
      setLoading(false);
    }
  }, [page, search]);

  useEffect(() => {
    fetchBusinesses();
  }, [fetchBusinesses]);

  useEffect(() => {
    setPage(1);
  }, [search]);

  const handleSave = () => {
    setModalOpen(false);
    setEditingBusiness(null);
    fetchBusinesses();
  };

  const handleDelete = async () => {
    if (!deleteTarget) return;
    setDeleting(true);
    try {
      await fetch(`/api/businesses/${deleteTarget.id}`, { method: "DELETE" });
      setDeleteTarget(null);
      fetchBusinesses();
    } finally {
      setDeleting(false);
    }
  };

  const openCreate = () => {
    setEditingBusiness(null);
    setModalOpen(true);
  };

  const openEdit = (b: Business) => {
    setEditingBusiness(b);
    setModalOpen(true);
  };

  const totalPages = Math.ceil(total / limit);

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-wrap items-start justify-between gap-4">
        <div>
          <h1 className="text-2xl font-semibold text-[var(--text)]">{t("title")}</h1>
          <p className="mt-1 text-sm text-[var(--text-muted)]">{t("total", { count: total })}</p>
        </div>
        {canCreate && (
          <button
            type="button"
            onClick={openCreate}
            className="flex items-center gap-2 rounded-lg bg-[var(--accent)] px-4 py-2 text-sm font-medium text-white transition-opacity hover:opacity-90"
          >
            <Plus className="h-4 w-4" />
            {t("addBusiness")}
          </button>
        )}
      </div>

      {/* Search */}
      <div className="relative">
        <Search className="absolute start-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--text-faint)]" />
        <input
          placeholder={t("searchPlaceholder")}
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="w-full rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)] py-2.5 ps-9 pe-3.5 text-sm text-[var(--text)] placeholder:text-[var(--text-faint)] focus:border-[var(--accent)]/60 focus:outline-none focus:ring-2 focus:ring-[var(--accent)]/40"
        />
      </div>

      {/* List */}
      {loading ? (
        <div className="py-16 text-center text-[var(--text-muted)]">{tc("loading")}</div>
      ) : businesses.length === 0 ? (
        <div className="rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] py-16 text-center">
          <Building2 className="mx-auto mb-3 h-10 w-10 text-[var(--text-faint)]" />
          <p className="font-medium text-[var(--text)]">{t("noBusinesses")}</p>
          <p className="mt-1 text-sm text-[var(--text-muted)]">{t("noBusinessesHint")}</p>
        </div>
      ) : (
        <div className="space-y-3">
          {businesses.map((b) => (
            <div
              key={b.id}
              className="flex items-center gap-4 rounded-xl border border-[var(--border)] bg-[var(--bg-elevated)] p-4 transition-colors hover:bg-[var(--bg-hover)]"
            >
              {/* Avatar */}
              <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg bg-[var(--accent)]/10 text-[var(--accent)]">
                {b.logo ? (
                  <img src={b.logo} alt={b.name} className="h-full w-full rounded-lg object-cover" />
                ) : (
                  <Building2 className="h-5 w-5" />
                )}
              </div>

              {/* Info */}
              <div className="min-w-0 flex-1">
                <div className="flex flex-wrap items-center gap-2">
                  <span className="font-medium text-[var(--text)]">{b.name}</span>
                  <span className="rounded-full bg-[var(--bg)] px-2 py-0.5 text-[10px] font-medium text-[var(--text-muted)] ring-1 ring-[var(--border)]">
                    /{b.slug}
                  </span>
                  <span
                    className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold ${
                      b.isActive
                        ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
                        : "bg-[var(--bg)] text-[var(--text-muted)] ring-1 ring-[var(--border)]"
                    }`}
                  >
                    {b.isActive ? (
                      <ToggleRight className="h-3 w-3" />
                    ) : (
                      <ToggleLeft className="h-3 w-3" />
                    )}
                    {b.isActive ? tc("active") : tc("inactive")}
                  </span>
                </div>
                {b.description && (
                  <p className="mt-0.5 truncate text-xs text-[var(--text-muted)]">{b.description}</p>
                )}
                <div className="mt-1.5 flex flex-wrap gap-3 text-[11px] text-[var(--text-faint)]">
                  <span className="flex items-center gap-1">
                    <GitBranch className="h-3 w-3" />
                    {t("franchisesCount", { count: b._count.franchises })}
                  </span>
                  <span className="flex items-center gap-1">
                    <MapPin className="h-3 w-3" />
                    {t("locationsCount", { count: b._count.locations })}
                  </span>
                  <span className="flex items-center gap-1">
                    <Users className="h-3 w-3" />
                    {t("membersCount", { count: b._count.members })}
                  </span>
                </div>
              </div>

              {/* Actions */}
              <div className="flex shrink-0 items-center gap-1">
                {canImpersonateBusiness(b) && (
                  <Tooltip content={t("impersonateHint")} label={t("impersonate")} placement="top">
                    <span className="inline-flex">
                      <Button
                        variant="ghost"
                        size="sm"
                        onClick={() => setImpersonateTarget(b)}
                        aria-label={t("impersonate")}
                        className="text-sky-400 hover:bg-sky-500/10 hover:text-sky-300"
                      >
                        <Building2 className="h-3.5 w-3.5" />
                      </Button>
                    </span>
                  </Tooltip>
                )}
                {canUpdate && (
                  <button
                    type="button"
                    onClick={() => openEdit(b)}
                    className="rounded-lg p-2 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text)]"
                    title={tc("edit")}
                  >
                    <Pencil className="h-4 w-4" />
                  </button>
                )}
                {canDelete && (
                  <button
                    type="button"
                    onClick={() => setDeleteTarget(b)}
                    className="rounded-lg p-2 text-[var(--text-muted)] transition-colors hover:bg-red-500/10 hover:text-red-500"
                    title={tc("delete")}
                  >
                    <Trash2 className="h-4 w-4" />
                  </button>
                )}
                <Link
                  href={`/dashboard/businesses/${b.id}`}
                  className="rounded-lg p-2 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text)]"
                  title={t("viewDetail")}
                >
                  <ChevronRight className="h-4 w-4" />
                </Link>
              </div>
            </div>
          ))}
        </div>
      )}

      {/* Pagination */}
      {totalPages > 1 && (
        <div className="flex items-center justify-between text-sm">
          <span className="text-[var(--text-muted)]">
            {tc("page")} {page} {tc("of")} {totalPages}
          </span>
          <div className="flex gap-2">
            <button
              type="button"
              onClick={() => setPage((p) => Math.max(1, p - 1))}
              disabled={page === 1}
              className="rounded-lg border border-[var(--border)] px-3 py-1.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] disabled:opacity-40"
            >
              {tc("previous")}
            </button>
            <button
              type="button"
              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
              disabled={page === totalPages}
              className="rounded-lg border border-[var(--border)] px-3 py-1.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] disabled:opacity-40"
            >
              {tc("next")}
            </button>
          </div>
        </div>
      )}

      <ConfirmModal
        open={Boolean(deleteTarget)}
        title={tc("confirmTitle")}
        description={
          deleteTarget
            ? `${t("deleteConfirm")} (${deleteTarget.name})`
            : tc("confirmDelete")
        }
        loading={deleting}
        onConfirm={handleDelete}
        onCancel={() => !deleting && setDeleteTarget(null)}
      />

      {impersonateTarget && (
        <BusinessImpersonateModal
          business={impersonateTarget}
          open
          onClose={() => setImpersonateTarget(null)}
        />
      )}

      {/* Form Modal */}
      {modalOpen && (
        <BusinessFormModal
          business={editingBusiness}
          onSave={handleSave}
          onClose={() => { setModalOpen(false); setEditingBusiness(null); }}
        />
      )}
    </div>
  );
}