import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { prisma } from '@/lib/prisma';
import { ArrowLeft, Save } from 'lucide-react';
import Link from 'next/link';
import { updateOrganization } from '../../actions';
import { OrgModulesForm } from '../../components/OrgModulesForm';
import { OrgUsersTable } from '../../components/OrgUsersTable';
import { OrgIntegrationsForm } from '../../components/OrgIntegrationsForm';

export default async function OrganizationDetailPage({ params }: { params: { id: string } }) {
    const org = await prisma.organization.findUnique({
        where: { id: params.id },
        include: {
            users: true,
        },
    });

    if (!org) {
        return <div>Organização não encontrada</div>;
    }

    const allowedModules = (org.allowedModules as string[]) || [];
    const integrations = ((org as any).integrations as any) || {};

    return (
        <div className='space-y-6'>
            <div className='flex items-center gap-4'>
                <Link href='/super-admin/organizations'>
                    <Button
                        variant='ghost'
                        size='icon'
                    >
                        <ArrowLeft className='h-4 w-4' />
                    </Button>
                </Link>
                <h1 className='text-2xl font-bold tracking-tight'>{org.name}</h1>
            </div>

            <div className='grid gap-6 md:grid-cols-2'>
                {}
                <Card>
                    <CardHeader>
                        <CardTitle>Dados Básicos</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <form
                            action={updateOrganization.bind(null, org.id)}
                            className='space-y-4'
                        >
                            <div className='space-y-2'>
                                <Label htmlFor='name'>Nome da Empresa</Label>
                                <Input
                                    id='name'
                                    name='name'
                                    defaultValue={org.name}
                                    required
                                />
                            </div>
                            <div className='space-y-2'>
                                <Label htmlFor='slug'>Slug (Subdomínio)</Label>
                                <Input
                                    id='slug'
                                    name='slug'
                                    defaultValue={org.slug}
                                    required
                                />
                            </div>
                            <div className='flex items-center space-x-2 pt-2'>
                                <Switch
                                    id='isActive'
                                    name='isActive'
                                    defaultChecked={org.isActive}
                                />
                                <Label htmlFor='isActive'>Ativo</Label>
                            </div>
                            <div className='pt-2'>
                                <Button type='submit'>
                                    <Save className='mr-2 h-4 w-4' />
                                    Guardar alterações
                                </Button>
                            </div>
                        </form>
                    </CardContent>
                </Card>

                {}
                <Card>
                    <CardHeader>
                        <CardTitle>Módulos Ativos</CardTitle>
                        <CardDescription>Selecione quais módulos esta organização tem acesso.</CardDescription>
                    </CardHeader>
                    <CardContent>
                        <OrgModulesForm
                            orgId={org.id}
                            enabledModules={allowedModules}
                        />
                    </CardContent>
                </Card>

                {/* Integrações API */}
                <Card className='md:col-span-2'>
                    <CardHeader>
                        <CardTitle>Configurações de Integração</CardTitle>
                        <CardDescription>
                            Configure os conectores de aplicativos terceiros (Odoo ERP, Firebase Storage) para operar
                            isoladamente neste tenant.
                        </CardDescription>
                    </CardHeader>
                    <CardContent>
                        <OrgIntegrationsForm
                            orgId={org.id}
                            initialIntegrations={integrations}
                        />
                    </CardContent>
                </Card>

                {/* Utilizadores */}
                <Card className='md:col-span-2'>
                    <CardHeader>
                        <CardTitle>Utilizadores ({org.users.length})</CardTitle>
                    </CardHeader>
                    <CardContent>
                        <OrgUsersTable
                            orgId={org.id}
                            users={org.users.map((u) => ({
                                id: u.id,
                                name: u.name,
                                email: u.email,
                                role: u.role,
                            }))}
                        />
                    </CardContent>
                </Card>
            </div>
        </div>
    );
}