'use client';
import React, { useMemo } from 'react';
import { type User } from 'better-auth';
// import OrganizationInvitations from "./organization-invitations";
// import { Separator } from "@/components/ui/separator";
import MemberBlock from './member-block';
// import { useSession } from '@/lib/auth/auth-client';
import { MemberRole } from '@/server/modules/organization/types/member-role.enum';
import OrganizationSubscription from './organization-subscription';
import { BusinessOption } from '@/types/interfaces';
import { Skeleton } from '@/components/ui/skeleton';
import { OrganizationDetailsSection } from '@/components/organization/sections/organization-details.section';
import type { AppRouterOutput } from '@/lib/trpc/router';
import { client } from '@/lib/auth/auth-client';
import { api } from '@/lib/trpc/client';

type Subscription = AppRouterOutput['payment']['subscription']['get'];

// TODO: Need to get current products in stripe in the future
const plans: (BusinessOption & { plan: string; seats: number })[] = [
  {
    value: '1',
    label: '1 medarbejder (85,- kr. / medarbejder / md.)',
    price: 85,
    plan: 'business-monthly',
    seats: 1
  },
  {
    value: '2',
    label: '2 medarbejder (79,- kr. / medarbejder / md.)',
    price: 79,
    plan: 'business-monthly',
    seats: 2
  },
  {
    value: '3',
    label: '3 medarbejder (69,- kr. / medarbejder / md.)',
    price: 69,
    plan: 'business-monthly',
    seats: 3
  },
  {
    value: '4',
    label: '4 medarbejder (69,- kr. / medarbejder / md.)',
    price: 69,
    plan: 'business-monthly',
    seats: 4
  },
  {
    value: '5',
    label: '5 medarbejder (59,- kr. / medarbejder / md.)',
    price: 59,
    plan: 'business-monthly',
    seats: 5
  },
  {
    value: '6',
    label: '1 medarbejder (900,- kr. / medarbejder / år.)',
    price: 900,
    plan: 'business-annual',
    seats: 1
  },
  {
    value: '7',
    label: '2 medarbejder (828,- kr. / medarbejder / år.)',
    price: 828,
    plan: 'business-annual',
    seats: 2
  },
  {
    value: '8',
    label: '3 medarbejder (708,- kr. / medarbejder / år.)',
    price: 708,
    plan: 'business-annual',
    seats: 3
  },
  {
    value: '9',
    label: '4 medarbejder (708,- kr. / medarbejder / år.)',
    price: 708,
    plan: 'business-annual',
    seats: 4
  },
  {
    value: '10',
    label: '5 medarbejder (588,- kr. / medarbejder / år.)',
    price: 588,
    plan: 'business-annual',
    seats: 5
  }
];

interface Props {
  organizationId: string;
  member: NonNullable<AppRouterOutput['organization']['member']['get']>;
  user: User;
  subscription?: Subscription;
}

export const OrganizationContent: React.FC<Props> = (props) => {
  const { organizationId, user, member, subscription } = props;

  const { isLoading, data: organization } = api.organization.get.useQuery({
    with: ['invitations', 'members'],
    id: organizationId
  });

  const currentPlan = useMemo(() => {
    return undefined;
  }, []);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!organization) {
    return <div>Organization not found</div>;
  }

  return (
    <section className='mx-auto w-full max-w-[1362px] grow space-y-6 p-3 md:px-8 md:py-4 xl:border-x'>
      {[MemberRole.OWNER, MemberRole.ADMIN].includes(member.role) && (
        <>
          <MemberBlock
            user={user}
            currentPlan={currentPlan}
            organizationId={organizationId}
            subscripionStatus={subscription?.status}
          />

          <OrganizationSubscription
            organizationId={organizationId}
            tariffPlans={plans}
            currentPlan={currentPlan}
            memberCount={organization.members.length}
          />
        </>
      )}

      {/* <Separator className="my-7" /> */}
      {/* <OrganizationInvitations /> */}
    </section>
  );
};