import { TrendingUp } from "lucide-react";
import { type ScoringRules } from "~/lib/scoring-types";
import { ScoringPresetPicker } from "~/components/league/ScoringPresetPicker";
import { SettingsSection, SettingsStatusPill } from "./SettingsSection";

export function ScoringSection({
  active,
  canEditSports,
  season,
  scoringPreset,
  onScoringPresetChange,
  scoringRules,
  onScoringRulesChange,
}: {
  active: boolean;
  canEditSports: boolean;
  season: { status: string } | null;
  scoringPreset: "brackt" | "omnifantasy" | "custom";
  onScoringPresetChange: (v: "brackt" | "omnifantasy" | "custom") => void;
  scoringRules: ScoringRules;
  onScoringRulesChange: (v: ScoringRules) => void;
}) {
  return (
    <SettingsSection
      id="scoring"
      icon={TrendingUp}
      title="Scoring"
      description="Configure placement scoring for drafted sports. Scoring locks when the draft starts."
      status={<SettingsStatusPill tone={canEditSports ? "success" : "locked"}>{canEditSports ? "Editable" : "Locked"}</SettingsStatusPill>}
      className={active ? undefined : "hidden"}
    >
      <div className="rounded-lg border p-5 sm:p-6">
        <ScoringPresetPicker
          preset={scoringPreset}
          onPresetChange={onScoringPresetChange}
          rules={scoringRules}
          onRulesChange={onScoringRulesChange}
          disabled={!season || season.status !== "pre_draft"}
        />
        {(Object.entries(scoringRules) as [string, number][]).map(([k, v]) => (
          <input key={k} type="hidden" name={k} value={v} />
        ))}
      </div>
    </SettingsSection>
  );
}