'use client';

import { FC, useEffect, useState } from 'react';
import { client } from '@/lib/auth/auth-client';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@/components/ui/select';
import { Loader2, MailPlus } from 'lucide-react';
import clsx from 'clsx';

const OrganizationInvitations: FC = () => {
  return (
    <section className='mx-auto w-full max-w-[1362px] grow p-3 md:px-8 md:py-4 xl:border-x'>
      <div className='flex flex-col xl:flex-row'>
        <div className='shrink-0 xl:w-68'>
          <h2 className='mb-4 text-xl leading-none font-bold text-[#CBCBCB] md:text-3xl'>
            invitationer
          </h2>
        </div>
        <div>
          <Card className='w-full gap-3 rounded-none border-0 bg-neutral-50 font-serif shadow-none'>
            <CardHeader>
              <CardTitle>Invitationer</CardTitle>
            </CardHeader>
            {/* <CardContent className="space-y-4">
              {data.invitations.length === 0 ? (
                <p className="text-sm text-muted-foreground">
                  Ingen aktive invitationer.
                </p>
              ) : (
                <div className="space-y-3">
                  {data.invitations.map((invitation) => (
                    <div
                      key={invitation.id}
                      className="flex flex-col gap-2 rounded-md border p-4 md:flex-row md:items-center md:justify-between"
                    >
                      <div>
                        <p className="font-medium">{invitation.email}</p>
                        <p className="text-sm text-muted-foreground">
                          Rolle: {invitation.role}
                        </p>
                        <p className="text-xs text-muted-foreground mt-1">
                          Status: {invitation.status}
                          {invitation.expiresAt
                            ? ` · Udløber ${formatDate(invitation.expiresAt)}`
                            : ''}
                        </p>
                      </div>
                      {isManager && invitation.status === 'pending' && (
                        <Button
                          variant="outline"
                          size="sm"
                          className={clsx(
                            'w-full md:w-auto',
                            revokingInvitationId === invitation.id && 'opacity-80'
                          )}
                          disabled={revokingInvitationId === invitation.id}
                          onClick={() => handleRevokeInvitation(invitation.id)}
                        >
                          {revokingInvitationId === invitation.id ? (
                            <>
                              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                              Tilbagekalder...
                            </>
                          ) : (
                            'Tilbagekald'
                          )}
                        </Button>
                      )}
                    </div>
                  ))}
                </div>
              )}

              {isManager && (
                <div className="rounded-md border bg-muted/30 p-4 space-y-3">
                  <div className="flex items-center gap-2 text-sm font-medium">
                    <MailPlus className="h-4 w-4" />
                    <span>Inviter nyt medlem</span>
                  </div>
                  <div className="grid gap-3 md:grid-cols-[1fr_minmax(150px,200px)_auto]">
                    <Input
                      type="email"
                      placeholder="brugernavn@virksomhed.dk"
                      value={inviteEmail}
                      onChange={(event) => setInviteEmail(event.target.value)}
                    />
                    <Select value={inviteRole} onValueChange={(value) => setInviteRole(value as 'member' | 'admin')}>
                      <SelectTrigger>
                        <SelectValue placeholder="Vælg rolle" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="member">Medlem</SelectItem>
                        <SelectItem value="admin">Administrator</SelectItem>
                      </SelectContent>
                    </Select>
                    <Button
                      type="button"
                      onClick={handleInvite}
                      disabled={inviteSubmitting}
                    >
                      {inviteSubmitting ? (
                        <>
                          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                          Sender...
                        </>
                      ) : (
                        'Send invitation'
                      )}
                    </Button>
                  </div>
                  {data.subscription && (
                    <p
                      className={clsx(
                        'text-xs',
                        seatsRemaining > 0 ? 'text-muted-foreground' : 'text-destructive'
                      )}
                    >
                      Tilgængelige pladser: {seatsRemaining}
                    </p>
                  )}
                </div>
              )}
            </CardContent> */}
          </Card>
        </div>
      </div>
      {/* <Separator className="mt-7" /> */}
    </section>
  );
};

export default OrganizationInvitations;