erp-platform/ui/src/views/accounting/components/InvoiceManagement.tsx

import React, { useState } from "react";
import {
  FaPlus,
  FaSearch,
  FaCalendar,
  FaClock,
  FaExclamationTriangle,
  FaFileAlt,
  FaEdit,
  FaSave,
} from "react-icons/fa";
import {
  FiInvoice,
  InvoiceTypeEnum,
  InvoiceStatusEnum,
  PaymentStatusEnum,
} from "../../../types/fi";
import DataTable, { Column } from "../../../components/common/DataTable";
import Widget from "../../../components/common/Widget";
import {
  getInvoiceTypeColor,
  getInvoiceTypeText,
  getInvoiceStatusColor,
  getInvoiceStatusText,
  getPaymentStatusColor,
  getPaymentStatusText,
} from "../../../utils/erp";

interface InvoiceManagementProps {
  invoices: FiInvoice[];
  onAdd: () => void;
  onEdit: (invoice: FiInvoice) => void;
  onConvertFromWaybill: () => void;
  onCreatePayment: (invoice: FiInvoice) => void;
  onViewDetails: (invoice: FiInvoice) => void;
}

const InvoiceManagement: React.FC<InvoiceManagementProps> = ({
  invoices,
  onAdd,
  onEdit,
  onConvertFromWaybill,
  onCreatePayment,
  onViewDetails,
}) => {
  const [searchTerm, setSearchTerm] = useState("");
  const [selectedType, setSelectedType] = useState<InvoiceTypeEnum | "all">(
    "all"
  );
  const [selectedStatus, setSelectedStatus] = useState<
    InvoiceStatusEnum | "all"
  >("all");
  const [selectedPaymentStatus, setSelectedPaymentStatus] = useState<
    PaymentStatusEnum | "all"
  >("all");
  const [sortBy, setSortBy] = useState<"date" | "amount" | "dueDate">("date");

  const filteredInvoices = invoices
    .filter((invoice) => {
      if (
        searchTerm &&
        !invoice.invoiceNumber
          .toLowerCase()
          .includes(searchTerm.toLowerCase()) &&
        !invoice.currentAccount?.accountCode
          ?.toLowerCase()
          .includes(searchTerm.toLowerCase()) &&
        !invoice.waybillNumber?.toLowerCase().includes(searchTerm.toLowerCase())
      ) {
        return false;
      }
      if (selectedType !== "all" && invoice.invoiceType !== selectedType) {
        return false;
      }
      if (selectedStatus !== "all" && invoice.status !== selectedStatus) {
        return false;
      }
      if (
        selectedPaymentStatus !== "all" &&
        invoice.paymentStatus !== selectedPaymentStatus
      ) {
        return false;
      }
      return true;
    })
    .sort((a, b) => {
      switch (sortBy) {
        case "date":
          return (
            new Date(b.invoiceDate).getTime() -
            new Date(a.invoiceDate).getTime()
          );
        case "amount":
          return b.totalAmount - a.totalAmount;
        case "dueDate":
          return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime();
        default:
          return 0;
      }
    });

  const getDaysUntilDue = (dueDate: Date) => {
    const today = new Date();
    const due = new Date(dueDate);
    const diffTime = due.getTime() - today.getTime();
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return diffDays;
  };

  const formatCurrency = (amount: number) => {
    return amount.toLocaleString("tr-TR", {
      style: "currency",
      currency: "TRY",
      minimumFractionDigits: 2,
    });
  };

  const columns: Column<FiInvoice>[] = [
    {
      key: "invoiceNumber",
      header: "Fatura No",
      sortable: true,
      render: (invoice: FiInvoice) => (
        <div>
          <div className="font-medium text-gray-900">
            {invoice.invoiceNumber}
          </div>
          {invoice.waybillNumber && (
            <div className="text-sm text-gray-500">
              İrs: {invoice.waybillNumber}
            </div>
          )}
        </div>
      ),
    },
    {
      key: "type",
      header: "Tür",
      render: (invoice: FiInvoice) => (
        <span
          className={`px-2 py-1 text-xs font-medium rounded-full ${getInvoiceTypeColor(
            invoice.invoiceType
          )}`}
        >
          {getInvoiceTypeText(invoice.invoiceType)}
        </span>
      ),
    },
    {
      key: "currentAccount",
      header: "Cari Hesap",
      render: (invoice: FiInvoice) => (
        <div>
          <div className="font-medium text-gray-900">
            {invoice.currentAccount?.accountCode || "Bilinmeyen"}
          </div>
        </div>
      ),
    },
    {
      key: "dates",
      header: "Tarihler",
      render: (invoice: FiInvoice) => {
        const daysUntilDue = getDaysUntilDue(invoice.dueDate);
        return (
          <div className="text-sm">
            <div className="flex items-center gap-1">
              <FaCalendar className="w-3 h-3 text-gray-400" />
              <span>
                Fatura:{" "}
                {new Date(invoice.invoiceDate).toLocaleDateString("tr-TR")}
              </span>
            </div>
            <div className="flex items-center gap-1">
              <FaClock className="w-3 h-3 text-gray-400" />
              <span
                className={
                  daysUntilDue < 0
                    ? "text-red-600"
                    : daysUntilDue <= 7
                    ? "text-orange-600"
                    : "text-gray-600"
                }
              >
                Vade: {new Date(invoice.dueDate).toLocaleDateString("tr-TR")}
              </span>
            </div>
            {daysUntilDue < 0 && (
              <div className="text-xs text-red-600">
                {Math.abs(daysUntilDue)} gün gecikme
              </div>
            )}
          </div>
        );
      },
    },
    {
      key: "amounts",
      header: "Tutarlar",
      render: (invoice: FiInvoice) => (
        <div className="text-right">
          <div className="font-medium text-gray-900">
            {formatCurrency(invoice.totalAmount)}
          </div>
          {invoice.paidAmount > 0 && (
            <div className="text-sm text-green-600">
              Ödenen: {formatCurrency(invoice.paidAmount)}
            </div>
          )}
          {invoice.remainingAmount > 0 && (
            <div className="text-sm text-orange-600">
              Kalan: {formatCurrency(invoice.remainingAmount)}
            </div>
          )}
        </div>
      ),
    },
    {
      key: "status",
      header: "Durum",
      render: (invoice: FiInvoice) => (
        <div className="space-y-1">
          <span
            className={`px-2 py-1 text-xs font-medium rounded-full ${getInvoiceStatusColor(
              invoice.status
            )}`}
          >
            {getInvoiceStatusText(invoice.status)}
          </span>
          <br />
          <span
            className={`px-2 py-1 text-xs font-medium rounded-full ${getPaymentStatusColor(
              invoice.paymentStatus
            )}`}
          >
            {getPaymentStatusText(invoice.paymentStatus)}
          </span>
        </div>
      ),
    },
    {
      key: "actions",
      header: "İşlemler",
      render: (invoice: FiInvoice) => (
        <div className="flex gap-1">
          {invoice.paymentStatus !== PaymentStatusEnum.Paid && (
            <button
              onClick={() => onCreatePayment(invoice)}
              className="px-2 py-1 text-xs bg-green-50 text-green-600 rounded hover:bg-green-100 transition-colors"
              title="Ödeme Kaydet"
            >
              <FaSave className="w-4 h-4" />
            </button>
          )}
          <button
            onClick={() => onViewDetails(invoice)}
            className="p-1 text-blue-600 hover:bg-blue-50 rounded"
            title="Detayları Görüntüle"
          >
            <FaFileAlt className="w-4 h-4" />
          </button>
          <button
            onClick={() => onEdit(invoice)}
            className="p-1 text-green-600 hover:bg-green-50 rounded"
            title="Düzenle"
          >
            <FaEdit className="w-4 h-4" />
          </button>
        </div>
      ),
    },
  ];

  // Calculate statistics
  const totalInvoices = invoices.length;
  const totalSalesAmount = invoices
    .filter((i) => i.invoiceType === InvoiceTypeEnum.Sales)
    .reduce((sum, i) => sum + i.totalAmount, 0);
  const totalPurchaseAmount = invoices
    .filter((i) => i.invoiceType === InvoiceTypeEnum.Purchase)
    .reduce((sum, i) => sum + i.totalAmount, 0);
  const totalUnpaidAmount = invoices
    .filter((i) => i.paymentStatus !== PaymentStatusEnum.Paid)
    .reduce((sum, i) => sum + i.remainingAmount, 0);

  // Overdue invoices
  const overdueInvoices = invoices.filter(
    (i) =>
      i.paymentStatus !== PaymentStatusEnum.Paid &&
      new Date(i.dueDate) < new Date()
  );

  // Payment status distribution
  const paymentDistribution = Object.values(PaymentStatusEnum).map(
    (status) => ({
      status,
      count: invoices.filter((i) => i.paymentStatus === status).length,
      amount: invoices
        .filter((i) => i.paymentStatus === status)
        .reduce((sum, i) => sum + i.totalAmount, 0),
    })
  );

  // Invoice type distribution
  const typeDistribution = Object.values(InvoiceTypeEnum).map((type) => ({
    type,
    count: invoices.filter((i) => i.invoiceType === type).length,
    amount: invoices
      .filter((i) => i.invoiceType === type)
      .reduce((sum, i) => sum + i.totalAmount, 0),
  }));

  return (
    <div className="space-y-2">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-xl font-bold text-gray-900">Fatura Yönetimi</h2>
          <p className="text-sm text-gray-500">
            Alış ve satış faturaları yönetimi
          </p>
        </div>
        <div className="flex gap-2 text-sm">
          <button
            onClick={onConvertFromWaybill}
            className="flex items-center gap-2 px-3 py-1.5 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
          >
            <FaFileAlt className="w-4 h-4" />
            İrsaliyeden Fatura
          </button>
          <button
            onClick={onAdd}
            className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
          >
            <FaPlus className="w-4 h-4" />
            Yeni Fatura
          </button>
        </div>
      </div>

      {/* Stats Cards */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Widget
          title="Toplam Fatura"
          value={totalInvoices}
          color="blue"
          icon="FaFileAlt"
        />

        <Widget
          title="Satış Tutarı"
          value={formatCurrency(totalSalesAmount)}
          color="green"
          icon="FaDollarSign"
        />

        <Widget
          title="Alış Tutarı"
          value={formatCurrency(totalPurchaseAmount)}
          color="red"
          icon="FaDollarSign"
        />

        <Widget
          title="Ödenmemiş"
          value={formatCurrency(totalUnpaidAmount)}
          color="orange"
          icon="FaExclamationTriangle"
        />
      </div>

      {/* Distribution Charts */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div className="bg-white rounded-lg shadow-sm border p-4">
          <h3 className="text-base font-semibold text-gray-900 mb-3">
            Fatura Türü Dağılımı
          </h3>
          <div className="space-y-2">
            {typeDistribution.map(({ type, count, amount }) => (
              <div key={type} className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <span
                    className={`px-2 py-1 text-xs font-medium rounded-full ${getInvoiceTypeColor(
                      type
                    )}`}
                  >
                    {getInvoiceTypeText(type)}
                  </span>
                </div>
                <div className="flex items-center gap-4">
                  <span className="text-sm text-gray-600">{count} fatura</span>
                  <span className="text-sm font-medium text-gray-900">
                    {formatCurrency(amount)}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-sm border p-4">
          <h3 className="text-base font-semibold text-gray-900 mb-3">
            Ödeme Durumu Dağılımı
          </h3>
          <div className="space-y-2">
            {paymentDistribution.map(({ status, count, amount }) => (
              <div key={status} className="flex items-center justify-between">
                <div className="flex items-center gap-2">
                  <span
                    className={`px-2 py-1 text-xs font-medium rounded-full ${getPaymentStatusColor(
                      status
                    )}`}
                  >
                    {getPaymentStatusText(status)}
                  </span>
                </div>
                <div className="flex items-center gap-4">
                  <span className="text-sm text-gray-600">{count} fatura</span>
                  <span className="text-sm font-medium text-gray-900">
                    {formatCurrency(amount)}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Overdue Invoices Alert */}
      {overdueInvoices.length > 0 && (
        <div className="bg-red-50 border border-red-200 rounded-lg p-3">
          <div className="flex items-center gap-2">
            <FaExclamationTriangle className="w-5 h-5 text-red-600" />
            <h3 className="text-base font-semibold text-red-900">
              Vadesi Geçmiş Faturalar
            </h3>
          </div>
          <p className="text-sm text-red-700 mt-1">
            {overdueInvoices.length} adet fatura vadesi geçmiş durumda. Toplam
            tutar:{" "}
            {formatCurrency(
              overdueInvoices.reduce((sum, i) => sum + i.remainingAmount, 0)
            )}
          </p>
          <div className="mt-2 space-y-1.5">
            {overdueInvoices.slice(0, 3).map((invoice) => {
              const daysOverdue = Math.abs(getDaysUntilDue(invoice.dueDate));

              return (
                <div
                  key={invoice.id}
                  className="flex items-center justify-between p-2 bg-white rounded border"
                >
                  <div>
                    <span className="font-medium">{invoice.invoiceNumber}</span>
                    <span className="ml-2 text-sm text-gray-500">
                      - {invoice.currentAccount?.accountCode}
                    </span>
                  </div>
                  <div className="flex items-center gap-2">
                    <span className="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">
                      {daysOverdue} gün gecikme
                    </span>
                    <span className="text-sm text-red-600">
                      {formatCurrency(invoice.remainingAmount)}
                    </span>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      )}

      {/* Filters */}
      <div className="flex gap-3 items-center">
        <div className="flex-1 relative">
          <FaSearch className="w-4 h-4 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
          <input
            type="text"
            placeholder="Fatura no, cari hesap veya irsaliye no ara..."
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
            className="w-full pl-10 pr-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
          />
        </div>

        <select
          value={selectedType}
          onChange={(e) =>
            setSelectedType(e.target.value as InvoiceTypeEnum | "all")
          }
          className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
          <option value="all">Tüm Türler</option>
          {Object.values(InvoiceTypeEnum).map((type) => (
            <option key={type} value={type}>
              {getInvoiceTypeText(type)}
            </option>
          ))}
        </select>

        <select
          value={selectedStatus}
          onChange={(e) =>
            setSelectedStatus(e.target.value as InvoiceStatusEnum | "all")
          }
          className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
          <option value="all">Tüm Durumlar</option>
          {Object.values(InvoiceStatusEnum).map((status) => (
            <option key={status} value={status}>
              {getInvoiceStatusText(status)}
            </option>
          ))}
        </select>

        <select
          value={selectedPaymentStatus}
          onChange={(e) =>
            setSelectedPaymentStatus(
              e.target.value as PaymentStatusEnum | "all"
            )
          }
          className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
          <option value="all">Tüm Ödeme Durumları</option>
          {Object.values(PaymentStatusEnum).map((status) => (
            <option key={status} value={status}>
              {getPaymentStatusText(status)}
            </option>
          ))}
        </select>

        <select
          value={sortBy}
          onChange={(e) =>
            setSortBy(e.target.value as "date" | "amount" | "dueDate")
          }
          className="px-3 py-1.5 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
        >
          <option value="date">Tarihe Göre</option>
          <option value="amount">Tutara Göre</option>
          <option value="dueDate">Vade Tarihine Göre</option>
        </select>
      </div>

      {/* Data Table */}
      <div className="bg-white rounded-lg shadow-sm border overflow-x-auto">
        <DataTable data={filteredInvoices} columns={columns} />
      </div>

      {filteredInvoices.length === 0 && (
        <div className="text-center py-10">
          <FaFileAlt className="w-12 h-12 text-gray-400 mx-auto mb-4" />
          <h3 className="text-base font-medium text-gray-900 mb-2">
            Fatura bulunamadı
          </h3>
          <p className="text-sm text-gray-500">
            Yeni bir fatura ekleyin veya arama kriterlerinizi değiştirin.
          </p>
        </div>
      )}
    </div>
  );
};

export default InvoiceManagement;