'use client'

import { InvoiceImportDefaultsCard } from '@/app/(organization)/[org]/settings/_components/invoice-import-defaults-card'
import type { projectsService } from '@/app/api/projects/service'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import type { CustomFieldDefinition } from '@/lib/custom-fields'
import { BillingDetailsCard } from './_components/billing-details-card'
import { ClientApprovalCard } from './_components/client-approval-card'
import { ProjectCustomFieldsCard } from './_components/custom-fields-card'
import { DangerZoneCard } from './_components/danger-zone-card'
import { GeneralCard } from './_components/general-card'
import { InvoiceNumberingCard } from './_components/invoice-numbering-card'
import { TimesheetDefaultsCard } from './_components/timesheet-defaults-card'

export function ProjectSettingsPageClient({
  project,
  organizationId,
  orgSlug,
  canDelete,
  settings,
  projectCustomFields,
  orgCustomFields,
}: {
  project: { id: string; name: string; slug: string; dueDate: Date | null }
  organizationId: string
  orgSlug: string
  canDelete: boolean
  settings: Awaited<ReturnType<typeof projectsService.getSettings>>
  projectCustomFields: CustomFieldDefinition[]
  orgCustomFields: CustomFieldDefinition[]
}) {
  return (
    <div className='w-full'>
      <div className='mb-6'>
        <h1 className='font-semibold text-2xl'>Settings</h1>
      </div>

      <Tabs defaultValue='general'>
        <TabsList variant='line'>
          <TabsTrigger value='general'>General</TabsTrigger>
          <TabsTrigger value='timesheet'>Timesheet</TabsTrigger>
          <TabsTrigger value='invoicing'>Invoices</TabsTrigger>
          <TabsTrigger value='client'>Approval</TabsTrigger>
          {canDelete && <TabsTrigger value='danger'>Danger Zone</TabsTrigger>}
        </TabsList>

        <TabsContent className='space-y-6' value='general'>
          <GeneralCard
            organizationId={organizationId}
            orgSlug={orgSlug}
            project={project}
          />
        </TabsContent>

        <TabsContent className='space-y-6' value='timesheet'>
          <TimesheetDefaultsCard
            organizationId={organizationId}
            projectId={project.id}
            settings={settings}
          />
          <ProjectCustomFieldsCard
            organizationId={organizationId}
            orgFields={orgCustomFields}
            projectFields={projectCustomFields}
            projectId={project.id}
          />
        </TabsContent>

        <TabsContent value='client'>
          <ClientApprovalCard
            organizationId={organizationId}
            projectId={project.id}
            settings={settings}
          />
        </TabsContent>

        <TabsContent className='space-y-6' value='invoicing'>
          <InvoiceNumberingCard
            organizationId={organizationId}
            projectId={project.id}
            settings={settings}
          />
          <InvoiceImportDefaultsCard
            invoiceTimeUnit={settings.invoiceTimeUnit}
            organizationId={organizationId}
            projectId={project.id}
          />
          <BillingDetailsCard
            organizationId={organizationId}
            projectId={project.id}
            settings={settings}
          />
        </TabsContent>

        {canDelete && (
          <TabsContent value='danger'>
            <DangerZoneCard
              organizationId={organizationId}
              orgSlug={orgSlug}
              project={project}
            />
          </TabsContent>
        )}
      </Tabs>
    </div>
  )
}