import { Head, Link, router, useForm } from '@inertiajs/react';
import type {
    Gavel} from 'lucide-react';
import {
    Banknote,
    CalendarClock,
    FolderOpen,
    MessageSquare,
    Pencil,
    Plus,
    Trash2,
} from 'lucide-react';
import { ConfirmDialog } from '@/components/confirm-dialog';
import { EmptyState } from '@/components/empty-state';
import {
    
    MatterDeadlinesTab
} from '@/components/matter/deadlines-tab';
import type {Deadline as DeadlineRow} from '@/components/matter/deadlines-tab';
import {
    
    MatterHearingsTab
    
} from '@/components/matter/hearings-tab';
import type {Hearing as HearingRow, Witness as WitnessRow} from '@/components/matter/hearings-tab';
import {  MatterTasksTab } from '@/components/matter/tasks-tab';
import type {Task as TaskRow} from '@/components/matter/tasks-tab';
import { PageHeader } from '@/components/page-header';
import { StatusBadge } from '@/components/status-badge';
import type { StatusTone } from '@/components/status-badge';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Textarea } from '@/components/ui/textarea';
import { destroy, edit, index } from '@/routes/matters';
import { store as commentStore } from '@/routes/matters/comments';
import {
    destroy as partyDestroy,
    store as partyStore,
} from '@/routes/matters/parties';
import { update as stageUpdate } from '@/routes/matters/stage';
import { update as statusUpdate } from '@/routes/matters/status';
import {
    destroy as teamDestroy,
    store as teamStore,
} from '@/routes/matters/team';

type Option = { value: number | string; label: string };

type Party = {
    id: number;
    name: string;
    role: string;
    role_value: string;
    phone: string | null;
    address: string | null;
    notes: string | null;
};

type TeamMember = { id: string; name: string; role: string };

type Matter = {
    id: string;
    matter_number: string;
    title: string;
    type_label: string;
    is_litigation: boolean;
    status: string;
    status_label: string;
    status_tone: StatusTone;
    priority_label: string;
    priority_tone: StatusTone;
    client: { id: string; name: string };
    practice_area: string | null;
    court: string | null;
    office: string | null;
    stage: string | null;
    matter_stage_id: number | null;
    responsible_partner: string | null;
    client_role: string | null;
    suit_number: string | null;
    relief_sought: string | null;
    opposing_counsel: string | null;
    summary: string | null;
    date_opened: string | null;
    date_closed: string | null;
    filing_date: string | null;
    claim_amount: string | null;
    estimated_value: string | null;
    parties: Party[];
    team: TeamMember[];
};

type TimelineEvent = {
    id: number;
    type: string;
    title: string;
    description: string | null;
    user: string | null;
    happened_at: string | null;
    happened_on: string | null;
};

type Comment = {
    id: number;
    user: string | null;
    comment: string;
    at: string | null;
};

type Props = {
    matter: Matter;
    timeline: TimelineEvent[];
    comments: Comment[];
    hearings: HearingRow[];
    witnesses: WitnessRow[];
    deadlines: DeadlineRow[];
    tasks: TaskRow[];
    can: {
        edit: boolean;
        assignTeam: boolean;
        close: boolean;
        delete: boolean;
        manageHearings: boolean;
        recordOutcome: boolean;
        manageDeadlines: boolean;
        viewDeadlines: boolean;
        createTasks: boolean;
        editTasks: boolean;
    };
    options: {
        stages: Option[];
        statuses: Option[];
        teamRoles: Option[];
        partyRoles: Option[];
        users: Option[];
        courts: Option[];
        hearingTypes: Option[];
        hearingOutcomes: Option[];
        deadlineTypes: Option[];
        taskPriorities: Option[];
        taskStatuses: Option[];
        templates: Option[];
    };
};

function Field({ label, value }: { label: string; value: string | null }) {
    return (
        <div>
            <p className="text-xs tracking-wide text-muted-foreground uppercase">
                {label}
            </p>
            <p className="mt-0.5 text-sm text-foreground">{value || '—'}</p>
        </div>
    );
}

function Placeholder({
    icon,
    title,
    phase,
}: {
    icon: typeof Gavel;
    title: string;
    phase: string;
}) {
    return (
        <Card>
            <CardContent className="p-0">
                <EmptyState
                    icon={icon}
                    title={title}
                    description={`This tab is populated once the ${phase} module is live.`}
                />
            </CardContent>
        </Card>
    );
}

export default function MatterShow({
    matter,
    timeline,
    comments,
    hearings,
    witnesses,
    deadlines,
    tasks,
    can,
    options,
}: Props) {
    const imminentDeadlines = deadlines.filter((d) => d.imminent);
    const stageForm = useForm({
        matter_stage_id: matter.matter_stage_id
            ? String(matter.matter_stage_id)
            : '',
    });
    const statusForm = useForm({ status: matter.status, note: '' });
    const partyForm = useForm({ name: '', role: 'defendant' });
    const teamForm = useForm({ user_id: '', role: 'counsel' });
    const commentForm = useForm({ comment: '' });

    const changeStage = (v: string) => {
        stageForm.setData('matter_stage_id', v);
        router.patch(
            stageUpdate(matter.id).url,
            { matter_stage_id: v },
            { preserveScroll: true },
        );
    };
    const changeStatus = (e: React.FormEvent) => {
        e.preventDefault();
        router.patch(statusUpdate(matter.id).url, statusForm.data, {
            preserveScroll: true,
        });
    };
    const addParty = (e: React.FormEvent) => {
        e.preventDefault();
        partyForm.post(partyStore(matter.id).url, {
            preserveScroll: true,
            onSuccess: () => partyForm.reset(),
        });
    };
    const addMember = (e: React.FormEvent) => {
        e.preventDefault();
        teamForm.post(teamStore(matter.id).url, {
            preserveScroll: true,
            onSuccess: () => teamForm.reset(),
        });
    };
    const addComment = (e: React.FormEvent) => {
        e.preventDefault();
        commentForm.post(commentStore(matter.id).url, {
            preserveScroll: true,
            onSuccess: () => commentForm.reset(),
        });
    };

    return (
        <>
            <Head title={matter.matter_number} />
            <div className="flex flex-col gap-6 p-4">
                <PageHeader
                    title={matter.title}
                    subtitle={`${matter.matter_number} · ${matter.type_label}`}
                    action={
                        <div className="flex flex-wrap gap-2">
                            <Button asChild variant="outline">
                                <Link href={index()}>Back</Link>
                            </Button>
                            {can.edit && (
                                <Button asChild>
                                    <Link href={edit(matter.id)}>
                                        <Pencil /> Edit
                                    </Link>
                                </Button>
                            )}
                            {can.delete && (
                                <ConfirmDialog
                                    title={`Delete ${matter.matter_number}?`}
                                    description="This matter will be removed. This cannot be undone."
                                    confirmLabel="Delete matter"
                                    onConfirm={() =>
                                        router.delete(destroy(matter.id).url)
                                    }
                                    trigger={
                                        <Button variant="destructive">
                                            <Trash2 /> Delete
                                        </Button>
                                    }
                                />
                            )}
                        </div>
                    }
                />

                {imminentDeadlines.length > 0 && (
                    <Alert variant="destructive">
                        <CalendarClock />
                        <AlertTitle>
                            {imminentDeadlines.length === 1
                                ? '1 deadline is due within 14 days'
                                : `${imminentDeadlines.length} deadlines are due within 14 days`}
                        </AlertTitle>
                        <AlertDescription>
                            <ul className="list-inside list-disc">
                                {imminentDeadlines.map((d) => (
                                    <li key={d.id}>
                                        {d.title} — {d.type_label}, due {d.due_date}
                                        {d.days_left < 0
                                            ? ` (${Math.abs(d.days_left)} days overdue)`
                                            : d.days_left === 0
                                              ? ' (due today)'
                                              : ` (${d.days_left} days left)`}
                                    </li>
                                ))}
                            </ul>
                        </AlertDescription>
                    </Alert>
                )}

                <div className="flex flex-wrap items-center gap-2">
                    <StatusBadge tone={matter.status_tone}>
                        {matter.status_label}
                    </StatusBadge>
                    <StatusBadge tone={matter.priority_tone}>
                        {matter.priority_label} priority
                    </StatusBadge>
                    {matter.stage && (
                        <StatusBadge tone="neutral">{matter.stage}</StatusBadge>
                    )}
                </div>

                {can.edit && (
                    <Card>
                        <CardContent className="flex flex-wrap items-end gap-4 py-4">
                            <div className="grid gap-2">
                                <Label>Stage</Label>
                                <Select
                                    value={stageForm.data.matter_stage_id}
                                    onValueChange={changeStage}
                                >
                                    <SelectTrigger className="w-52">
                                        <SelectValue placeholder="Set stage" />
                                    </SelectTrigger>
                                    <SelectContent>
                                        {options.stages.map((s) => (
                                            <SelectItem
                                                key={s.value}
                                                value={String(s.value)}
                                            >
                                                {s.label}
                                            </SelectItem>
                                        ))}
                                    </SelectContent>
                                </Select>
                            </div>
                            <form
                                onSubmit={changeStatus}
                                className="flex flex-wrap items-end gap-2"
                            >
                                <div className="grid gap-2">
                                    <Label>Status</Label>
                                    <Select
                                        value={statusForm.data.status}
                                        onValueChange={(v) =>
                                            statusForm.setData('status', v)
                                        }
                                    >
                                        <SelectTrigger className="w-44">
                                            <SelectValue />
                                        </SelectTrigger>
                                        <SelectContent>
                                            {options.statuses.map((s) => (
                                                <SelectItem
                                                    key={s.value}
                                                    value={String(s.value)}
                                                >
                                                    {s.label}
                                                </SelectItem>
                                            ))}
                                        </SelectContent>
                                    </Select>
                                </div>
                                <div className="grid gap-2">
                                    <Label>Note (optional)</Label>
                                    <Input
                                        value={statusForm.data.note}
                                        onChange={(e) =>
                                            statusForm.setData(
                                                'note',
                                                e.target.value,
                                            )
                                        }
                                        className="w-56"
                                    />
                                </div>
                                <Button type="submit" variant="secondary">
                                    Update status
                                </Button>
                            </form>
                        </CardContent>
                        {statusForm.errors.status && (
                            <CardContent className="pt-0 text-sm text-destructive">
                                {statusForm.errors.status}
                            </CardContent>
                        )}
                    </Card>
                )}

                <Tabs defaultValue="overview">
                    <div className="overflow-x-auto">
                        <TabsList>
                            <TabsTrigger value="overview">Overview</TabsTrigger>
                            <TabsTrigger value="parties">Parties</TabsTrigger>
                            <TabsTrigger value="team">Team</TabsTrigger>
                            <TabsTrigger value="timeline">Timeline</TabsTrigger>
                            <TabsTrigger value="comments">Comments</TabsTrigger>
                            <TabsTrigger value="hearings">Hearings</TabsTrigger>
                            <TabsTrigger value="deadlines">
                                Deadlines
                                {imminentDeadlines.length > 0 && (
                                    <StatusBadge tone="danger" className="ml-1.5">
                                        {imminentDeadlines.length}
                                    </StatusBadge>
                                )}
                            </TabsTrigger>
                            <TabsTrigger value="tasks">Tasks</TabsTrigger>
                            <TabsTrigger value="billing">Billing</TabsTrigger>
                            <TabsTrigger value="documents">
                                Documents
                            </TabsTrigger>
                        </TabsList>
                    </div>

                    <TabsContent value="overview">
                        <div className="grid gap-6 lg:grid-cols-2">
                            <Card>
                                <CardHeader>
                                    <CardTitle>Details</CardTitle>
                                </CardHeader>
                                <CardContent className="grid gap-4 sm:grid-cols-2">
                                    <div>
                                        <p className="text-xs tracking-wide text-muted-foreground uppercase">
                                            Client
                                        </p>
                                        <Link
                                            href={`/clients/${matter.client.id}`}
                                            className="mt-0.5 block text-sm text-primary hover:underline"
                                        >
                                            {matter.client.name}
                                        </Link>
                                    </div>
                                    <Field
                                        label="Practice area"
                                        value={matter.practice_area}
                                    />
                                    <Field
                                        label="Responsible partner"
                                        value={matter.responsible_partner}
                                    />
                                    <Field
                                        label="Office"
                                        value={matter.office}
                                    />
                                    <Field
                                        label="Date opened"
                                        value={matter.date_opened}
                                    />
                                    <Field
                                        label="Date closed"
                                        value={matter.date_closed}
                                    />
                                    {matter.is_litigation && (
                                        <Field
                                            label="Court"
                                            value={matter.court}
                                        />
                                    )}
                                    {matter.is_litigation && (
                                        <Field
                                            label="Suit number"
                                            value={matter.suit_number}
                                        />
                                    )}
                                    {matter.is_litigation && (
                                        <Field
                                            label="Client's role"
                                            value={matter.client_role}
                                        />
                                    )}
                                    {matter.is_litigation && (
                                        <Field
                                            label="Filing date"
                                            value={matter.filing_date}
                                        />
                                    )}
                                    <Field
                                        label="Opposing counsel"
                                        value={matter.opposing_counsel}
                                    />
                                    {matter.is_litigation ? (
                                        <Field
                                            label="Claim amount"
                                            value={
                                                matter.claim_amount
                                                    ? `₦${matter.claim_amount}`
                                                    : null
                                            }
                                        />
                                    ) : (
                                        <Field
                                            label="Estimated value"
                                            value={
                                                matter.estimated_value
                                                    ? `₦${matter.estimated_value}`
                                                    : null
                                            }
                                        />
                                    )}
                                </CardContent>
                            </Card>
                            <Card>
                                <CardHeader>
                                    <CardTitle>Summary</CardTitle>
                                </CardHeader>
                                <CardContent className="space-y-4">
                                    <Field
                                        label="Summary"
                                        value={matter.summary}
                                    />
                                    {matter.is_litigation && (
                                        <Field
                                            label="Relief sought"
                                            value={matter.relief_sought}
                                        />
                                    )}
                                </CardContent>
                            </Card>
                        </div>
                    </TabsContent>

                    <TabsContent value="parties">
                        <Card>
                            <CardHeader>
                                <CardTitle>Parties</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                {matter.parties.length === 0 ? (
                                    <p className="text-sm text-muted-foreground">
                                        No parties recorded.
                                    </p>
                                ) : (
                                    <Table>
                                        <TableHeader>
                                            <TableRow>
                                                <TableHead>Name</TableHead>
                                                <TableHead>Role</TableHead>
                                                <TableHead>Phone</TableHead>
                                                {can.edit && (
                                                    <TableHead className="text-right">
                                                        Actions
                                                    </TableHead>
                                                )}
                                            </TableRow>
                                        </TableHeader>
                                        <TableBody>
                                            {matter.parties.map((p) => (
                                                <TableRow key={p.id}>
                                                    <TableCell className="font-medium text-foreground">
                                                        {p.name}
                                                    </TableCell>
                                                    <TableCell>
                                                        {p.role}
                                                    </TableCell>
                                                    <TableCell>
                                                        {p.phone ?? '—'}
                                                    </TableCell>
                                                    {can.edit && (
                                                        <TableCell className="text-right">
                                                            <ConfirmDialog
                                                                title={`Remove ${p.name}?`}
                                                                confirmLabel="Remove party"
                                                                onConfirm={() =>
                                                                    router.delete(
                                                                        partyDestroy(
                                                                            {
                                                                                matter: matter.id,
                                                                                party: p.id,
                                                                            },
                                                                        ).url,
                                                                        {
                                                                            preserveScroll: true,
                                                                        },
                                                                    )
                                                                }
                                                                trigger={
                                                                    <Button
                                                                        variant="ghost"
                                                                        size="icon-sm"
                                                                    >
                                                                        <Trash2 />
                                                                    </Button>
                                                                }
                                                            />
                                                        </TableCell>
                                                    )}
                                                </TableRow>
                                            ))}
                                        </TableBody>
                                    </Table>
                                )}
                                {can.edit && (
                                    <form
                                        onSubmit={addParty}
                                        className="flex flex-wrap items-end gap-2 border-t border-border pt-4"
                                    >
                                        <div className="grid flex-1 gap-2">
                                            <Label>Name</Label>
                                            <Input
                                                value={partyForm.data.name}
                                                onChange={(e) =>
                                                    partyForm.setData(
                                                        'name',
                                                        e.target.value,
                                                    )
                                                }
                                                required
                                            />
                                        </div>
                                        <div className="grid w-44 gap-2">
                                            <Label>Role</Label>
                                            <Select
                                                value={partyForm.data.role}
                                                onValueChange={(v) =>
                                                    partyForm.setData('role', v)
                                                }
                                            >
                                                <SelectTrigger>
                                                    <SelectValue />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    {options.partyRoles.map(
                                                        (o) => (
                                                            <SelectItem
                                                                key={o.value}
                                                                value={String(
                                                                    o.value,
                                                                )}
                                                            >
                                                                {o.label}
                                                            </SelectItem>
                                                        ),
                                                    )}
                                                </SelectContent>
                                            </Select>
                                        </div>
                                        <Button type="submit">
                                            <Plus /> Add party
                                        </Button>
                                    </form>
                                )}
                            </CardContent>
                        </Card>
                    </TabsContent>

                    <TabsContent value="team">
                        <Card>
                            <CardHeader>
                                <CardTitle>Team</CardTitle>
                            </CardHeader>
                            <CardContent className="space-y-4">
                                <Table>
                                    <TableHeader>
                                        <TableRow>
                                            <TableHead>Member</TableHead>
                                            <TableHead>Role</TableHead>
                                            {can.assignTeam && (
                                                <TableHead className="text-right">
                                                    Actions
                                                </TableHead>
                                            )}
                                        </TableRow>
                                    </TableHeader>
                                    <TableBody>
                                        {matter.team.map((t) => (
                                            <TableRow key={t.id}>
                                                <TableCell className="font-medium text-foreground">
                                                    {t.name}
                                                </TableCell>
                                                <TableCell>{t.role}</TableCell>
                                                {can.assignTeam && (
                                                    <TableCell className="text-right">
                                                        <ConfirmDialog
                                                            title={`Remove ${t.name}?`}
                                                            confirmLabel="Remove member"
                                                            onConfirm={() =>
                                                                router.delete(
                                                                    teamDestroy(
                                                                        {
                                                                            matter: matter.id,
                                                                            user: t.id,
                                                                        },
                                                                    ).url,
                                                                    {
                                                                        preserveScroll: true,
                                                                    },
                                                                )
                                                            }
                                                            trigger={
                                                                <Button
                                                                    variant="ghost"
                                                                    size="icon-sm"
                                                                >
                                                                    <Trash2 />
                                                                </Button>
                                                            }
                                                        />
                                                    </TableCell>
                                                )}
                                            </TableRow>
                                        ))}
                                    </TableBody>
                                </Table>
                                {can.assignTeam && (
                                    <form
                                        onSubmit={addMember}
                                        className="flex flex-wrap items-end gap-2 border-t border-border pt-4"
                                    >
                                        <div className="grid flex-1 gap-2">
                                            <Label>Member</Label>
                                            <Select
                                                value={teamForm.data.user_id}
                                                onValueChange={(v) =>
                                                    teamForm.setData(
                                                        'user_id',
                                                        v,
                                                    )
                                                }
                                            >
                                                <SelectTrigger>
                                                    <SelectValue placeholder="Select a person" />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    {options.users.map((o) => (
                                                        <SelectItem
                                                            key={o.value}
                                                            value={String(
                                                                o.value,
                                                            )}
                                                        >
                                                            {o.label}
                                                        </SelectItem>
                                                    ))}
                                                </SelectContent>
                                            </Select>
                                        </div>
                                        <div className="grid w-44 gap-2">
                                            <Label>Role</Label>
                                            <Select
                                                value={teamForm.data.role}
                                                onValueChange={(v) =>
                                                    teamForm.setData('role', v)
                                                }
                                            >
                                                <SelectTrigger>
                                                    <SelectValue />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    {options.teamRoles.map(
                                                        (o) => (
                                                            <SelectItem
                                                                key={o.value}
                                                                value={String(
                                                                    o.value,
                                                                )}
                                                            >
                                                                {o.label}
                                                            </SelectItem>
                                                        ),
                                                    )}
                                                </SelectContent>
                                            </Select>
                                        </div>
                                        <Button type="submit">
                                            <Plus /> Add member
                                        </Button>
                                    </form>
                                )}
                            </CardContent>
                        </Card>
                    </TabsContent>

                    <TabsContent value="timeline">
                        <Card>
                            <CardContent className="p-6">
                                {timeline.length === 0 ? (
                                    <EmptyState
                                        title="No activity yet"
                                        description="Matter events will appear here."
                                    />
                                ) : (
                                    <ol className="relative space-y-6 border-l border-border pl-6">
                                        {timeline.map((e) => (
                                            <li key={e.id} className="relative">
                                                <span className="absolute top-1 -left-[27px] size-3 rounded-full border-2 border-card bg-primary" />
                                                <p className="text-sm font-medium text-foreground">
                                                    {e.title}
                                                </p>
                                                {e.description && (
                                                    <p className="text-sm text-muted-foreground">
                                                        {e.description}
                                                    </p>
                                                )}
                                                <p className="mt-0.5 text-xs text-muted-foreground">
                                                    {e.happened_on}
                                                    {e.user
                                                        ? ` · ${e.user}`
                                                        : ''}
                                                </p>
                                            </li>
                                        ))}
                                    </ol>
                                )}
                            </CardContent>
                        </Card>
                    </TabsContent>

                    <TabsContent value="comments">
                        <Card>
                            <CardContent className="space-y-4 p-6">
                                <form
                                    onSubmit={addComment}
                                    className="space-y-2"
                                >
                                    <Textarea
                                        placeholder="Add a comment for the matter team…"
                                        value={commentForm.data.comment}
                                        onChange={(e) =>
                                            commentForm.setData(
                                                'comment',
                                                e.target.value,
                                            )
                                        }
                                    />
                                    <div className="flex items-center gap-2">
                                        <Button
                                            type="submit"
                                            disabled={
                                                commentForm.processing ||
                                                commentForm.data.comment.trim() ===
                                                    ''
                                            }
                                        >
                                            <MessageSquare /> Post comment
                                        </Button>
                                    </div>
                                </form>
                                {comments.length === 0 ? (
                                    <p className="text-sm text-muted-foreground">
                                        No comments yet.
                                    </p>
                                ) : (
                                    <ul className="space-y-3">
                                        {comments.map((c) => (
                                            <li
                                                key={c.id}
                                                className="rounded-lg border border-border p-3"
                                            >
                                                <p className="text-sm text-foreground">
                                                    {c.comment}
                                                </p>
                                                <p className="mt-1 text-xs text-muted-foreground">
                                                    {c.user ?? 'Someone'} ·{' '}
                                                    {c.at}
                                                </p>
                                            </li>
                                        ))}
                                    </ul>
                                )}
                            </CardContent>
                        </Card>
                    </TabsContent>

                    <TabsContent value="hearings">
                        <MatterHearingsTab
                            matterId={matter.id}
                            hearings={hearings}
                            witnesses={witnesses}
                            options={{
                                courts: options.courts,
                                hearingTypes: options.hearingTypes,
                                hearingOutcomes: options.hearingOutcomes,
                            }}
                            can={{
                                manageHearings: can.manageHearings,
                                recordOutcome: can.recordOutcome,
                            }}
                        />
                    </TabsContent>
                    <TabsContent value="deadlines">
                        <MatterDeadlinesTab
                            matterId={matter.id}
                            deadlines={deadlines}
                            options={{
                                deadlineTypes: options.deadlineTypes,
                                users: options.users,
                            }}
                            can={{ manageDeadlines: can.manageDeadlines }}
                        />
                    </TabsContent>
                    <TabsContent value="tasks">
                        <MatterTasksTab
                            matterId={matter.id}
                            tasks={tasks}
                            options={{
                                taskPriorities: options.taskPriorities,
                                taskStatuses: options.taskStatuses,
                                users: options.users,
                                templates: options.templates,
                            }}
                            can={{
                                createTasks: can.createTasks,
                                editTasks: can.editTasks,
                            }}
                        />
                    </TabsContent>
                    <TabsContent value="billing">
                        <Placeholder
                            icon={Banknote}
                            title="Billing arrives with time & billing"
                            phase="Time & Billing (M06)"
                        />
                    </TabsContent>
                    <TabsContent value="documents">
                        <Placeholder
                            icon={FolderOpen}
                            title="Documents arrive with the DMS"
                            phase="Documents (M08)"
                        />
                    </TabsContent>
                </Tabs>
            </div>
        </>
    );
}