"use client";

import Link from "next/link";
import { useEffect, useMemo, useState } from "react";
import { ExternalLink, RefreshCw } from "lucide-react";
import { FederalWorkGuide } from "@/components/opportunities/federal-work-guide";
import { OPPORTUNITY_STATUS_LABELS, OPPORTUNITY_TYPE_LABELS } from "@/lib/constants";
import { applyLiveBidsToBusiness, fetchLiveFederalBids } from "@/lib/federal-work/fetch-live-bids";
import { getBusiness, saveBusiness } from "@/lib/data-store";
import type { Business, OpportunityStatus, OpportunityType } from "@/lib/types";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Select } from "@/components/ui/select";

export default function OpportunitiesPage() {
  const [business, setBusiness] = useState<Business | null>(null);
  const [typeFilter, setTypeFilter] = useState<"all" | OpportunityType>("all");
  const [statusFilter, setStatusFilter] = useState<"all" | OpportunityStatus>("all");
  const [samLoading, setSamLoading] = useState(false);
  const [samMessage, setSamMessage] = useState<string | null>(null);
  const [samError, setSamError] = useState<string | null>(null);

  useEffect(() => {
    getBusiness().then(setBusiness);
  }, []);

  const opportunities = useMemo(() => {
    if (!business) return [];
    return business.opportunities.filter((o) => {
      const typeMatch = typeFilter === "all" || o.type === typeFilter;
      const statusMatch = statusFilter === "all" || o.status === statusFilter;
      return typeMatch && statusMatch;
    });
  }, [business, typeFilter, statusFilter]);

  const federalCount = business?.opportunities.filter((o) => o.type === "government_contract").length ?? 0;

  const updateStatus = async (id: string, status: OpportunityStatus) => {
    if (!business) return;
    const next = {
      ...business,
      opportunities: business.opportunities.map((o) => (o.id === id ? { ...o, status } : o)),
      updatedAt: new Date().toISOString(),
    };
    setBusiness(next);
    await saveBusiness(next);
  };

  const importSamContracts = async () => {
    if (!business) return;
    setSamLoading(true);
    setSamError(null);
    setSamMessage(null);

    try {
      const data = await fetchLiveFederalBids(business);

      if (!data.ok || !data.opportunities) {
        throw new Error(
          data.needsConnection
            ? "Connect SAM.gov in Settings or during signup to fetch live bids."
            : (data.error ?? "Could not import federal contracts"),
        );
      }

      const next = applyLiveBidsToBusiness(business, data.opportunities, { imported: data.imported });
      setBusiness(next);
      await saveBusiness(next);
      setSamMessage(
        `Imported ${data.imported ?? 0} open federal bid${(data.imported ?? 0) === 1 ? "" : "s"} matched to your NAICS codes${data.naicsCodes?.length ? ` (${data.naicsCodes.join(", ")})` : ""}${data.state ? ` in ${data.state}` : ""}. Scroll down to review and respond.`,
      );
    } catch (err) {
      setSamError(err instanceof Error ? err.message : "SAM.gov import failed");
    } finally {
      setSamLoading(false);
    }
  };

  if (!business) {
    return (
      <Card className="py-4">
        <CardContent className="p-6 text-sm text-slate-400">
          Complete onboarding or pick a demo to view opportunities.
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="space-y-4 py-4">
      <FederalWorkGuide business={business} onImportSam={importSamContracts} samLoading={samLoading} />

      {(samMessage || samError) && (
        <Card className={samError ? "border-rose-500/30" : "border-emerald-500/30"}>
          <CardContent className="p-4 text-sm">
            {samMessage ? <p className="text-emerald-400">{samMessage}</p> : null}
            {samError ? <p className="text-rose-400">{samError}</p> : null}
          </CardContent>
        </Card>
      )}

      <Card>
        <CardHeader>
          <CardTitle className="flex flex-wrap items-center justify-between gap-3">
            <span>Your opportunity pipeline</span>
            {federalCount > 0 ? (
              <Badge className="border-indigo-500/30 bg-indigo-500/10 text-indigo-300">
                {federalCount} federal bid{federalCount === 1 ? "" : "s"}
              </Badge>
            ) : null}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="grid gap-3 md:grid-cols-2">
            <Select value={typeFilter} onChange={(e) => setTypeFilter(e.target.value as typeof typeFilter)}>
              <option value="all">All types</option>
              {Object.entries(OPPORTUNITY_TYPE_LABELS).map(([type, label]) => (
                <option key={type} value={type}>
                  {label}
                </option>
              ))}
            </Select>
            <Select
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value as typeof statusFilter)}
            >
              <option value="all">All statuses</option>
              {Object.entries(OPPORTUNITY_STATUS_LABELS).map(([status, label]) => (
                <option key={status} value={status}>
                  {label}
                </option>
              ))}
            </Select>
          </div>
          <div className="flex flex-wrap gap-2">
            <Button onClick={importSamContracts} disabled={samLoading} variant="outline" className="gap-2">
              <RefreshCw className={`h-4 w-4 ${samLoading ? "animate-spin" : ""}`} />
              Refresh federal bids
            </Button>
            {typeFilter !== "government_contract" ? (
              <Button variant="outline" size="sm" onClick={() => setTypeFilter("government_contract")}>
                Show federal only
              </Button>
            ) : null}
          </div>
        </CardContent>
      </Card>

      <div className="space-y-3">
        {opportunities.length === 0 ? (
          <Card>
            <CardContent className="p-6 text-sm text-slate-400">
              No opportunities match your filters. Complete Step 4 above to import federal bids, or clear filters.
            </CardContent>
          </Card>
        ) : null}

        {opportunities.map((opp) => (
          <Card key={opp.id}>
            <CardContent className="space-y-3 p-5">
              <div className="flex flex-wrap items-center justify-between gap-2">
                <h3 className="font-semibold">{opp.title}</h3>
                <Badge>{OPPORTUNITY_TYPE_LABELS[opp.type]}</Badge>
              </div>
              <p className="text-sm text-slate-400">{opp.description}</p>
              <div className="grid gap-2 text-sm text-slate-300 md:grid-cols-4">
                <p>Source: {opp.source}</p>
                <p>Confidence: {opp.confidenceScore}%</p>
                <p>Urgency: {opp.urgencyScore}%</p>
                <p>Value: ${opp.estimatedValue.toLocaleString()}</p>
              </div>
              {opp.responseDeadline ? (
                <p className="text-xs text-indigo-300">
                  Deadline: {new Date(opp.responseDeadline).toLocaleString()}
                </p>
              ) : null}
              <p className="text-sm text-amber-200">Next: {opp.recommendedAction}</p>
              {opp.externalUrl ? (
                <Link
                  href={opp.externalUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-1 text-sm text-sky-400 hover:underline"
                >
                  View on SAM.gov
                  <ExternalLink className="h-3.5 w-3.5" />
                </Link>
              ) : null}
              {opp.aiOutreach && (
                <div className="rounded-xl border border-slate-800 bg-slate-950/70 p-3 text-sm text-slate-300">
                  <p className="mb-1 text-xs uppercase tracking-wide text-slate-500">
                    AI outreach / message draft
                  </p>
                  <pre className="whitespace-pre-wrap font-sans">{opp.aiOutreach}</pre>
                </div>
              )}
              <Select
                value={opp.status}
                onChange={(e) => updateStatus(opp.id, e.target.value as OpportunityStatus)}
                className="max-w-[240px]"
              >
                {Object.entries(OPPORTUNITY_STATUS_LABELS).map(([status, label]) => (
                  <option key={status} value={status}>
                    {label}
                  </option>
                ))}
              </Select>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}