"use client";

import { useMemo, useState } from "react";
import Link from "next/link";
import { Button, buttonVariants } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  CalendarIcon,
  DownloadIcon,
  FileTextIcon,
  SearchIcon,
  ShieldCheckIcon,
  TrashIcon,
  BuildingIcon,
} from "@/components/dashboard-icons";

import { cn } from "@/lib/utils";
import { Pagination } from "@/components/ui/pagination";
import type {
  QuotationHistoryRecord,
  QuotationStatus,
  QuotationWorkspaceRecord,
} from "@/lib/quotation-data";
import { customerPoRapWorkspaces } from "@/lib/customer-po-rap-data";

const referenceNow = new Date("2026-07-12T12:00:00+08:00").getTime();

function getStatusClass(status: QuotationStatus) {
  switch (status) {
    case "Draft":
      return "bg-slate-100 text-slate-700";
    case "Sent":
      return "bg-sky-100 text-sky-700";
    case "Negotiation":
      return "bg-amber-100 text-amber-700";
    case "Accepted":
      return "bg-emerald-100 text-emerald-700";
    case "Rejected":
      return "bg-rose-100 text-rose-700";
    case "Expired":
      return "bg-zinc-200 text-zinc-700";
  }
}

function getStatusLabel(status: QuotationStatus) {
  switch (status) {
    case "Draft":
      return "Draft";
    case "Sent":
      return "Sent";
    case "Negotiation":
      return "Negotiation";
    case "Accepted":
      return "Accepted";
    case "Rejected":
      return "Rejected";
    case "Expired":
      return "Expired";
  }
}

function formatDateTime(value: string) {
  return new Date(value).toLocaleString("id-ID", {
    day: "2-digit",
    month: "short",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit",
  });
}

function formatDateOnly(value: string) {
  return new Date(value).toLocaleDateString("id-ID", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  });
}

function Badge({ label, className }: { label: string; className: string }) {
  return <span className={cn("inline-flex rounded-full px-2.5 py-1 text-xs font-semibold", className)}>{label}</span>;
}

function updateActiveHistory(history: QuotationHistoryRecord[], nextStatus: QuotationStatus) {
  return history.map((row) => (row.isActive ? { ...row, status: nextStatus } : row));
}

type QuotationWorkspaceProps = {
  workspace: QuotationWorkspaceRecord;
  returnHref?: string;
};

export function QuotationWorkspace({ workspace, returnHref = "/quotation" }: QuotationWorkspaceProps) {
  const customerPoOpportunityId = useMemo(() => {
    const match = customerPoRapWorkspaces.find(
      (w) => w.quotationId === workspace.quotationId || w.quotationId === workspace.draftQuotationId,
    );
    return match?.opportunityId ?? workspace.opportunityId;
  }, [workspace]);

  const [quotationStatus, setQuotationStatus] = useState<QuotationStatus>(workspace.status);
  const [quotationId, setQuotationId] = useState<string | null>(workspace.quotationId);
  const [quotationNumber, setQuotationNumber] = useState<string | null>(workspace.quotationNumber);
  const [pdfUrl, setPdfUrl] = useState<string | null>(workspace.pdfUrl);
  const [validUntil, setValidUntil] = useState(workspace.validUntil);
  const [sentAt, setSentAt] = useState<string | null>(workspace.sentAt);
  const [history, setHistory] = useState<QuotationHistoryRecord[]>(workspace.history);
  const [generateValidUntil, setGenerateValidUntil] = useState(workspace.validUntil);
  const [revisionRequested, setRevisionRequested] = useState(false);
  const [historyPage, setHistoryPage] = useState(1);
  const historyPageSize = 5;
  const historyTotalPages = Math.ceil(history.length / historyPageSize);
  const paginatedHistory = history.slice((historyPage - 1) * historyPageSize, historyPage * historyPageSize);

  const isExpired = useMemo(() => {
    if (quotationStatus !== "Sent" && quotationStatus !== "Negotiation") {
      return false;
    }

    return new Date(validUntil).getTime() < referenceNow;
  }, [quotationStatus, validUntil]);

  function setActiveHistoryStatus(nextStatus: QuotationStatus) {
    setHistory((current) => updateActiveHistory(current, nextStatus));
  }

  function handleGenerateQuotation() {
    const nextQuotationId = workspace.draftQuotationId;
    const nextQuotationNumber = workspace.draftQuotationNumber;
    const nextPdfUrl = `https://cdn.spekta.internal/quotations/${nextQuotationNumber}.pdf`;
    const now = new Date().toISOString();

    setQuotationId(nextQuotationId);
    setQuotationNumber(nextQuotationNumber);
    setPdfUrl(nextPdfUrl);
    setQuotationStatus("Draft");
    setValidUntil(generateValidUntil);
    setSentAt(null);
    setRevisionRequested(false);
    setHistory((current) => [
      ...current.map((row) => ({ ...row, isActive: false })),
      {
        quotationId: nextQuotationId,
        quotationNumber: nextQuotationNumber,
        createdAt: now,
        status: "Draft",
        pdfUrl: nextPdfUrl,
        isActive: true,
      },
    ]);
  }

  function handleSendQuotation() {
    if (!quotationId) {
      return;
    }

    const now = new Date().toISOString();
    setQuotationStatus("Sent");
    setSentAt(now);
    setActiveHistoryStatus("Sent");
  }

  function handleNegotiation() {
    if (!quotationId || quotationStatus === "Expired" || quotationStatus === "Accepted" || quotationStatus === "Rejected") {
      return;
    }

    setQuotationStatus("Negotiation");
    setActiveHistoryStatus("Negotiation");
    setRevisionRequested(false);
  }

  function handleAccept() {
    if (!quotationId || quotationStatus === "Expired" || quotationStatus === "Rejected" || quotationStatus === "Accepted") {
      return;
    }

    setQuotationStatus("Accepted");
    setActiveHistoryStatus("Accepted");
    setRevisionRequested(false);
  }

  function handleReject() {
    if (!quotationId || quotationStatus === "Expired" || quotationStatus === "Rejected" || quotationStatus === "Accepted") {
      return;
    }

    setQuotationStatus("Rejected");
    setActiveHistoryStatus("Rejected");
    setRevisionRequested(false);
  }

  const displayStatus = isExpired ? "Expired" : quotationStatus;
  const statusClass = getStatusClass(displayStatus);
  const statusLabel = getStatusLabel(displayStatus);
  const generatedHistory = history.length > 1;
  const quotationSummary = quotationNumber ?? workspace.draftQuotationNumber;
  const generatedPdfUrl = pdfUrl ?? `https://cdn.spekta.internal/quotations/${workspace.draftQuotationNumber}.pdf`;
  const currentSentAt = sentAt ? formatDateTime(sentAt) : "-";
  const validUntilLabel = formatDateOnly(validUntil);
  const historyForDisplay = useMemo(
    () => paginatedHistory.map((row) => (row.isActive && isExpired ? { ...row, status: "Expired" as QuotationStatus } : row)),
    [paginatedHistory, isExpired],
  );

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <h2 className="text-2xl font-semibold tracking-tight md:text-3xl">Quotation Workspace</h2>
        </div>

      </div>

      {isExpired ? (
        <div className="rounded-xl bg-rose-50 px-4 py-3 text-sm text-rose-800">
          Quotation sudah kedaluwarsa. Perpanjang masa berlaku atau buat versi baru sebelum melanjutkan negosiasi.
        </div>
      ) : null}

      <Card className="overflow-hidden">
        <div className="bg-gradient-to-r from-primary/5 via-primary/[0.02] to-transparent px-5 pb-5 pt-5 md:px-6">
          <div className="flex items-start justify-between gap-4">
            <div className="min-w-0 flex-1">
              <p className="text-xs font-medium uppercase tracking-[0.15em] text-primary/60">Quotation</p>
              <h2 className="mt-1.5 text-xl font-bold tracking-tight text-foreground">{workspace.projectName}</h2>
              <p className="mt-0.5 text-sm text-muted-foreground">{workspace.customerName}</p>
              <p className="mt-1.5 text-xs text-muted-foreground">
                Selected opportunity: <span className="font-medium text-foreground">{workspace.opportunityCode}</span>
              </p>
            </div>
            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-primary/10 text-primary shadow-sm">
              <FileTextIcon className="h-5 w-5" />
            </div>
          </div>
        </div>

        <div className="divide-y divide-border/40 px-5 py-4 md:px-6">
          {!quotationId ? (
            <div className="grid gap-x-8 gap-y-4 pb-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">BOQ code</p>
                <p className="mt-1 font-semibold">{workspace.boqCode}</p>
                <p className="text-xs text-muted-foreground">Version {workspace.boqVersion}</p>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Status</p>
                <div className="mt-1 flex flex-wrap gap-1.5">
                  <Badge label={workspace.opportunityStatus} className="bg-emerald-100 text-emerald-700" />
                </div>
                <p className="text-xs text-muted-foreground">Approved on {formatDateTime(workspace.approvedAt)}</p>
              </div>
              <div className="lg:col-span-4">
                <div className="rounded-xl bg-muted/30 p-4">
                  <div className="flex items-start justify-between gap-4">
                    <div>
                      <p className="text-sm font-medium">Belum ada quotation aktif</p>
                      <p className="mt-1 text-sm text-muted-foreground">
                        Atur masa berlaku terlebih dahulu, lalu generate dokumen quotation dari BOQ approved ini.
                      </p>
                    </div>
                    <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-emerald-100 text-emerald-700">
                      <FileTextIcon className="h-5 w-5" />
                    </div>
                  </div>

                  <div className="mt-4 grid gap-3 lg:grid-cols-[1fr_auto] lg:items-end">
                    <label className="block">
                      <span className="text-xs font-semibold uppercase tracking-[0.2em] text-muted-foreground">Valid until</span>
                      <input
                        type="date"
                        value={generateValidUntil}
                        onChange={(event) => setGenerateValidUntil(event.target.value)}
                        className="mt-2 h-11 w-full rounded-xl border border-border/80 bg-background px-3 text-sm outline-none transition focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
                      />
                    </label>

                    <Button onClick={handleGenerateQuotation} className="h-11 w-full px-4">
                      Generate Quotation
                    </Button>
                  </div>
                </div>
              </div>
            </div>
          ) : (
            <div className="grid gap-x-8 gap-y-4 pb-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">BOQ code</p>
                <p className="mt-1 font-semibold">{workspace.boqCode}</p>
                <p className="text-xs text-muted-foreground">Version {workspace.boqVersion}</p>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Status</p>
                <div className="mt-1 flex flex-wrap gap-1.5">
                  <Badge label={workspace.opportunityStatus} className="bg-emerald-100 text-emerald-700" />
                </div>
                <p className="text-xs text-muted-foreground">Approved on {formatDateTime(workspace.approvedAt)}</p>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Nomor quotation</p>
                <p className="mt-1 font-semibold text-foreground">{quotationSummary}</p>
                <p className="text-xs text-muted-foreground">Version summary {workspace.boqCode}</p>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Valid until</p>
                <p className="mt-1 font-semibold text-foreground">{validUntilLabel}</p>
                <p className="text-xs text-muted-foreground">
                  {displayStatus === "Expired" ? "Kedaluwarsa" : "Masih aktif untuk negosiasi"}
                </p>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">Sent at</p>
                <p className="mt-1 font-semibold text-foreground">{currentSentAt}</p>
                <p className="text-xs text-muted-foreground">Manual send setelah PDF dikirim ke customer</p>
              </div>
              <div>
                <p className="text-xs font-medium uppercase tracking-[0.1em] text-muted-foreground">PDF</p>
                <div className="mt-1 flex flex-wrap gap-2">
                  <Link
                    href={generatedPdfUrl}
                    target="_blank"
                    rel="noreferrer"
                    className={buttonVariants({
                      variant: "outline",
                      className:
                        "h-10 gap-2 border-slate-300 bg-slate-50/80 px-3 text-slate-700 shadow-sm shadow-slate-950/5 hover:border-slate-400 hover:bg-slate-100/90",
                    })}
                  >
                    <DownloadIcon className="h-4 w-4" />
                    <span>Unduh PDF</span>
                  </Link>
                </div>
              </div>
            </div>
          )}
        </div>
      </Card>

      <Card className="overflow-hidden">
        <CardHeader className="border-b border-border/50 bg-gradient-to-r from-primary/[0.02] to-transparent px-5 py-4 md:px-6">
          <div className="flex items-start justify-between gap-4">
            <div>
              <CardTitle className="text-base">Status Pengiriman &amp; Negosiasi</CardTitle>
              <p className="mt-1 text-sm text-muted-foreground">
                Update status sesuai komunikasi dengan customer. Jika ada perubahan angka, arahkan kembali ke revisi BOQ.
              </p>
            </div>
            <Badge label={statusLabel} className={cn(statusClass, "mt-0.5 shrink-0")} />
          </div>
        </CardHeader>

        <CardContent className="space-y-6 p-5 md:p-6">
          {/* Info grid */}
          <div className="grid gap-3 sm:grid-cols-3">
            <div className="rounded-xl border border-border/60 bg-muted/20 px-4 py-3">
              <p className="text-[11px] font-semibold uppercase tracking-[0.15em] text-muted-foreground">Status sekarang</p>
              <p className="mt-1.5 font-semibold text-foreground">{displayStatus === "Expired" ? "Kedaluwarsa" : statusLabel}</p>
            </div>
            <div className="rounded-xl border border-border/60 bg-muted/20 px-4 py-3">
              <p className="text-[11px] font-semibold uppercase tracking-[0.15em] text-muted-foreground">Terkirim pada</p>
              <p className="mt-1.5 font-semibold text-foreground">{currentSentAt}</p>
            </div>
            <div className="rounded-xl border border-border/60 bg-muted/20 px-4 py-3">
              <p className="text-[11px] font-semibold uppercase tracking-[0.15em] text-muted-foreground">Berlaku hingga</p>
              <p className="mt-1.5 font-semibold text-foreground">{validUntilLabel}</p>
            </div>
          </div>

          {/* Action buttons */}
          <div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
            <Button
              variant="outline"
              onClick={handleSendQuotation}
              disabled={!quotationId || displayStatus !== "Draft"}
              className="gap-2 border-sky-200 bg-sky-50 text-sky-700 hover:border-sky-300 hover:bg-sky-100"
            >
              <FileTextIcon className="h-4 w-4 shrink-0" />
              Tandai Terkirim
            </Button>
            <Button
              variant="outline"
              onClick={handleNegotiation}
              disabled={!quotationId || displayStatus === "Expired" || displayStatus === "Accepted" || displayStatus === "Rejected"}
              className="gap-2 border-amber-200 bg-amber-50 text-amber-700 hover:border-amber-300 hover:bg-amber-100"
            >
              <CalendarIcon className="h-4 w-4 shrink-0" />
              Sedang Negosiasi
            </Button>
            <Button
              variant="outline"
              onClick={handleAccept}
              disabled={!quotationId || displayStatus === "Expired" || displayStatus === "Accepted" || displayStatus === "Rejected"}
              className="gap-2 border-emerald-200 bg-emerald-50 text-emerald-700 hover:border-emerald-300 hover:bg-emerald-100"
            >
              <ShieldCheckIcon className="h-4 w-4 shrink-0" />
              Diterima Pelanggan
            </Button>
            <Button
              variant="outline"
              onClick={handleReject}
              disabled={!quotationId || displayStatus === "Expired" || displayStatus === "Accepted" || displayStatus === "Rejected"}
              className="gap-2 border-rose-200 bg-rose-50 text-rose-700 hover:border-rose-300 hover:bg-rose-100"
            >
              <TrashIcon className="h-4 w-4 shrink-0" />
              Ditolak Pelanggan
            </Button>
          </div>

          {/* Negotiation panel */}
          {displayStatus === "Negotiation" ? (
            <Card className="border-amber-200 bg-amber-50/40 shadow-none">
              <CardContent className="flex flex-col gap-3 p-4 md:flex-row md:items-center md:justify-between md:p-5">
                <div>
                  <p className="text-sm text-muted-foreground">Revisi BOQ</p>
                  <p className="mt-1 text-sm font-medium text-foreground">
                    Apakah ada perubahan harga, quantity, atau item yang diminta customer?
                  </p>
                </div>
                <div className="flex flex-col gap-2 sm:flex-row">
                  <Button
                    variant="outline"
                    onClick={() => setRevisionRequested(false)}
                    className={cn(
                      "gap-2",
                      revisionRequested === false
                        ? "border-sky-300 bg-sky-100 text-sky-800 hover:border-sky-300 hover:bg-sky-100"
                        : "border-sky-200 bg-sky-50 text-sky-700 hover:border-sky-300 hover:bg-sky-100",
                    )}
                  >
                    <CalendarIcon className="h-4 w-4 shrink-0" />
                    Tidak, lanjut negosiasi
                  </Button>
                  <Button
                    variant="outline"
                    onClick={() => setRevisionRequested(true)}
                    className={cn(
                      "gap-2",
                      revisionRequested === true
                        ? "border-rose-300 bg-rose-100 text-rose-800 hover:border-rose-300 hover:bg-rose-100"
                        : "border-rose-200 bg-rose-50 text-rose-700 hover:border-rose-300 hover:bg-rose-100",
                    )}
                  >
                    <BuildingIcon className="h-4 w-4 shrink-0" />
                    Ya, ada revisi angka
                  </Button>
                </div>
              </CardContent>
              {revisionRequested ? (
                <div className="border-t border-amber-200 px-4 py-3 md:px-5">
                  <p className="text-sm text-amber-800">Kembali ke BOQ untuk melakukan revisi angka sebelum menerbitkan quotation baru.</p>
                  <div className="mt-3">
                    <Link
                      href="/opportunities"
                      className={cn(
                        buttonVariants({ variant: "outline", size: "sm" }),
                        "gap-2 border-amber-300 bg-white text-amber-800 hover:border-amber-400 hover:bg-amber-50",
                      )}
                    >
                      <FileTextIcon className="h-4 w-4" />
                      Buat Revisi BOQ
                    </Link>
                  </div>
                </div>
              ) : null}
            </Card>
          ) : null}

          {/* Accepted panel */}
          {displayStatus === "Accepted" ? (
            <div className="rounded-xl border border-emerald-200 bg-emerald-50/50 p-5">
              <div className="flex items-start gap-3">
                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-700">
                  <ShieldCheckIcon className="h-5 w-5" />
                </div>
                <div className="min-w-0 flex-1">
                  <p className="text-sm font-semibold text-emerald-900">Quotation diterima customer.</p>
                  <p className="mt-1 text-sm text-emerald-700/80">Selanjutnya catat Customer PO untuk melanjutkan ke pembuatan RAP.</p>
                  <div className="mt-3">
                      <Link
                      href={`/opportunities/${customerPoOpportunityId}/customer-po`}
                      className={cn(
                        buttonVariants({ variant: "outline", size: "sm" }),
                        "gap-2 border-emerald-300 bg-white text-emerald-800 hover:border-emerald-400 hover:bg-emerald-50",
                      )}
                    >
                      <ShieldCheckIcon className="h-4 w-4" />
                      Lanjut ke Input Customer PO
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          ) : null}

          {/* Rejected panel */}
          {displayStatus === "Rejected" ? (
            <div className="rounded-xl border border-rose-200 bg-rose-50/50 p-5">
              <div className="flex items-start gap-3">
                <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-rose-100 text-rose-700">
                  <TrashIcon className="h-5 w-5" />
                </div>
                <div className="min-w-0 flex-1">
                  <p className="text-sm font-semibold text-rose-900">Quotation ditolak customer.</p>
                  <p className="mt-1 text-sm text-rose-700/80">Alur berhenti di sini sampai ada pembahasan baru atau revisi penawaran berikutnya.</p>
                  <div className="mt-3">
                    <Link
                      href={returnHref}
                      className={cn(
                        buttonVariants({ variant: "outline", size: "sm" }),
                        "gap-2",
                      )}
                    >
                      Kembali
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          ) : null}
        </CardContent>
      </Card>

      {generatedHistory ? (
        <Card>
          <CardHeader className="p-0 md:p-0 px-8 md:px-8 pt-4 pb-1 md:pt-5 md:pb-1.5">
            <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
              <CardTitle className="text-lg">Riwayat Versi Quotation</CardTitle>

              <label className="relative flex items-center">
                <SearchIcon className="pointer-events-none absolute left-3 h-4 w-4 text-muted-foreground" />
                <input
                  type="search"
                  placeholder="Search..."
                  className="h-9 w-64 rounded-2xl border border-border/80 bg-background pl-9 pr-4 text-sm outline-none transition placeholder:text-muted-foreground focus:border-primary/40 focus:ring-2 focus:ring-primary/10"
                />
              </label>
            </div>
          </CardHeader>
          <CardContent className="p-0">
            <div className="overflow-x-auto">
              <table className="min-w-full border-separate border-spacing-0 text-left text-sm">
                <thead className="sticky top-0 bg-card/95 text-xs uppercase tracking-[0.2em] text-muted-foreground backdrop-blur">
                  <tr>
                    <th className="border-b border-border/70 px-5 py-2 font-semibold">Quotation</th>
                    <th className="border-b border-border/70 px-5 py-2 font-semibold">Created</th>
                    <th className="border-b border-border/70 px-5 py-2 font-semibold">Status</th>
                    <th className="border-b border-border/70 px-5 py-2 font-semibold">PDF</th>
                  </tr>
                </thead>
                <tbody>
                  {historyForDisplay.map((row) => (
                    <tr key={row.quotationId} className="transition hover:bg-accent/60">
                      <td className="border-b border-border/70 px-5 py-4 align-top font-medium">
                        <div className="flex flex-col gap-2">
                          <span>{row.quotationNumber}</span>
                          {row.isActive ? <Badge label="Versi aktif" className="bg-emerald-100 text-emerald-700" /> : null}
                        </div>
                      </td>
                      <td className="border-b border-border/70 px-5 py-4 align-top text-muted-foreground">{formatDateTime(row.createdAt)}</td>
                      <td className="border-b border-border/70 px-5 py-4 align-top">
                        <Badge label={getStatusLabel(row.status)} className={getStatusClass(row.status)} />
                      </td>
                      <td className="border-b border-border/70 px-5 py-4 align-top">
                        <Link
                          href={row.pdfUrl}
                          target="_blank"
                          rel="noreferrer"
                          className={buttonVariants({
                            variant: "outline",
                            size: "sm",
                            className:
                              "h-10 gap-2 border-slate-300 bg-slate-50/80 px-3 text-slate-700 shadow-sm shadow-slate-950/5 hover:border-slate-400 hover:bg-slate-100/90",
                          })}
                        >
                          <DownloadIcon className="h-4 w-4" />
                          <span>Unduh PDF</span>
                        </Link>
                      </td>
                    </tr>
                  ))}
                </tbody>
            </table>
          </div>

          <Pagination currentPage={historyPage} totalPages={historyTotalPages} onPageChange={setHistoryPage} />
        </CardContent>
        </Card>
      ) : null}

    </div>
  );
}