"use client"

import Link from "next/link"
import { AutomationTabMasonry } from "@/components/gmail/settings/automation/automation-tab-masonry"
import { AdminSettingsCard } from "@/components/admin/settings/admin-settings-card"
import { FieldGroup } from "@/components/admin/settings/field-group"
import { OrgSettingsSection } from "@/components/admin/settings/org-settings-form"
import { useOrgSettingsStore } from "@/lib/admin-settings/org-settings-store"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function QuotasSection() {
  const storageQuotas = useOrgSettingsStore((s) => s.storageQuotas)
  const setStorageQuotas = useOrgSettingsStore((s) => s.setStorageQuotas)
  const usageQuotas = useOrgSettingsStore((s) => s.usageQuotas)
  const setUsageQuotas = useOrgSettingsStore((s) => s.setUsageQuotas)

  return (
    <OrgSettingsSection
      title="Quotas"
      description="Limites de stockage et d'usage appliquées par défaut aux comptes de l'organisation."
      policySection={["storage_quotas", "usage_quotas"]}
    >
      <AutomationTabMasonry columns={2}>
        <AdminSettingsCard
          title="Stockage par défaut"
          description="Mail, drive et photos. Les quotas individuels se gèrent depuis la fiche utilisateur."
        >
          <div className="grid gap-4 sm:grid-cols-3">
            <QuotaInput
              label="Mail (Go)"
              value={storageQuotas.default_mail_gib}
              onChange={(v) => setStorageQuotas({ default_mail_gib: v })}
            />
            <QuotaInput
              label="Drive (Go)"
              value={storageQuotas.default_drive_gib}
              onChange={(v) => setStorageQuotas({ default_drive_gib: v })}
            />
            <QuotaInput
              label="Photos (Go)"
              value={storageQuotas.default_photos_gib}
              onChange={(v) => setStorageQuotas({ default_photos_gib: v })}
            />
          </div>
          <FieldGroup>
            <Label>Seuil d&apos;alerte (%)</Label>
            <Input
              className="h-9 max-w-xs"
              type="number"
              min={50}
              max={100}
              value={storageQuotas.warn_threshold_pct}
              onChange={(e) =>
                setStorageQuotas({ warn_threshold_pct: Number(e.target.value) || 90 })
              }
            />
          </FieldGroup>
          <Button asChild variant="outline" size="sm">
            <Link href="/admin/settings/users">Gérer les quotas par utilisateur</Link>
          </Button>
        </AdminSettingsCard>

        <AdminSettingsCard
          title="Intelligence artificielle"
          description="Requêtes LLM et tokens consommés par mois."
        >
          <div className="grid gap-4 sm:grid-cols-2">
            <FieldGroup>
              <Label>Requêtes LLM / jour</Label>
              <Input
                className="h-9"
                type="number"
                min={0}
                value={usageQuotas.llm_requests_per_day}
                onChange={(e) =>
                  setUsageQuotas({ llm_requests_per_day: Number(e.target.value) || 0 })
                }
              />
            </FieldGroup>
            <FieldGroup>
              <Label>Tokens LLM / mois</Label>
              <Input
                className="h-9"
                type="number"
                min={0}
                value={usageQuotas.llm_tokens_per_month}
                onChange={(e) =>
                  setUsageQuotas({ llm_tokens_per_month: Number(e.target.value) || 0 })
                }
              />
            </FieldGroup>
          </div>
        </AdminSettingsCard>

        <AdminSettingsCard
          title="Recherche et automatisations"
          description="Recherche web, tokens API et webhooks par utilisateur."
        >
          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-3">
            <FieldGroup>
              <Label>Recherches web / jour</Label>
              <Input
                className="h-9"
                type="number"
                min={0}
                value={usageQuotas.search_requests_per_day}
                onChange={(e) =>
                  setUsageQuotas({ search_requests_per_day: Number(e.target.value) || 0 })
                }
              />
            </FieldGroup>
            <FieldGroup>
              <Label>Tokens API max / utilisateur</Label>
              <Input
                className="h-9"
                type="number"
                min={0}
                value={usageQuotas.max_api_tokens_per_user}
                onChange={(e) =>
                  setUsageQuotas({ max_api_tokens_per_user: Number(e.target.value) || 0 })
                }
              />
            </FieldGroup>
            <FieldGroup>
              <Label>Webhooks max / utilisateur</Label>
              <Input
                className="h-9"
                type="number"
                min={0}
                value={usageQuotas.max_webhooks_per_user}
                onChange={(e) =>
                  setUsageQuotas({ max_webhooks_per_user: Number(e.target.value) || 0 })
                }
              />
            </FieldGroup>
          </div>
        </AdminSettingsCard>
      </AutomationTabMasonry>
    </OrgSettingsSection>
  )
}

function QuotaInput({
  label,
  value,
  onChange,
}: {
  label: string
  value: number
  onChange: (v: number) => void
}) {
  return (
    <FieldGroup>
      <Label>{label}</Label>
      <Input
        className="h-9"
        type="number"
        min={0}
        step={0.5}
        value={value}
        onChange={(e) => onChange(Number(e.target.value) || 0)}
      />
    </FieldGroup>
  )
}