import { useEffect, useMemo, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import {
  ArrowLeft,
  ArrowRight,
  Banknote,
  BriefcaseBusiness,
  Edit2,
  FolderKanban,
  Tag,
  Trash2,
  Users,
} from 'lucide-react';

import { getClients } from '../api/clients';
import { getProjects } from '../api/projects';
import { getWorkspaceUserRates, type WorkspaceUserRate } from '../api/rates';
import { getTags } from '../api/tags';
import {
  deleteWorkspace,
  fetchWorkspaceMemberships,
  getWorkspace,
  type Workspace,
  type WorkspaceMembership,
} from '../api/workspaces';
import { useAppContext } from '../context/AppContext';
import { useWorkspace } from '../context/WorkspaceContext';
import { useTranslation } from '../hooks/useTranslation';
import {
  CLIENTS_VIEW,
  PROJECTS_VIEW,
  TAGS_VIEW,
  WORKSPACE_DELETE,
  WORKSPACE_EDIT,
  WORKSPACE_MEMBERS_VIEW,
  WORKSPACE_VIEW,
  canWorkspace,
} from '../lib/permissions';

type ResourceCounts = {
  projects: number;
  clients: number;
  tags: number;
};

const roleBadgeStyles: Record<string, string> = {
  owner: 'bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300',
  admin: 'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300',
  member: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300',
  guest: 'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300',
};

export default function WorkspaceDetail() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const { t, lang } = useTranslation();
  const { user } = useAppContext();
  const { setActiveWorkspace } = useWorkspace();

  const [workspace, setWorkspace] = useState<Workspace | null>(null);
  const [members, setMembers] = useState<WorkspaceMembership[]>([]);
  const [rates, setRates] = useState<WorkspaceUserRate[]>([]);
  const [counts, setCounts] = useState<ResourceCounts>({ projects: 0, clients: 0, tags: 0 });
  const [isLoading, setIsLoading] = useState(true);

  const isRtl = lang === 'fa';
  const BackIcon = isRtl ? ArrowRight : ArrowLeft;

  useEffect(() => {
    if (!id) return;
    void loadWorkspace();
  }, [id]);

  const loadWorkspace = async () => {
    try {
      const data = await getWorkspace(id!);
      setWorkspace(data);

      const canViewMembers = canWorkspace(data.my_role, WORKSPACE_VIEW);
      const canViewClients = canWorkspace(data.my_role, CLIENTS_VIEW);
      const canViewProjects = canWorkspace(data.my_role, PROJECTS_VIEW);
      const canViewTags = canWorkspace(data.my_role, TAGS_VIEW);
      const canViewRates = canWorkspace(data.my_role, WORKSPACE_EDIT);

      const tasks: Promise<void>[] = [];

      if (canViewMembers) {
        tasks.push(
          fetchWorkspaceMemberships({ workspace: id!, limit: 200, offset: 0 }).then((response) => {
            setMembers(response.results || []);
          }),
        );
      } else {
        setMembers([]);
      }

      if (canViewRates) {
        tasks.push(
          getWorkspaceUserRates(id!).then((response) => {
            setRates(response.results || []);
          }),
        );
      } else {
        setRates([]);
      }

      tasks.push(
        Promise.all([
          canViewProjects ? getProjects(id!, { limit: 1, offset: 0, is_archived: false }) : Promise.resolve({ count: 0 }),
          canViewClients ? getClients(id!, '', '', 1, 0) : Promise.resolve({ count: 0 }),
          canViewTags ? getTags(id!, { limit: 1, offset: 0 }) : Promise.resolve({ count: 0, results: [] }),
        ]).then(([projectsData, clientsData, tagsData]) => {
          setCounts({
            projects: projectsData.count || 0,
            clients: clientsData.count || 0,
            tags: tagsData.count || 0,
          });
        }),
      );

      await Promise.all(tasks);
    } catch (error) {
      console.error(error);
      navigate('/workspaces');
    } finally {
      setIsLoading(false);
    }
  };

  const handleDelete = async () => {
    if (!window.confirm(t.workspace?.confirmDelete) || !id) return;
    try {
      await deleteWorkspace(id);
      navigate('/workspaces');
    } catch (error) {
      console.error(error);
    }
  };

  const activeMembers = members.filter((member) => member.is_active);
  const roleCounts = useMemo(
    () =>
      activeMembers.reduce(
        (acc, member) => {
          acc[member.role] += 1;
          return acc;
        },
        { owner: 0, admin: 0, member: 0, guest: 0 },
      ),
    [activeMembers],
  );

  const memberRateMap = useMemo(
    () => new Map(rates.map((rate) => [rate.user, rate])),
    [rates],
  );

  const displayNumber = (value: number) =>
    new Intl.NumberFormat(lang === 'fa' ? 'fa-IR' : 'en-US').format(value);

  const formatDate = (value?: string) => {
    if (!value) return '-';
    try {
      return new Intl.DateTimeFormat(lang === 'fa' ? 'fa-IR' : 'en-US', {
        year: 'numeric',
        month: 'short',
        day: 'numeric',
      }).format(new Date(value));
    } catch {
      return value;
    }
  };

  const getMemberName = (member: WorkspaceMembership) => {
    const firstName = member.user?.first_name?.trim() || '';
    const lastName = member.user?.last_name?.trim() || '';
    const fullName = `${firstName} ${lastName}`.trim();
    return fullName || member.user?.email || t.workspace?.unknownMember || 'Unknown member';
  };

  const getMemberContact = (member: WorkspaceMembership) => {
    return member.user?.mobile || member.user?.email || '-';
  };

  const getMemberInitials = (member: WorkspaceMembership) => {
    const firstName = member.user?.first_name?.trim()?.charAt(0) || '';
    const lastName = member.user?.last_name?.trim()?.charAt(0) || '';
    return `${firstName}${lastName}`.trim().toUpperCase() || getMemberName(member).charAt(0).toUpperCase();
  };

  const formatRateUnit = (rate?: WorkspaceUserRate) => {
    if (!rate) return t.rates?.noRate || 'No rate';
    const unitLabel =
      lang === 'fa'
        ? rate.price_unit?.local_name || rate.price_unit?.code || rate.currency
        : rate.price_unit?.code || rate.currency;
    return `${rate.hourly_rate} ${unitLabel}`;
  };

  const workspaceRole = workspace?.my_role;
  const canEdit = canWorkspace(workspaceRole, WORKSPACE_EDIT);
  const canDelete = canWorkspace(workspaceRole, WORKSPACE_DELETE);
  const canViewMembers = canWorkspace(workspaceRole, WORKSPACE_VIEW);
  const canViewMemberSensitiveDetails = canWorkspace(workspaceRole, WORKSPACE_MEMBERS_VIEW);
  const canViewReports = canWorkspace(workspaceRole, WORKSPACE_VIEW);

  if (isLoading || !workspace) {
    return <div className="p-8 text-center">{t.workspace?.loading}</div>;
  }

  const openWorkspaceRoute = (path: string) => {
    setActiveWorkspace(workspace);
    navigate(path);
  };

  const resourceCards = [
    {
      key: 'projects',
      title: t.sidebar?.projects || 'Projects',
      value: displayNumber(counts.projects),
      icon: FolderKanban,
      onClick: () => openWorkspaceRoute('/projects'),
      visible: canWorkspace(workspace.my_role, PROJECTS_VIEW),
    },
    {
      key: 'clients',
      title: t.sidebar?.clients || 'Clients',
      value: displayNumber(counts.clients),
      icon: BriefcaseBusiness,
      onClick: () => openWorkspaceRoute('/clients'),
      visible: canWorkspace(workspace.my_role, CLIENTS_VIEW),
    },
    {
      key: 'tags',
      title: t.sidebar?.tags || 'Tags',
      value: displayNumber(counts.tags),
      icon: Tag,
      onClick: () => openWorkspaceRoute('/tags'),
      visible: canWorkspace(workspace.my_role, TAGS_VIEW),
    },
    {
      key: 'reports',
      title: t.sidebar?.reports || 'Reports',
      value: t.workspace?.resourceOpen || 'Open',
      icon: Banknote,
      onClick: () => openWorkspaceRoute('/reports'),
      visible: canViewReports,
    },
  ].filter((item) => item.visible);

  return (
    <div className="mx-auto flex max-w-7xl flex-col gap-6 p-4 sm:p-6">
      <button
        onClick={() => navigate('/workspaces')}
        className="flex items-center gap-2 text-slate-500 transition-colors hover:text-slate-900 dark:hover:text-white"
      >
        <BackIcon className="h-5 w-5" />
        <span>{t.workspace?.back}</span>
      </button>

      <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900 sm:p-8">
        <div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
          <div className="min-w-0">
            <div className="mb-3 flex flex-wrap items-center gap-3">
              <h1 className="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
                {workspace.name}
              </h1>
              <span className={`inline-flex rounded-full px-3 py-1 text-sm font-semibold ${roleBadgeStyles[workspace.my_role || 'guest']}`}>
                {workspace.my_role ? t.workspace?.roles[workspace.my_role] : '-'}
              </span>
            </div>
            <p className="max-w-3xl whitespace-pre-wrap text-sm leading-7 text-slate-600 dark:text-slate-400">
              {workspace.description || t.workspace?.noDescription}
            </p>
          </div>

          <div className="flex flex-wrap items-center gap-2">
            {canViewReports && (
              <button
                onClick={() => openWorkspaceRoute('/reports')}
                className="inline-flex h-11 items-center justify-center rounded-xl border border-slate-200 bg-slate-50 px-4 text-sm font-semibold text-slate-700 transition hover:border-slate-300 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-slate-600 dark:hover:bg-slate-700"
              >
                {t.workspace?.openReports || 'Open reports'}
              </button>
            )}
            {canEdit && (
              <button
                onClick={() => navigate(`/workspaces/${id}/edit`)}
                className="inline-flex h-11 items-center justify-center gap-2 rounded-xl border px-4 text-sm font-semibold transition bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400 border-blue-200 hover:border-blue-300 hover:bg-blue-100 dark:border-blue-900/60 dark:hover:bg-blue-900/30"
              >
                <Edit2 className="h-4 w-4" />
                <span>{t.actions?.edit || 'Edit'}</span>
              </button>
            )}
            {canDelete && (
              <button
                onClick={handleDelete}
                className="inline-flex h-11 items-center justify-center gap-2 rounded-xl border border-red-200 bg-red-50 px-4 text-sm font-semibold text-red-700 transition hover:border-red-300 hover:bg-red-100 dark:border-red-900/60 dark:bg-red-900/20 dark:text-red-300 dark:hover:bg-red-900/30"
              >
                <Trash2 className="h-4 w-4" />
                <span>{t.actions?.delete || 'Delete'}</span>
              </button>
            )}
          </div>
        </div>
      </section>

      <section className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
          <div className="mb-3 flex items-center justify-between">
            <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.workspace?.statsMembers || 'Members'}</span>
            <Users className="h-5 w-5 text-slate-400" />
          </div>
          <p className="text-3xl font-bold text-slate-900 dark:text-white">{displayNumber(activeMembers.length)}</p>
        </div>

        <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
          <div className="mb-3 flex items-center justify-between">
            <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.workspace?.statsRates || 'Rates set'}</span>
            <Banknote className="h-5 w-5 text-slate-400" />
          </div>
          <p className="text-3xl font-bold text-slate-900 dark:text-white">{displayNumber(rates.length)}</p>
        </div>

        <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
          <div className="mb-3 flex items-center justify-between">
            <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.workspace?.statsOwnersAdmins || 'Owners & admins'}</span>
            <Users className="h-5 w-5 text-slate-400" />
          </div>
          <p className="text-3xl font-bold text-slate-900 dark:text-white">
            {displayNumber(roleCounts.owner + roleCounts.admin)}
          </p>
        </div>

        <div className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900">
          <div className="mb-3 flex items-center justify-between">
            <span className="text-sm font-medium text-slate-500 dark:text-slate-400">{t.workspace?.statsGuests || 'Guests'}</span>
            <Users className="h-5 w-5 text-slate-400" />
          </div>
          <p className="text-3xl font-bold text-slate-900 dark:text-white">{displayNumber(roleCounts.guest)}</p>
        </div>
      </section>

      <section className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm dark:border-slate-800 dark:bg-slate-900">
        <h2 className="mb-4 text-lg font-semibold text-slate-900 dark:text-white">
          {t.workspace?.resourcesTitle || 'Resources'}
        </h2>
        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
          {resourceCards.map((card) => {
            const Icon = card.icon;
            return (
              <button
                key={card.key}
                onClick={card.onClick}
                className="flex items-center justify-between rounded-2xl border border-slate-200 bg-slate-50 p-4 text-start transition hover:border-slate-300 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:border-slate-600 dark:hover:bg-slate-700"
              >
                <div className="flex items-center gap-3">
                  <div className="rounded-xl bg-white p-2 text-slate-600 shadow-sm dark:bg-slate-900 dark:text-slate-300">
                    <Icon className="h-5 w-5" />
                  </div>
                  <div>
                    <p className="text-sm font-semibold text-slate-900 dark:text-white">{card.title}</p>
                    <p className="text-xs text-slate-500 dark:text-slate-400">{card.value}</p>
                  </div>
                </div>
                <BackIcon className="h-4 w-4 rtl:rotate-180 text-slate-400" />
              </button>
            );
          })}
        </div>
      </section>

      <section className="rounded-3xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
        <div className="border-b border-slate-100 p-6 dark:border-slate-800">
          <div className="flex items-center justify-between gap-3">
            <div>
              <h2 className="text-lg font-semibold text-slate-900 dark:text-white">
                {t.workspace?.membersSectionTitle || t.workspace?.members || 'Members'}
              </h2>
              {canViewMembers
                  ? <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
                      { t.workspace?.membersSectionSubtitle || 'People in this workspace and their current roles.' }
                    </p>
                  : ''}
            </div>
            {canEdit && (
              <button
                onClick={() => navigate(`/workspaces/${id}/edit`)}
                className="inline-flex h-10 items-center justify-center rounded-xl border border-slate-200 bg-slate-50 px-4 text-sm font-semibold text-slate-700 transition hover:border-slate-300 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200 dark:hover:border-slate-600 dark:hover:bg-slate-700"
              >
                {t.workspace?.manageMembers || 'Manage members'}
              </button>
            )}
          </div>
        </div>

        {canViewMembers ? (
          <div className={`divide-y divide-slate-100 dark:divide-slate-800 ${activeMembers.length > 6 ? 'max-h-[36rem] overflow-y-auto' : ''}`}>
            {activeMembers.length === 0 ? (
              <div className="p-6 text-sm text-slate-500 dark:text-slate-400">
                {t.workspace?.noMembers || 'No members found.'}
              </div>
            ) : (
              activeMembers.map((member) => {
                const rate = memberRateMap.get(member.user.id);
                const isCurrentUser = member.user.id === user?.id;
                return (
                  <div
                    key={member.id}
                    className={`flex flex-col gap-4 p-5 sm:p-6 ${
                      isCurrentUser
                        ? 'bg-blue-50/80 ring-1 ring-blue-200 dark:bg-blue-950/20 dark:ring-blue-900/60'
                        : ''
                    }`}
                  >
                    <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                      <div className="min-w-0 flex-1">
                        <div className="flex items-start gap-4">
                          <div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-full bg-slate-200 text-sm font-semibold text-slate-600 shadow-sm dark:bg-slate-800 dark:text-slate-300">
                            {member.user?.profile_picture ? (
                              <img
                                src={member.user.profile_picture}
                                alt={getMemberName(member)}
                                className="h-full w-full object-cover"
                              />
                            ) : (
                              <span>{getMemberInitials(member)}</span>
                            )}
                          </div>
                          <div className="min-w-0 flex-1">
                        <div className="mb-2 flex flex-wrap items-center gap-2">
                          <h3 className="text-base font-semibold text-slate-900 dark:text-white">
                            {getMemberName(member)}
                          </h3>
                          {isCurrentUser && (
                            <span className="inline-flex rounded-full border border-blue-200 bg-blue-100 px-2.5 py-1 text-xs font-semibold text-blue-700 dark:border-blue-900/60 dark:bg-blue-900/30 dark:text-blue-300">
                              {t.workspace?.youLabel || 'You'}
                            </span>
                          )}
                          <span className={`inline-flex rounded-full px-2.5 py-1 text-xs font-semibold ${roleBadgeStyles[member.role]}`}>
                            {t.workspace?.roles[member.role]}
                          </span>
                        </div>
                        {canViewMemberSensitiveDetails && (
                          <div className="space-y-1 text-sm text-slate-500 dark:text-slate-400">
                            <p>
                              {t.workspace?.mobileNumber || 'Mobile Number'}: {getMemberContact(member)}
                            </p>
                          </div>
                        )}
                          </div>
                        </div>
                      </div>

                      {canViewMemberSensitiveDetails && (
                        <div className="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 dark:border-slate-700 dark:bg-slate-800/80 sm:min-w-[210px]">
                          <p className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
                            {t.rates?.workspaceRate || 'Workspace rate'}
                          </p>
                          <p className="text-sm font-semibold text-slate-900 dark:text-white">
                            {formatRateUnit(rate)}
                          </p>
                        </div>
                      )}
                    </div>
                  </div>
                );
              })
            )}
          </div>
        ) : (
          <div className="p-6 text-sm text-slate-500 dark:text-slate-400">
            {t.workspace?.membersLocked || 'This member list is not available for your current role.'}
          </div>
        )}
      </section>
    </div>
  );
}