import { Label } from "~/components/ui/label";
import { Input } from "~/components/ui/input";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import { DEFAULT_SCORING_RULES, type ScoringRules } from "~/lib/scoring-types";

interface ScoringRulesEditorProps {
  scoringRules?: Partial<ScoringRules>;
  disabled?: boolean;
}

export function ScoringRulesEditor({ scoringRules, disabled = false }: ScoringRulesEditorProps) {
  const rules = {
    ...DEFAULT_SCORING_RULES,
    ...scoringRules,
  };

  const placementLabels = [
    { key: "pointsFor1st", label: "1st Place", emoji: "🥇" },
    { key: "pointsFor2nd", label: "2nd Place", emoji: "🥈" },
    { key: "pointsFor3rd", label: "3rd Place", emoji: "🥉" },
    { key: "pointsFor4th", label: "4th Place", emoji: "4️⃣" },
    { key: "pointsFor5th", label: "5th Place", emoji: "5️⃣" },
    { key: "pointsFor6th", label: "6th Place", emoji: "6️⃣" },
    { key: "pointsFor7th", label: "7th Place", emoji: "7️⃣" },
    { key: "pointsFor8th", label: "8th Place", emoji: "8️⃣" },
  ] as const;

  return (
    <Card>
      <CardHeader>
        <CardTitle>Scoring Rules</CardTitle>
        <CardDescription>
          {disabled
            ? "Scoring rules cannot be modified after the draft has started"
            : "Set the fantasy points awarded for each final placement (1st through 8th)"}
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          <div className="bg-muted/50 border border-muted-foreground/20 rounded-md p-3">
            <p className="text-sm text-muted-foreground">
              <strong>How it works:</strong> At the end of each sport's season, participants will
              be ranked 1st through 8th based on their performance. These point values will be
              awarded to teams that drafted those participants.
            </p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            {placementLabels.map(({ key, label, emoji }) => (
              <div key={key} className="space-y-2">
                <Label htmlFor={key} className="flex items-center gap-2">
                  <span className="text-lg">{emoji}</span>
                  <span>{label}</span>
                </Label>
                <Input
                  id={key}
                  name={key}
                  type="number"
                  min="0"
                  max="1000"
                  step="1"
                  defaultValue={rules[key]}
                  disabled={disabled}
                  required
                  className="text-base font-semibold"
                />
              </div>
            ))}
          </div>

          <div className="bg-electric/10 border border-electric/20 rounded-md p-3">
            <p className="text-sm text-electric">
              <strong>💡 Tip:</strong> The default scoring rewards winning heavily (100 pts for 1st)
              but also values consistency (25 pts for 5th/6th). Customize these values to fit your
              league's strategy preferences.
            </p>
          </div>

          <div className="border-t pt-4">
            <p className="text-xs text-muted-foreground">
              Preview: 1st={rules.pointsFor1st} • 2nd={rules.pointsFor2nd} • 3rd={rules.pointsFor3rd} •
              4th={rules.pointsFor4th} • 5th={rules.pointsFor5th} • 6th={rules.pointsFor6th} •
              7th={rules.pointsFor7th} • 8th={rules.pointsFor8th} pts
            </p>
          </div>
        </div>
      </CardContent>
    </Card>
  );
}