import { Form, Link } from "react-router";
import type { Route } from "./+types/admin.sports-seasons.$id.expected-values";
import { loader, action } from "./admin.sports-seasons.$id.expected-values.server";
import { Button } from "~/components/ui/button";
import { Input } from "~/components/ui/input";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "~/components/ui/table";
import { ArrowLeft, Save, Calculator } from "lucide-react";

export { loader, action };

export default function ExpectedValuesPage({ loaderData, actionData }: Route.ComponentProps) {
  const { sportsSeason, participants, existingEVs } = loaderData;

  return (
    <div className="container mx-auto p-6 space-y-6">
      <div className="flex items-center gap-4">
        <Link to={`/admin/sports-seasons/${sportsSeason.id}`}>
          <Button variant="ghost" size="sm">
            <ArrowLeft className="h-4 w-4 mr-2" />
            Back to Sports Season
          </Button>
        </Link>
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Calculator className="h-5 w-5" />
            Expected Values: {sportsSeason.sport.name} {sportsSeason.year}
          </CardTitle>
          <CardDescription>
            Manage probability distributions and expected values for participants
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">
          {actionData?.error && (
            <div className="p-4 bg-red-50 border border-red-200 rounded-md text-red-700">
              {actionData.error}
            </div>
          )}
          {actionData?.success && (
            <div className="p-4 bg-green-50 border border-green-200 rounded-md text-green-700">
              Successfully saved! Expected Value: {actionData.expectedValue?.toFixed(2)} points
            </div>
          )}

          <div className="text-sm text-gray-600 space-y-2">
            <p><strong>Default Scoring Rules (for EV calculation):</strong></p>
            <div className="grid grid-cols-4 gap-2">
              <span>1st: 100 pts</span>
              <span>2nd: 70 pts</span>
              <span>3rd: 50 pts</span>
              <span>4th: 40 pts</span>
              <span>5th: 25 pts</span>
              <span>6th: 25 pts</span>
              <span>7th: 15 pts</span>
              <span>8th: 15 pts</span>
            </div>
            <p className="text-xs text-gray-500 italic">
              Note: EVs will be recalculated with actual league scoring rules when used in fantasy leagues.
            </p>
          </div>

          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Participant</TableHead>
                <TableHead className="text-center">1st %</TableHead>
                <TableHead className="text-center">2nd %</TableHead>
                <TableHead className="text-center">3rd %</TableHead>
                <TableHead className="text-center">4th %</TableHead>
                <TableHead className="text-center">5th %</TableHead>
                <TableHead className="text-center">6th %</TableHead>
                <TableHead className="text-center">7th %</TableHead>
                <TableHead className="text-center">8th %</TableHead>
                <TableHead className="text-center">EV</TableHead>
                <TableHead></TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {participants.map((participant: { id: string; name: string }) => {
                const existingEV = existingEVs.get(participant.id);
                const formId = `form-${participant.id}`;

                return (
                  <TableRow key={participant.id}>
                    <TableCell className="font-medium">{participant.name}</TableCell>
                    <TableCell>
                      <Input
                        form={formId}
                        type="number"
                        name="probFirst"
                        defaultValue={existingEV ? (parseFloat(existingEV.probFirst) * 100).toFixed(2) : "12.5"}
                        step="0.01"
                        min="0"
                        max="100"
                        className="w-20 text-center"
                      />
                    </TableCell>
                    <TableCell>
                      <Input
                        form={formId}
                        type="number"
                        name="probSecond"
                        defaultValue={existingEV ? (parseFloat(existingEV.probSecond) * 100).toFixed(2) : "12.5"}
                        step="0.01"
                        min="0"
                        max="100"
                        className="w-20 text-center"
                      />
                    </TableCell>
                    <TableCell>
                      <Input
                        form={formId}
                        type="number"
                        name="probThird"
                        defaultValue={existingEV ? (parseFloat(existingEV.probThird) * 100).toFixed(2) : "12.5"}
                        step="0.01"
                        min="0"
                        max="100"
                        className="w-20 text-center"
                      />
                    </TableCell>
                    <TableCell>
                      <Input
                        form={formId}
                        type="number"
                        name="probFourth"
                        defaultValue={existingEV ? (parseFloat(existingEV.probFourth) * 100).toFixed(2) : "12.5"}
                        step="0.01"
                        min="0"
                        max="100"
                        className="w-20 text-center"
                      />
                    </TableCell>
                    <TableCell>
                      <Input
                        form={formId}
                        type="number"
                        name="probFifth"
                        defaultValue={existingEV ? (parseFloat(existingEV.probFifth) * 100).toFixed(2) : "12.5"}
                        step="0.01"
                        min="0"
                        max="100"
                        className="w-20 text-center"
                      />
                    </TableCell>
                    <TableCell>
                      <Input
                        form={formId}
                        type="number"
                        name="probSixth"
                        defaultValue={existingEV ? (parseFloat(existingEV.probSixth) * 100).toFixed(2) : "12.5"}
                        step="0.01"
                        min="0"
                        max="100"
                        className="w-20 text-center"
                      />
                    </TableCell>
                    <TableCell>
                      <Input
                        form={formId}
                        type="number"
                        name="probSeventh"
                        defaultValue={existingEV ? (parseFloat(existingEV.probSeventh) * 100).toFixed(2) : "12.5"}
                        step="0.01"
                        min="0"
                        max="100"
                        className="w-20 text-center"
                      />
                    </TableCell>
                    <TableCell>
                      <Input
                        form={formId}
                        type="number"
                        name="probEighth"
                        defaultValue={existingEV ? (parseFloat(existingEV.probEighth) * 100).toFixed(2) : "12.5"}
                        step="0.01"
                        min="0"
                        max="100"
                        className="w-20 text-center"
                      />
                    </TableCell>
                    <TableCell className="text-center font-semibold">
                      {existingEV ? parseFloat(existingEV.expectedValue).toFixed(2) : "-"}
                    </TableCell>
                    <TableCell>
                      <Form method="post" id={formId}>
                        <input type="hidden" name="participantId" value={participant.id} />
                        <input type="hidden" name="source" value="manual" />
                        <Button type="submit" size="sm">
                          <Save className="h-4 w-4 mr-1" />
                          Save
                        </Button>
                      </Form>
                    </TableCell>
                  </TableRow>
                );
              })}
            </TableBody>
          </Table>

          {participants.length === 0 && (
            <p className="text-center text-gray-500 py-8">
              No participants found. Please add participants to this sports season first.
            </p>
          )}
        </CardContent>
      </Card>
    </div>
  );
}