"use client";

import React from "react";
import { Skeleton } from "@/components/atoms/loading-skeleton";
import { ArrowTopRightOnSquareIcon, ArrowDownTrayIcon } from "@heroicons/react/24/outline";
import { format } from "date-fns";
import type { Invoice } from "@customer-portal/domain/billing";
import { Formatting } from "@customer-portal/domain/toolkit";

const { formatCurrency } = Formatting;

const formatDate = (dateString?: string) => {
  if (!dateString || dateString === "0000-00-00" || dateString === "0000-00-00 00:00:00")
    return "N/A";
  try {
    const date = new Date(dateString);
    if (isNaN(date.getTime())) return "N/A";
    return format(date, "MMM d, yyyy");
  } catch {
    return "N/A";
  }
};

interface InvoiceHeaderProps {
  invoice: Invoice;
  loadingDownload?: boolean;
  loadingPayment?: boolean;
  onDownload?: () => void;
  onPay?: () => void;
}

export function InvoiceHeader(props: InvoiceHeaderProps) {
  const { invoice, loadingDownload, loadingPayment, onDownload, onPay } = props;

  return (
    <div className="relative bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 px-8 py-6">
      {/* Background Pattern */}
      <div className="absolute inset-0 opacity-50">
        <div className="absolute inset-0 bg-gradient-to-br from-transparent via-white/5 to-transparent"></div>
      </div>

      <div className="relative">
        {/* Structured Header Layout */}
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
          {/* Left Section - Invoice Info */}
          <div className="lg:col-span-1">
            <div className="space-y-2">
              <div className="text-sm text-slate-400 font-medium">Invoice #{invoice.number}</div>
              <div className="text-sm text-slate-300">
                <span>Issued {formatDate(invoice.issuedAt)}</span>
                {invoice.dueDate && (
                  <>
                    <span className="mx-2 text-slate-500">•</span>
                    <span>Due {formatDate(invoice.dueDate)}</span>
                  </>
                )}
              </div>
            </div>
          </div>

          {/* Center Section - Amount and Status */}
          <div className="lg:col-span-1 text-center">
            <div className="space-y-3">
              <div className="text-4xl font-bold text-white">
                {formatCurrency(invoice.total, invoice.currency)}
              </div>
              <div className="flex justify-center">
                <span
                  className={`inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold ${
                    invoice.status === "Paid"
                      ? "bg-emerald-100 text-emerald-800 border border-emerald-200"
                      : invoice.status === "Overdue"
                        ? "bg-red-100 text-red-800 border border-red-200"
                        : invoice.status === "Unpaid"
                          ? "bg-amber-100 text-amber-800 border border-amber-200"
                          : "bg-slate-100 text-slate-800 border border-slate-200"
                  }`}
                >
                  {invoice.status === "Paid" && (
                    <svg className="w-4 h-4 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
                      <path
                        fillRule="evenodd"
                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
                        clipRule="evenodd"
                      />
                    </svg>
                  )}
                  {invoice.status === "Overdue" && (
                    <svg className="w-4 h-4 mr-1.5" fill="currentColor" viewBox="0 0 20 20">
                      <path
                        fillRule="evenodd"
                        d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
                        clipRule="evenodd"
                      />
                    </svg>
                  )}
                  {invoice.status}
                </span>
              </div>
              {invoice.status === "Overdue" && invoice.dueDate && (
                <div className="text-xs text-red-200 bg-red-500/20 px-3 py-1 rounded-full inline-block">
                  Overdue since {formatDate(invoice.dueDate)}
                </div>
              )}
            </div>
          </div>

          {/* Right Section - Actions */}
          <div className="lg:col-span-1 flex justify-center lg:justify-end">
            <div className="flex flex-col sm:flex-row gap-3">
              <button
                onClick={onDownload}
                disabled={loadingDownload}
                className="inline-flex items-center justify-center px-4 py-2.5 bg-white/10 backdrop-blur-sm border border-white/20 text-sm font-medium rounded-xl text-white hover:bg-white/20 disabled:opacity-50 transition-all duration-200 whitespace-nowrap"
              >
                {loadingDownload ? (
                  <Skeleton className="h-4 w-4 rounded-full mr-2" />
                ) : (
                  <ArrowDownTrayIcon className="h-4 w-4 mr-2" />
                )}
                Download PDF
              </button>

              {(invoice.status === "Unpaid" || invoice.status === "Overdue") && (
                <button
                  onClick={onPay}
                  disabled={loadingPayment}
                  className={`inline-flex items-center justify-center px-6 py-2.5 text-sm font-semibold rounded-xl text-white transition-all duration-200 shadow-lg whitespace-nowrap ${
                    invoice.status === "Overdue"
                      ? "bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 shadow-red-500/25"
                      : "bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 shadow-blue-500/25"
                  }`}
                >
                  {loadingPayment ? (
                    <Skeleton className="h-4 w-4 rounded-full mr-2" />
                  ) : (
                    <ArrowTopRightOnSquareIcon className="h-4 w-4 mr-2" />
                  )}
                  {invoice.status === "Overdue" ? "Pay Overdue" : "Pay Now"}
                </button>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export type { InvoiceHeaderProps };
