"use client";

import { DashboardHeader } from "@/components/dashboard-header";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { mockApplications, mockJobs } from "@/lib/mock-data";
import {
  Search,
  Calendar,
  Building2,
  MapPin,
  ExternalLink,
} from "lucide-react";
import { useState } from "react";
import Link from "next/link";

const statusMap = {
  pending: { label: "Pendente", variant: "secondary" as const },
  reviewing: { label: "Em análise", variant: "default" as const },
  interview: { label: "Entrevista", variant: "default" as const },
  rejected: { label: "Rejeitado", variant: "destructive" as const },
  accepted: { label: "Aceito", variant: "default" as const },
};

export default function CandidaturasPage() {
  const [searchTerm, setSearchTerm] = useState("");

  const filteredApplications = mockApplications.filter(
    (app) =>
      app.jobTitle.toLowerCase().includes(searchTerm.toLowerCase()) ||
      app.company.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div className="min-h-screen bg-background">
      <DashboardHeader />

      <main className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="max-w-5xl mx-auto space-y-6">
          <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
            <div>
              <h1 className="text-3xl font-bold text-foreground mb-2">
                Minhas Candidaturas
              </h1>
              <p className="text-muted-foreground">
                Acompanhe o status das suas candidaturas
              </p>
            </div>
            <div className="relative w-full md:w-64">
              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
              <Input
                placeholder="Buscar candidaturas..."
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="pl-10"
              />
            </div>
          </div>

          {/* Stats */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
            <Card>
              <CardContent className="pt-6">
                <div className="text-2xl font-bold text-foreground">
                  {mockApplications.length}
                </div>
                <p className="text-sm text-muted-foreground">Total</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6">
                <div className="text-2xl font-bold text-foreground">
                  {
                    mockApplications.filter((a) => a.status === "reviewing")
                      .length
                  }
                </div>
                <p className="text-sm text-muted-foreground">Em análise</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6">
                <div className="text-2xl font-bold text-foreground">
                  {
                    mockApplications.filter((a) => a.status === "interview")
                      .length
                  }
                </div>
                <p className="text-sm text-muted-foreground">Entrevistas</p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6">
                <div className="text-2xl font-bold text-foreground">
                  {
                    mockApplications.filter((a) => a.status === "pending")
                      .length
                  }
                </div>
                <p className="text-sm text-muted-foreground">Pendentes</p>
              </CardContent>
            </Card>
          </div>

          {/* Applications List */}
          <div className="space-y-4">
            {filteredApplications.length > 0 ? (
              filteredApplications.map((application) => {
                const job = mockJobs.find((j) => j.id === application.jobId);
                const status = statusMap[application.status];

                return (
                  <Card key={application.id}>
                    <CardHeader>
                      <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
                        <div className="flex-1">
                          <div className="flex items-start gap-3">
                            <div className="flex-1">
                              <CardTitle className="text-xl mb-1">
                                {application.jobTitle}
                              </CardTitle>
                              <CardDescription className="flex items-center gap-2">
                                <Building2 className="h-4 w-4" />
                                {application.company}
                              </CardDescription>
                            </div>
                            <Badge variant={status.variant}>
                              {status.label}
                            </Badge>
                          </div>
                        </div>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                        <div className="flex flex-wrap gap-4 text-sm text-muted-foreground">
                          <div className="flex items-center gap-2">
                            <Calendar className="h-4 w-4" />
                            Candidatura:{" "}
                            {new Date(application.appliedAt).toLocaleDateString(
                              "pt-BR"
                            )}
                          </div>
                          {job && (
                            <>
                              <div className="flex items-center gap-2">
                                <MapPin className="h-4 w-4" />
                                {job.location}
                              </div>
                            </>
                          )}
                        </div>
                        <Link href={`/vagas/${application.jobId}`}>
                          <Button variant="outline" size="sm">
                            Ver vaga
                            <ExternalLink className="h-4 w-4 ml-2" />
                          </Button>
                        </Link>
                      </div>
                    </CardContent>
                  </Card>
                );
              })
            ) : (
              <Card>
                <CardContent className="py-12 text-center">
                  <p className="text-muted-foreground">
                    Nenhuma candidatura encontrada.
                  </p>
                </CardContent>
              </Card>
            )}
          </div>
        </div>
      </main>
    </div>
  );
}