import Link from "next/link";
import { PageHeader } from "@/components/layout/page-header";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { UploadClient } from "./upload-client";

export default function BulkUploadPage() {
  return (
    <div>
      <PageHeader
        title="Bulk Data Upload"
        breadcrumb="Course Finder / Bulk Upload"
        action={
          <Button asChild variant="outline">
            <Link href="/course-finder/sample-file">Get Sample File</Link>
          </Button>
        }
      />

      <div className="space-y-6">
        <Card>
          <CardHeader>
            <CardTitle>How it works</CardTitle>
            <CardDescription>
              Import many courses at once from a spreadsheet.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-2 text-sm text-muted-foreground">
            <p>
              Upload a <strong>.csv</strong>, <strong>.xlsx</strong>, or{" "}
              <strong>.xls</strong> file. The first sheet is used. Expected
              column headers:
            </p>
            <p className="font-mono text-xs text-foreground">
              title, institute, country, state, level, application_fee,
              yearly_tuition_fee, currency, duration_label, intake_months,
              intake_year, requirements, tags
            </p>
            <ul className="list-inside list-disc space-y-1">
              <li>
                <strong>title</strong> is required — rows without one are
                skipped.
              </li>
              <li>
                <strong>institute</strong> and <strong>country</strong> are
                matched by name and created automatically if missing.
              </li>
              <li>
                <strong>tags</strong> should be comma-separated (e.g.{" "}
                <code>STEM, Scholarship</code>).
              </li>
              <li>
                Each row is processed independently — one bad row will not abort
                the rest.
              </li>
            </ul>
            <p>
              Not sure about the format?{" "}
              <Link
                href="/course-finder/sample-file"
                className="font-medium text-brand-blue underline"
              >
                Download the sample file
              </Link>
              .
            </p>
          </CardContent>
        </Card>

        <UploadClient />
      </div>
    </div>
  );
}