"use client"

import { OrgSettingsSection } from "@/components/admin/settings/org-settings-form"
import { useOrgSettingsStore } from "@/lib/admin-settings/org-settings-store"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export function UsageQuotasSection() {
  const usageQuotas = useOrgSettingsStore((s) => s.usageQuotas)
  const setUsageQuotas = useOrgSettingsStore((s) => s.setUsageQuotas)

  return (
    <OrgSettingsSection
      title="Quotas d'usage"
      description="Limites d'utilisation des services IA, recherche web et automatisations par utilisateur."
      policySection="usage_quotas"
    >
      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-sm font-medium">Intelligence artificielle</CardTitle>
          <CardDescription>Requêtes LLM et tokens consommés par mois.</CardDescription>
        </CardHeader>
        <CardContent className="grid gap-4 sm:grid-cols-2">
          <div>
            <Label>Requêtes LLM / jour</Label>
            <Input
              className="mt-1 h-9"
              type="number"
              min={0}
              value={usageQuotas.llm_requests_per_day}
              onChange={(e) =>
                setUsageQuotas({ llm_requests_per_day: Number(e.target.value) || 0 })
              }
            />
          </div>
          <div>
            <Label>Tokens LLM / mois</Label>
            <Input
              className="mt-1 h-9"
              type="number"
              min={0}
              value={usageQuotas.llm_tokens_per_month}
              onChange={(e) =>
                setUsageQuotas({ llm_tokens_per_month: Number(e.target.value) || 0 })
              }
            />
          </div>
        </CardContent>
      </Card>

      <Card>
        <CardHeader className="pb-3">
          <CardTitle className="text-sm font-medium">Recherche et automatisations</CardTitle>
        </CardHeader>
        <CardContent className="grid gap-4 sm:grid-cols-3">
          <div>
            <Label>Recherches web / jour</Label>
            <Input
              className="mt-1 h-9"
              type="number"
              min={0}
              value={usageQuotas.search_requests_per_day}
              onChange={(e) =>
                setUsageQuotas({ search_requests_per_day: Number(e.target.value) || 0 })
              }
            />
          </div>
          <div>
            <Label>Tokens API max / utilisateur</Label>
            <Input
              className="mt-1 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 })
              }
            />
          </div>
          <div>
            <Label>Webhooks max / utilisateur</Label>
            <Input
              className="mt-1 h-9"
              type="number"
              min={0}
              value={usageQuotas.max_webhooks_per_user}
              onChange={(e) =>
                setUsageQuotas({ max_webhooks_per_user: Number(e.target.value) || 0 })
              }
            />
          </div>
        </CardContent>
      </Card>
    </OrgSettingsSection>
  )
}