"use client";

import { ShoppingBasket, Users, FileCheck, Leaf } from "lucide-react";
import type { TradeViewModel } from "@/lib/farmer-dashboard";

interface Props {
  data: TradeViewModel | null;
}

export default function TradeModule({ data }: Props) {
  if (!data) {
    return <EmptyState />;
  }

  return (
    <div className="space-y-6">
      <div className="flex items-center gap-4">
        <div className="w-10 h-10 p-2 flex items-center justify-center border border-green/20 bg-green/5 rounded-lg shrink-0">
          <ShoppingBasket className="w-6 h-6 text-green stroke-[2px]" />
        </div>
        <div>
          <h2 className="font-onest text-xl sm:text-2xl font-semibold text-ink tracking-[-0.8px]">
            Trade & Market Access
          </h2>
          <p className="font-inter text-sm text-muted">
            {data.crops.length} crop{data.crops.length !== 1 ? "s" : ""} registered
          </p>
        </div>
      </div>

      <div className="rounded-2xl border border-border bg-surface p-5 sm:p-6">
        <h3 className="font-onest text-base font-semibold text-ink mb-4 flex items-center gap-2">
          <Leaf className="w-4 h-4 text-green" />
          Your Crops
        </h3>
        <div className="space-y-3">
          {data.crops.map((crop, i) => (
            <div key={i} className="flex items-center justify-between p-3 rounded-xl bg-surface-elevated">
              <div>
                <p className="font-inter text-sm font-medium text-ink">{crop.crop}</p>
                {crop.variety && (
                  <p className="font-inter text-xs text-muted">Variety: {crop.variety}</p>
                )}
              </div>
              <div className="text-right">
                <p className="font-inter text-xs text-muted">{crop.season}</p>
                {crop.expectedYield && (
                  <p className="font-inter text-xs text-muted">{crop.expectedYield} tons</p>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>

      {data.buyerMatches.length > 0 && (
        <div className="rounded-2xl border border-border bg-surface p-5 sm:p-6">
          <h3 className="font-onest text-base font-semibold text-ink mb-4 flex items-center gap-2">
            <Users className="w-4 h-4 text-green" />
            Potential Buyer Matches
          </h3>
          <div className="space-y-3">
            {data.buyerMatches.map((match, i) => (
              <div key={i} className="flex items-center justify-between p-3 rounded-xl border border-border bg-surface">
                <div>
                  <p className="font-inter text-sm font-medium text-ink">{match.buyerName}</p>
                  <p className="font-inter text-xs text-muted">{match.commodity}</p>
                </div>
                <span className="font-inter text-xs font-medium text-green bg-green/5 px-2 py-1 rounded-full">
                  {match.priceRange}
                </span>
              </div>
            ))}
          </div>
        </div>
      )}

      <div className="rounded-2xl border border-border bg-surface p-5 sm:p-6">
        <h3 className="font-onest text-base font-semibold text-ink mb-3 flex items-center gap-2">
          <FileCheck className="w-4 h-4 text-green" />
          Export Documentation
        </h3>
        <p className="font-inter text-sm text-muted">
          {data.exportDocsComplete
            ? "All export documents are ready."
            : "Export documentation will be generated once trade contracts are established."}
        </p>
      </div>
    </div>
  );
}

function EmptyState() {
  return (
    <div className="text-center py-12">
      <div className="w-12 h-12 mx-auto mb-4 rounded-full bg-[var(--glass)] flex items-center justify-center">
        <ShoppingBasket className="w-6 h-6 text-muted" />
      </div>
      <h3 className="font-onest text-lg font-semibold text-ink">No Crops Registered</h3>
      <p className="mt-1 font-inter text-sm text-muted max-w-sm mx-auto">
        No crop plan was submitted during onboarding. Trade matching requires crop data.
      </p>
    </div>
  );
}