"use client";

import { useState } from "react";
import Link from "next/link";
import {
    Card,
    CardHeader,
    CardTitle,
    CardContent,
    CardFooter
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Users, Settings, Waypoints, Combine } from "lucide-react";
import { RoleItem } from "@server/routers/user";

interface OrgStat {
    label: string;
    value: number;
    icon: React.ReactNode;
}

type OrganizationLandingCardProps = {
    overview: {
        orgName: string;
        stats: {
            sites: number;
            resources: number;
            users: number;
        };
        roles: RoleItem[];
        isAdmin: boolean;
        isOwner: boolean;
        orgId: string;
    };
};

export default function OrganizationLandingCard(
    props: OrganizationLandingCardProps
) {
    const [orgData] = useState(props);

    const orgStats: OrgStat[] = [
        {
            label: "Sites",
            value: orgData.overview.stats.sites,
            icon: <Combine className="h-6 w-6" />
        },
        {
            label: "Resources",
            value: orgData.overview.stats.resources,
            icon: <Waypoints className="h-6 w-6" />
        },
        {
            label: "Users",
            value: orgData.overview.stats.users,
            icon: <Users className="h-6 w-6" />
        }
    ];

    return (
        <Card>
            <CardHeader>
                <CardTitle className="flex items-center text-3xl font-bold">
                    {orgData.overview.orgName}
                </CardTitle>
            </CardHeader>
            <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
                    {orgStats.map((stat, index) => (
                        <div
                            key={index}
                            className="flex flex-col items-center p-4 bg-secondary rounded-lg"
                        >
                            {stat.icon}
                            <span className="mt-2 text-2xl font-bold">
                                {stat.value}
                            </span>
                            <span className="text-sm text-muted-foreground">
                                {stat.label}
                            </span>
                        </div>
                    ))}
                </div>
                <div className="text-center text-lg">
                    Your role
                    {orgData.overview.isOwner ||
                    orgData.overview.isAdmin ||
                    orgData.overview.roles.length === 1
                        ? ""
                        : "s"}
                    :{" "}
                    <span className="font-semibold">
                        {orgData.overview.isOwner
                            ? "Owner"
                            : orgData.overview.isAdmin
                              ? "Admin"
                              : orgData.overview.roles
                                    .map((r) => r.name)
                                    .join(", ")}
                    </span>
                </div>
            </CardContent>
            {orgData.overview.isAdmin && (
                <CardFooter className="flex justify-center">
                    <Link href={`/${orgData.overview.orgId}/settings`}>
                        <Button size="lg" className="w-full md:w-auto">
                            <Settings className="mr-2 h-4 w-4" />
                            Organization Settings
                        </Button>
                    </Link>
                </CardFooter>
            )}
        </Card>
    );
}