"use client";

import type { ReactNode } from "react";
import { StarIcon } from "lucide-react";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Typography } from "@/components/ui/typography";
import { useTranslation } from "@/hooks/useTranslation";
import { VerificationStatus } from "@/types/provider";
import type { ProviderDetail } from "@/types/provider";

import { ProviderStatusBadge } from "./ProviderStatusBadge";
import { formatDateTime } from "./lib/format";
import { formatCommissionRate } from "./lib/provider-status";

/** Account summary, rating, and KYC progress at a glance */
export function ProviderOverviewTab({
  provider,
}: {
  provider: ProviderDetail;
}) {
  const { t, language } = useTranslation();

  const approvedDocuments = provider.documents.filter(
    (document) => document.status === VerificationStatus.APPROVED,
  ).length;
  const commissionRate = formatCommissionRate(provider.customCommissionRate);

  return (
    <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
      <Card>
        <CardHeader>
          <CardTitle>{t("providers.detail.overview.accountTitle")}</CardTitle>
        </CardHeader>
        <CardContent className="flex flex-col gap-3">
          <DetailRow
            label={t("providers.detail.overview.businessName")}
            value={
              <Typography as="span" variant="body">
                {provider.businessName}
              </Typography>
            }
          />
          <DetailRow
            label={t("providers.detail.overview.status")}
            value={<ProviderStatusBadge status={provider.status} />}
          />
          <DetailRow
            label={t("providers.detail.overview.commission")}
            value={
              commissionRate ? (
                <Typography as="span" variant="number">
                  {commissionRate}
                </Typography>
              ) : (
                <Typography as="span" variant="caption" color="secondary">
                  {t("providers.commission.platformDefault")}
                </Typography>
              )
            }
          />
          <DetailRow
            label={t("providers.detail.overview.registered")}
            value={
              <Typography as="span" variant="number">
                {formatDateTime(provider.createdAt, language)}
              </Typography>
            }
          />
          <DetailRow
            label={t("providers.detail.overview.verifiedAt")}
            value={
              provider.verifiedAt ? (
                <Typography as="span" variant="number">
                  {formatDateTime(provider.verifiedAt, language)}
                </Typography>
              ) : (
                <Typography as="span" variant="caption" color="secondary">
                  {t("providers.detail.overview.notVerified")}
                </Typography>
              )
            }
          />
          <DetailRow
            label={t("providers.detail.overview.lastUpdated")}
            value={
              <Typography as="span" variant="number">
                {formatDateTime(provider.updatedAt, language)}
              </Typography>
            }
          />
        </CardContent>
      </Card>

      <div className="flex flex-col gap-4">
        <Card>
          <CardHeader>
            <CardTitle>{t("providers.detail.overview.ratingTitle")}</CardTitle>
          </CardHeader>
          <CardContent>
            {provider.totalReviews > 0 ? (
              <div className="flex items-center gap-2">
                <StarIcon className="size-5 fill-warning text-warning" />
                <Typography as="span" variant="price">
                  {provider.averageRating.toFixed(1)}
                </Typography>
                <Typography as="span" variant="body" color="secondary">
                  {t("providers.detail.overview.reviewsCount", {
                    count: provider.totalReviews,
                  })}
                </Typography>
              </div>
            ) : (
              <Typography as="p" variant="body" color="secondary">
                {t("providers.detail.overview.noReviews")}
              </Typography>
            )}
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>{t("providers.detail.overview.kycTitle")}</CardTitle>
          </CardHeader>
          <CardContent className="flex flex-col gap-3">
            {provider.documents.length > 0 ? (
              <Typography as="p" variant="body">
                {t("providers.detail.overview.kycProgress", {
                  approved: approvedDocuments,
                  total: provider.documents.length,
                })}
              </Typography>
            ) : (
              <Typography as="p" variant="body" color="secondary">
                {t("providers.detail.overview.kycNoDocuments")}
              </Typography>
            )}

            <div className="grid grid-cols-2 gap-4">
              <DetailStat
                label={t("providers.detail.overview.teamSize")}
                value={provider.users.length}
              />
              <DetailStat
                label={t("providers.detail.overview.servicesCount")}
                value={provider.services.length}
              />
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

function DetailRow({ label, value }: { label: string; value: ReactNode }) {
  return (
    <div className="flex flex-wrap items-center justify-between gap-2">
      <Typography as="span" variant="body" color="secondary">
        {label}
      </Typography>
      <div className="min-w-0 text-end">{value}</div>
    </div>
  );
}

function DetailStat({ label, value }: { label: string; value: number }) {
  return (
    <div className="flex flex-col gap-1">
      <Typography as="span" variant="caption" color="secondary">
        {label}
      </Typography>
      <Typography as="span" variant="price">
        {value}
      </Typography>
    </div>
  );
}