import { router } from "@inertiajs/react";
import Shell from "../components/Shell";
import { Button, Empty, Field, Heading, Panel, Table } from "../components/ui";
import type { Course, Options } from "../types";
interface Props {
    catalog: Record<string, string>;
    type: string;
    report: { title: string; columns: string[]; rows: (string | number)[][] };
    options: Options;
    courses: Course[];
    filters: Record<string, string>;
}
export default function Reports({
    catalog,
    type,
    report,
    options,
    courses,
    filters,
}: Props) {
    const params = new URLSearchParams({ ...filters, type });
    return (
        <Shell title="Reports">
            <Heading
                title="Reports"
                description="Current records within your assigned responsibilities and scope."
                action={
                    <div className="actions">
                        <a
                            className="button secondary"
                            href={`/reports/export?${params}`}
                        >
                            Download CSV
                        </a>
                        <Button icon="file" onClick={() => window.print()}>
                            Print report
                        </Button>
                    </div>
                }
            />
            <Panel>
                <form
                    className="toolbar no-print"
                    onSubmit={(e) => {
                        e.preventDefault();
                        router.get(
                            "/reports",
                            Object.fromEntries(
                                new FormData(e.currentTarget).entries(),
                            ) as Record<string, string>,
                        );
                    }}
                >
                    <Field label="Report">
                        <select name="type" defaultValue={type}>
                            {Object.entries(catalog).map(([key, label]) => (
                                <option key={key} value={key}>
                                    {label}
                                </option>
                            ))}
                        </select>
                    </Field>
                    <Field label="Branch">
                        <select
                            name="branch"
                            defaultValue={filters.branch ?? ""}
                        >
                            <option value="">All permitted branches</option>
                            {options.branches.map((b) => (
                                <option key={b.id} value={b.id}>
                                    {b.name}
                                </option>
                            ))}
                        </select>
                    </Field>
                    <Field label="Academic period">
                        <select
                            name="period"
                            defaultValue={filters.period ?? ""}
                        >
                            <option value="">All periods</option>
                            {options.periods.map((p) => (
                                <option key={p.id} value={p.id}>
                                    {p.name}
                                </option>
                            ))}
                        </select>
                    </Field>
                    <Field label="Class (academic reports)">
                        <select
                            name="course"
                            defaultValue={filters.course ?? ""}
                        >
                            <option value="">All permitted classes</option>
                            {courses.map((c) => (
                                <option key={c.id} value={c.id}>
                                    {c.subject.code} · {c.section} ·{" "}
                                    {c.period.name}
                                </option>
                            ))}
                        </select>
                    </Field>
                    <Button variant="secondary" icon="filter">
                        Apply filters
                    </Button>
                </form>
                <div className="report-summary">
                    <h2>{report.title}</h2>
                    <p>
                        {report.rows.length} record(s) ·{" "}
                        {filters.branch
                            ? options.branches.find(
                                  (b) => String(b.id) === filters.branch,
                              )?.name
                            : "All permitted branches"}{" "}
                        ·{" "}
                        {filters.period
                            ? options.periods.find(
                                  (p) => String(p.id) === filters.period,
                              )?.name
                            : "All academic periods"}
                    </p>
                </div>
                {report.rows.length ? (
                    <Table columns={report.columns}>
                        {report.rows.map((row, i) => (
                            <tr key={i}>
                                {row.map((value, j) => (
                                    <td key={j}>{value}</td>
                                ))}
                            </tr>
                        ))}
                    </Table>
                ) : (
                    <Empty title="No report records for these filters">
                        Try another period, branch or report.
                    </Empty>
                )}
            </Panel>
        </Shell>
    );
}