import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { History, Settings, Loader2 } from "lucide-react";
import { useTranslation } from "react-i18next";
import type { SystemSettingsTabProps } from "../SystemSettingsTab";

// 通用设置 Tab：审计策略 + 系统信息 // Logan.Li
type GeneralSettingsTabProps = Pick<
  SystemSettingsTabProps,
  | "auditRetentionDays"
  | "setAuditRetentionDays"
  | "auditRecordAll"
  | "setAuditRecordAll"
  | "auditLoading"
  | "auditApplying"
  | "handleAuditApply"
  | "auditLastCleanupText"
  | "auditRetentionOptions"
>;

export function GeneralSettingsTab(props: GeneralSettingsTabProps) {
  const { t } = useTranslation();
  const {
    auditRetentionDays,
    setAuditRetentionDays,
    auditRecordAll,
    setAuditRecordAll,
    auditLoading,
    auditApplying,
    handleAuditApply,
    auditLastCleanupText,
    auditRetentionOptions,
  } = props;

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
      <Card className="dg-card">
        <CardHeader>
          <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
            <History className="h-5 w-5 dg-text-green" />
            {t("system.audit")}
          </CardTitle>
          <CardDescription className="dg-text-muted">
            {t("system.auditSettingsDesc")}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-[var(--dg-text-primary)]">
                {t("system.recordAllOps")}
              </p>
              <p className="text-xs dg-text-muted">
                {t("system.recordAllOpsDesc")}
              </p>
            </div>
            <Switch
              checked={auditRecordAll}
              onCheckedChange={setAuditRecordAll}
              disabled={auditLoading || auditApplying}
              className="data-[state=checked]:bg-blue-600"
            />
          </div>
          <div className="flex items-center justify-between gap-3">
            <div className="min-w-0">
              <p className="text-sm font-medium text-[var(--dg-text-primary)]">
                {t("system.logRetention")}
              </p>
              <p className="text-xs dg-text-muted">
                {t("system.logRetentionHint")}
              </p>
              {auditLastCleanupText && (
                <p className="text-xs dg-text-muted mt-1">
                  {auditLastCleanupText}
                </p>
              )}
            </div>
            <Select
              value={auditRetentionDays}
              onValueChange={setAuditRetentionDays}
              disabled={auditLoading || auditApplying}
            >
              <SelectTrigger className="w-28 h-8 dg-input shrink-0">
                <SelectValue />
              </SelectTrigger>
              <SelectContent className="dg-input">
                {auditRetentionOptions.map((d) => (
                  <SelectItem key={d} value={String(d)}>
                    {d}天
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>
          <div className="flex justify-end pt-1">
            <Button
              size="sm"
              className="dg-btn-primary"
              onClick={handleAuditApply}
              disabled={auditLoading || auditApplying}
            >
              {auditApplying ? (
                <>
                  <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" />
                  {t("system.applyingDot")}
                </>
              ) : (
                t("common.apply")
              )}
            </Button>
          </div>
        </CardContent>
      </Card>

      <Card className="dg-card">
        <CardHeader>
          <CardTitle className="text-[var(--dg-text-primary)] flex items-center gap-2">
            <Settings className="h-5 w-5 dg-text-purple" />
            {t("system.systemInfo")}
          </CardTitle>
          <CardDescription className="dg-text-muted">
            {t("system.systemInfoDesc")}
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="flex items-center justify-between">
            <span className="text-sm dg-text-secondary">
              {t("system.systemVersion")}
            </span>
            <span className="text-sm text-[var(--dg-text-primary)]">
              v2.5.1
            </span>
          </div>
          <div className="flex items-center justify-between">
            <span className="text-sm dg-text-secondary">
              {t("system.uptime")}
            </span>
            <span className="text-sm text-[var(--dg-text-primary)]">
              {t("system.uptimeValue")}
            </span>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}