"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 { Switch } from "@/components/ui/switch"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"

export function MailingSection() {
  const mailing = useOrgSettingsStore((s) => s.mailing)
  const setMailing = useOrgSettingsStore((s) => s.setMailing)

  return (
    <OrgSettingsSection
      title="Mailing unifié"
      description="SMTP pour les notifications suite : partages de fichiers, mentions, invitations."
      policySection="mailing"
    >
      <Card>
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between gap-4">
            <div>
              <CardTitle className="text-sm font-medium">Relais SMTP</CardTitle>
              <CardDescription>
                Ex. « Marie vous a partagé un fichier » — distinct des comptes mail utilisateur.
              </CardDescription>
            </div>
            <Switch
              checked={mailing.enabled}
              onCheckedChange={(enabled) => setMailing({ enabled })}
            />
          </div>
        </CardHeader>
        <CardContent className="grid gap-4 sm:grid-cols-2">
          <div>
            <Label>Hôte SMTP</Label>
            <Input
              className="mt-1 h-9"
              value={mailing.smtp_host}
              onChange={(e) => setMailing({ smtp_host: e.target.value })}
              placeholder="smtp.example.com"
            />
          </div>
          <div>
            <Label>Port</Label>
            <Input
              className="mt-1 h-9"
              type="number"
              value={mailing.smtp_port}
              onChange={(e) => setMailing({ smtp_port: Number(e.target.value) || 587 })}
            />
          </div>
          <div>
            <Label>Utilisateur</Label>
            <Input
              className="mt-1 h-9"
              value={mailing.smtp_user}
              onChange={(e) => setMailing({ smtp_user: e.target.value })}
            />
          </div>
          <div>
            <Label>Mot de passe</Label>
            <Input
              className="mt-1 h-9"
              type="password"
              value={mailing.smtp_password}
              onChange={(e) => setMailing({ smtp_password: e.target.value })}
            />
          </div>
          <div>
            <Label>Chiffrement</Label>
            <Select
              value={mailing.tls_mode}
              onValueChange={(tls_mode) =>
                setMailing({ tls_mode: tls_mode as typeof mailing.tls_mode })
              }
            >
              <SelectTrigger className="mt-1 h-9">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="starttls">STARTTLS</SelectItem>
                <SelectItem value="ssl">SSL/TLS</SelectItem>
                <SelectItem value="none">Aucun</SelectItem>
              </SelectContent>
            </Select>
          </div>
          <div>
            <Label>Adresse d&apos;expédition</Label>
            <Input
              className="mt-1 h-9"
              type="email"
              value={mailing.from_email}
              onChange={(e) => setMailing({ from_email: e.target.value })}
            />
          </div>
          <div>
            <Label>Nom affiché</Label>
            <Input
              className="mt-1 h-9"
              value={mailing.from_name}
              onChange={(e) => setMailing({ from_name: e.target.value })}
            />
          </div>
          <div className="sm:col-span-2">
            <Label>Reply-To (optionnel)</Label>
            <Input
              className="mt-1 h-9"
              type="email"
              value={mailing.reply_to ?? ""}
              onChange={(e) => setMailing({ reply_to: e.target.value })}
            />
          </div>
        </CardContent>
      </Card>
    </OrgSettingsSection>
  )
}