import { Head, Link, router } from '@inertiajs/react';
import { Button } from '@/components/ui/button';
import type { Company, PaginatedData } from '@/types';

type Props = {
    companies: PaginatedData<Company>;
};

export default function CompaniesIndex({ companies }: Props) {
    return (
        <>
            <Head title="Companies" />
            <div className="space-y-4 p-4">
                <div className="flex items-center justify-between">
                    <h1 className="text-2xl font-bold">Companies</h1>
                    <Button asChild>
                        <Link href="/admin/companies/create">Add Company</Link>
                    </Button>
                </div>

                <div className="overflow-hidden rounded-lg border">
                    <table className="w-full text-sm">
                        <thead className="bg-muted/50">
                            <tr>
                                <th className="p-3 text-left font-medium">
                                    Name
                                </th>
                                <th className="p-3 text-left font-medium">
                                    Code
                                </th>
                                <th className="p-3 text-left font-medium">
                                    Status
                                </th>
                                <th className="p-3 text-left font-medium">
                                    Actions
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            {companies.data.map((company) => (
                                <tr key={company.id} className="border-t">
                                    <td className="p-3">{company.name}</td>
                                    <td className="p-3 font-mono text-xs">
                                        {company.code}
                                    </td>
                                    <td className="p-3">
                                        <span
                                            className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${company.is_active ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}
                                        >
                                            {company.is_active
                                                ? 'Active'
                                                : 'Inactive'}
                                        </span>
                                    </td>
                                    <td className="p-3">
                                        <Button
                                            variant="outline"
                                            size="sm"
                                            asChild
                                        >
                                            <Link
                                                href={`/admin/companies/${company.id}/edit`}
                                            >
                                                Edit
                                            </Link>
                                        </Button>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>
        </>
    );
}
