"use client";

import React from "react";
import Link from "next/link";
import { Formatting } from "@customer-portal/domain/toolkit";

const { formatCurrency } = Formatting;
import type { InvoiceItem } from "@customer-portal/domain/billing";

interface InvoiceItemsProps {
  items?: InvoiceItem[];
  currency: string;
}

export function InvoiceItems({ items = [], currency }: InvoiceItemsProps) {
  const hasServiceConnection = (item: InvoiceItem) => {
    return Boolean(item.serviceId) && Number(item.serviceId) > 0;
  };

  // Calculate what types of items are actually present
  const hasLinkedItems = items.some(item => hasServiceConnection(item));
  const hasOneTimeItems = items.some(item => !hasServiceConnection(item));

  const renderItemContent = (item: InvoiceItem, index: number) => {
    const isLinked = hasServiceConnection(item);

    const itemContent = (
      <div
        className={`flex justify-between items-start py-4 rounded-lg transition-all duration-200 ${
          index !== items.length - 1 ? "border-b border-slate-100" : ""
        } ${
          isLinked
            ? "hover:bg-blue-50 hover:border-blue-200 cursor-pointer group"
            : "bg-slate-50/50"
        }`}
      >
        <div className="flex-1 pr-4">
          <div className="flex items-start gap-3">
            <div className="flex-1">
              <div
                className={`font-semibold mb-1 ${
                  isLinked ? "text-blue-900 group-hover:text-blue-700" : "text-slate-900"
                }`}
              >
                {item.description}
                {isLinked && (
                  <svg
                    className="inline-block w-4 h-4 ml-1 text-blue-500 group-hover:text-blue-600"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      strokeWidth={2}
                      d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                    />
                  </svg>
                )}
              </div>
              <div className="flex flex-wrap gap-3 text-sm">
                {item.quantity && item.quantity > 1 && (
                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                    Qty: {item.quantity}
                  </span>
                )}
                {isLinked ? (
                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                    <svg className="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                      <path
                        fillRule="evenodd"
                        d="M12.586 4.586a2 2 0 112.828 2.828l-3 3a2 2 0 01-2.828 0 1 1 0 00-1.414 1.414 4 4 0 005.656 0l3-3a4 4 0 00-5.656-5.656l-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5zm-5 5a2 2 0 012.828 0 1 1 0 101.414-1.414 4 4 0 00-5.656 0l-3 3a4 4 0 105.656 5.656l1.5-1.5a1 1 0 10-1.414-1.414l-1.5 1.5a2 2 0 11-2.828-2.828l3-3z"
                        clipRule="evenodd"
                      />
                    </svg>
                    Service #{item.serviceId}
                  </span>
                ) : (
                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-600">
                    <svg className="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                      <path
                        fillRule="evenodd"
                        d="M4 4a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H4zm0 2v8h12V6H4z"
                        clipRule="evenodd"
                      />
                    </svg>
                    One-time item
                  </span>
                )}
              </div>
            </div>
          </div>
        </div>
        <div className="text-right">
          <div
            className={`text-xl font-bold ${
              isLinked ? "text-blue-900 group-hover:text-blue-700" : "text-slate-900"
            }`}
          >
            {formatCurrency(item.amount || 0, currency)}
          </div>
        </div>
      </div>
    );

    if (isLinked) {
      return (
        <Link key={item.id} href={`/subscriptions/${item.serviceId}`} className="block">
          {itemContent}
        </Link>
      );
    }

    return <div key={item.id}>{itemContent}</div>;
  };

  return (
    <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
      <div className="px-6 py-4 bg-slate-50 border-b border-slate-200">
        <div className="flex items-center justify-between">
          <h3 className="text-lg font-semibold text-slate-900">Items & Services</h3>
          <div className="flex items-center gap-4 text-xs text-slate-500">
            {hasLinkedItems && (
              <div className="flex items-center gap-1">
                <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                <span>Linked to service</span>
              </div>
            )}
            {hasOneTimeItems && (
              <div className="flex items-center gap-1">
                <div className="w-2 h-2 bg-slate-400 rounded-full"></div>
                <span>One-time item</span>
              </div>
            )}
          </div>
        </div>
      </div>
      <div className="p-6">
        {items.length > 0 ? (
          <div className="space-y-2">
            {items.map((item, index) => renderItemContent(item, index))}
          </div>
        ) : (
          <div className="text-center py-8">
            <div className="text-slate-400 mb-2">
              <svg
                className="w-12 h-12 mx-auto"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={1.5}
                  d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
                />
              </svg>
            </div>
            <p className="text-slate-500">No items found on this invoice.</p>
          </div>
        )}
      </div>
    </div>
  );
}

export type { InvoiceItemsProps };
