import { useState } from "react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Users, Home as HomeIcon, Briefcase, BookOpen } from "lucide-react";
import BulkOwnerUpdatesTab from "./bulk-updates/BulkOwnerUpdatesTab";
import BulkUnitUpdatesTab from "./bulk-updates/BulkUnitUpdatesTab";
import BulkVendorUpdatesTab from "./bulk-updates/BulkVendorUpdatesTab";
import BulkChartOfAccountsUpdatesTab from "./bulk-updates/BulkChartOfAccountsUpdatesTab";

export default function BulkUpdatesPage() {
  const [tab, setTab] = useState("owners");

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold">Bulk Updates</h1>
        <p className="text-sm text-muted-foreground">
          Update existing owner, unit, vendor, or chart of accounts records in bulk from a spreadsheet without creating new records.
        </p>
      </div>

      <Tabs value={tab} onValueChange={setTab} className="w-full">
        <TabsList>
          <TabsTrigger value="owners" className="gap-2">
            <Users className="h-4 w-4" /> Owners
          </TabsTrigger>
          <TabsTrigger value="units" className="gap-2">
            <HomeIcon className="h-4 w-4" /> Units
          </TabsTrigger>
          <TabsTrigger value="vendors" className="gap-2">
            <Briefcase className="h-4 w-4" /> Vendors
          </TabsTrigger>
          <TabsTrigger value="coa" className="gap-2">
            <BookOpen className="h-4 w-4" /> Chart of Accounts
          </TabsTrigger>
        </TabsList>

        <TabsContent value="owners" className="mt-6">
          <BulkOwnerUpdatesTab />
        </TabsContent>
        <TabsContent value="units" className="mt-6">
          <BulkUnitUpdatesTab />
        </TabsContent>
        <TabsContent value="vendors" className="mt-6">
          <BulkVendorUpdatesTab />
        </TabsContent>
        <TabsContent value="coa" className="mt-6">
          <BulkChartOfAccountsUpdatesTab />
        </TabsContent>
      </Tabs>
    </div>
  );
}
