import {
  CalendarClock,
  FileText,
  Mail,
  Phone,
} from "lucide-react";

import OmsorgCard from "../../components/OmsorgCard";
import OmsorgBadge from "../../components/ui/OmsorgBadge";

const contracts = [
  {
    id: 1,
    facility: "AWO Seniorenzentrum",
    employee: "Pascal Galliot",
    endDate: "25.07.2026",
    daysRemaining: 7,
    urgency: "danger",
    phone: "07231 123456",
    email: "disposition@awo-pforzheim.de",
  },
  {
    id: 2,
    facility: "Luisenschwestern",
    employee: "Carina Vetter",
    endDate: "05.08.2026",
    daysRemaining: 18,
    urgency: "warning",
    phone: "07231 234567",
    email: "pflege@luisenschwestern.de",
  },
  {
    id: 3,
    facility: "ASB Pforzheim",
    employee: "Dilara Anders",
    endDate: "22.08.2026",
    daysRemaining: 35,
    urgency: "info",
    phone: "07231 345678",
    email: "personal@asb-pforzheim.de",
  },
];

function getUrgencyLabel(contract) {
  if (contract.daysRemaining <= 7) {
    return "Sofort handeln";
  }

  if (contract.daysRemaining <= 21) {
    return "Demnächst";
  }

  return "Information";
}

export default function ContractWidget() {
  return (
    <OmsorgCard title="Vertragsverlängerungen">
      <div className="contract-widget">
        <div className="contract-widget__intro">
          <CalendarClock size={20} />

          <p>
            Verträge von vermittelten Mitarbeitern,
            die demnächst enden.
          </p>
        </div>

        <div className="contract-widget__list">
          {contracts.map((contract) => (
            <article
              key={contract.id}
              className={`contract-item contract-item--${contract.urgency}`}
            >
              <div className="contract-item__header">
                <div>
                  <strong>{contract.facility}</strong>

                  <span>
                    {contract.employee}
                  </span>
                </div>

                <OmsorgBadge
                  status={
                    contract.daysRemaining <= 7
                      ? "krank"
                      : contract.daysRemaining <= 21
                        ? "urlaub"
                        : "einsatz"
                  }
                />
              </div>

              <div className="contract-item__meta">
                <span>
                  Vertragsende: {contract.endDate}
                </span>

                <strong>
                  {contract.daysRemaining === 1
                    ? "endet morgen"
                    : `endet in ${contract.daysRemaining} Tagen`}
                </strong>

                <small>
                  {getUrgencyLabel(contract)}
                </small>
              </div>

              <div className="contract-item__actions">
                <a
                  href={`tel:${contract.phone.replace(/\s/g, "")}`}
                  className="contract-action"
                >
                  <Phone size={16} />
                  Anrufen
                </a>

                <a
                  href={`mailto:${contract.email}`}
                  className="contract-action"
                >
                  <Mail size={16} />
                  E-Mail
                </a>

                <button
                  type="button"
                  className="contract-action"
                >
                  <FileText size={16} />
                  Vertrag öffnen
                </button>
              </div>
            </article>
          ))}
        </div>
      </div>
    </OmsorgCard>
  );
}