import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { protectFinancialRoute } from "~/lib/auth-middleware.server";
import { DashboardLayout } from "~/components/layout/DashboardLayout";
import { Text, Card, CardHeader, CardBody } from "~/components/ui";

export const meta: MetaFunction = () => {
  return [
    { title: "الإدارة المالية - نظام إدارة صيانة السيارات" },
    { name: "description", content: "إدارة الأمور المالية والمصروفات" },
  ];
};

export async function loader({ request }: LoaderFunctionArgs) {
  const user = await protectFinancialRoute(request);
  return json({ user });
}

export default function Financial() {
  const { user } = useLoaderData<typeof loader>();

  return (
    <DashboardLayout user={user}>
      <div className="space-y-6">
        <div>
          <Text as="h1" size="2xl" weight="bold" className="text-gray-900">
            الإدارة المالية
          </Text>
          <Text color="secondary" className="mt-2">
            إدارة الإيرادات والمصروفات والتقارير المالية
          </Text>
        </div>

        <Card>
          <CardHeader>
            <Text weight="medium">التقارير المالية</Text>
          </CardHeader>
          <CardBody>
            <div className="text-center py-12">
              <svg
                className="mx-auto h-12 w-12 text-gray-400 mb-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"
                />
              </svg>
              <Text size="lg" weight="medium" className="mb-2">
                لا توجد بيانات مالية
              </Text>
              <Text color="secondary">
                سيتم إضافة وظائف الإدارة المالية في المهام القادمة
              </Text>
            </div>
          </CardBody>
        </Card>
      </div>
    </DashboardLayout>
  );
}