"use client";

import { CheckCircle2, Clock, AlertCircle, TrendingUp } from "lucide-react";

interface Props {
  applicationStatus: string;
  score: number | null;
  eligibility: string | null;
}

export default function FarmerStatusBanner({ applicationStatus, score, eligibility }: Props) {
  const isCompleted = applicationStatus === "completed";
  const isSubmitted = applicationStatus === "submitted";

  const statusConfig = isCompleted
    ? {
        icon: CheckCircle2,
        iconColor: "text-[var(--green)]",
        bgColor: "bg-[var(--green)]/5",
        borderColor: "border-[var(--green)]/15",
        label: eligibility === "eligible" ? "Eligible" : eligibility === "conditional" ? "Conditionally Eligible" : "Reviewed",
        description: "Your application has been assessed and scored.",
      }
    : isSubmitted
      ? {
          icon: Clock,
          iconColor: "text-amber-600 dark:text-amber-400",
          bgColor: "bg-amber-50 dark:bg-amber-900/20",
          borderColor: "border-amber-200 dark:border-amber-700/30",
          label: "Under Review",
          description: "Your application is being reviewed by our assessment team.",
        }
      : {
          icon: AlertCircle,
          iconColor: "text-[var(--muted)]",
          bgColor: "bg-[var(--glass)]",
          borderColor: "border-[var(--border)]",
          label: "Processing",
          description: "Your application is being processed.",
        };

  const StatusIcon = statusConfig.icon;

  return (
    <div className={`rounded-2xl border ${statusConfig.borderColor} ${statusConfig.bgColor} p-5 sm:p-6`}>
      <div className="flex flex-col sm:flex-row sm:items-center gap-4">
        <div className="flex items-center gap-3 flex-1">
          <div className={`w-10 h-10 rounded-full flex items-center justify-center ${statusConfig.bgColor}`}>
            <StatusIcon className={`w-5 h-5 ${statusConfig.iconColor}`} />
          </div>
          <div>
            <p className="font-onest text-base font-semibold text-[var(--ink)]">
              {statusConfig.label}
            </p>
            <p className="font-inter text-sm text-[var(--muted)]">
              {statusConfig.description}
            </p>
          </div>
        </div>

        {isCompleted && score !== null && (
          <div className="flex items-center gap-2 px-4 py-2 rounded-xl border border-[var(--border)] bg-[var(--surface)]">
            <TrendingUp className="w-4 h-4 text-[var(--green)]" />
            <span className="font-inter text-sm text-[var(--muted)]">Score</span>
            <span className="font-onest text-lg font-bold text-[var(--ink)]">{score}</span>
            <span className="font-inter text-xs text-[var(--muted)]">/1000</span>
          </div>
        )}
      </div>
    </div>
  );
}