Upload frontend/src/components/EntityDetail.jsx

frontend/src/components/EntityDetail.jsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { X } from 'lucide-react'
+import React, { useState } from 'react'
+import { X, Globe, ExternalLink } from 'lucide-react'
 
 const ENTITY_COLORS = {
   startup: '#3B82F6', sme: '#10B981', college_ecell: '#FBBF24',
@@ -19,6 +19,125 @@ function formatFunding(v) {
   return `₹${(v/100000).toFixed(0)} L`
 }
 
+const SOCIAL_CONFIG = {
+  linkedin: { icon: '💼', color: '#0A66C2', label: 'LinkedIn' },
+  twitter: { icon: '𝕏', color: '#000000', label: 'X (Twitter)' },
+  instagram: { icon: '📸', color: '#E4405F', label: 'Instagram' },
+  facebook: { icon: '📘', color: '#1877F2', label: 'Facebook' },
+  website: { icon: '🌐', color: '#6366F1', label: 'Website' },
+  crunchbase: { icon: 'CB', color: '#0288D1', label: 'Crunchbase' },
+  tracxn: { icon: 'TX', color: '#FF6F00', label: 'Tracxn' },
+  google: { icon: '🔍', color: '#4285F4', label: 'Google Search' },
+}
+
+function SocialLinksGrid({ entity }) {
+  const links = []
+  const name = entity.name
+
+  if (entity.linkedin_url) links.push({ ...SOCIAL_CONFIG.linkedin, url: entity.linkedin_url, verified: true })
+  if (entity.twitter_url) links.push({ ...SOCIAL_CONFIG.twitter, url: entity.twitter_url, verified: true })
+  if (entity.instagram_url) links.push({ ...SOCIAL_CONFIG.instagram, url: entity.instagram_url, verified: true })
+  if (entity.facebook_url) links.push({ ...SOCIAL_CONFIG.facebook, url: entity.facebook_url, verified: true })
+  if (entity.website) links.push({ ...SOCIAL_CONFIG.website, url: entity.website, verified: true })
+
+  // Search links (always available)
+  const slug = name.toLowerCase().replace(/\s+/g, '-').replace('.', '')
+  const encName = encodeURIComponent(name)
+  if (!entity.linkedin_url) links.push({ ...SOCIAL_CONFIG.linkedin, url: `https://www.linkedin.com/search/results/companies/?keywords=${encName}`, search: true })
+  if (!entity.twitter_url) links.push({ ...SOCIAL_CONFIG.twitter, url: `https://x.com/search?q=${encName}&src=typed_query`, search: true })
+  if (!entity.instagram_url) links.push({ ...SOCIAL_CONFIG.instagram, url: `https://www.instagram.com/${slug}`, search: true })
+  if (!entity.website) links.push({ ...SOCIAL_CONFIG.website, url: `https://www.google.com/search?q=${encName}+company`, search: true })
+  links.push({ ...SOCIAL_CONFIG.crunchbase, url: `https://www.crunchbase.com/organization/${slug}`, search: true })
+  links.push({ ...SOCIAL_CONFIG.tracxn, url: `https://tracxn.com/d/companies/${slug}/`, search: true })
+  links.push({ ...SOCIAL_CONFIG.google, url: `https://www.google.com/search?q=${encName}+startup+India+news+2024+2025`, search: true })
+
+  return (
+    <div className="grid grid-cols-4 gap-1.5">
+      {links.map(l => (
+        <a key={l.label + l.url}
+          href={l.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          title={`${l.label}${l.search ? ' (search)' : ''}`}
+          className="flex flex-col items-center gap-1 p-2 rounded-lg hover:bg-atlas-surface transition-colors group"
+        >
+          <span className="text-lg" style={{ color: l.color }}>{l.icon}</span>
+          <span className="text-[9px] text-atlas-muted group-hover:text-atlas-text text-center leading-tight">{l.label}</span>
+          {l.verified && <span className="w-1 h-1 rounded-full bg-emerald-400" title="Verified" />}
+        </a>
+      ))}
+    </div>
+  )
+}
+
+function AIAnalysisSection({ entity }) {
+  const [analysis, setAnalysis] = useState(null)
+  const [loading, setLoading] = useState(false)
+
+  const runAnalysis = async () => {
+    setLoading(true)
+    try {
+      const resp = await fetch('/api/agent/analyze-startup', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          company_name: entity.name,
+          sector: Array.isArray(entity.sectors) ? entity.sectors[0] : entity.dpiit_category || '',
+          city: entity.city || '',
+        }),
+      })
+      const data = await resp.json()
+      setAnalysis(data)
+    } catch (e) {
+      setAnalysis({ summary: 'Analysis temporarily unavailable. Try again later.', latest_news: [], confidence: 'low' })
+    }
+    setLoading(false)
+  }
+
+  return (
+    <div className="border-t border-atlas-border/30 pt-3">
+      {!analysis && (
+        <button onClick={runAnalysis} disabled={loading}
+          className="w-full flex items-center justify-center gap-2 py-2 rounded-lg bg-brand-500/10 text-brand-400 hover:bg-brand-500/20 transition-colors text-xs font-medium">
+          {loading ? (
+            <><span className="w-3 h-3 border-2 border-brand-400 border-t-transparent rounded-full animate-spin" /> Analyzing...</>
+          ) : (
+            <><span>🤖</span> AI Web Analysis — Latest News & Trends</>
+          )}
+        </button>
+      )}
+      {analysis && (
+        <div className="space-y-2">
+          <div className="flex items-center gap-2 mb-1">
+            <span className="text-xs font-semibold text-atlas-muted">🤖 AI Analysis</span>
+            <span className={`text-[10px] px-1.5 py-0.5 rounded-full ${
+              analysis.confidence === 'high' ? 'bg-emerald-500/15 text-emerald-300' :
+              analysis.confidence === 'medium' ? 'bg-amber-500/15 text-amber-300' :
+              'bg-red-500/15 text-red-300'
+            }`}>{analysis.confidence} confidence</span>
+          </div>
+          <p className="text-xs text-atlas-muted leading-relaxed">{analysis.summary}</p>
+          {analysis.latest_news?.length > 0 && (
+            <div className="space-y-1.5">
+              <span className="text-[10px] font-semibold text-atlas-muted/70 uppercase">Latest News</span>
+              {analysis.latest_news.slice(0, 3).map((n, i) => (
+                <a key={i} href={n.url} target="_blank" rel="noopener noreferrer"
+                  className="block text-xs text-brand-400 hover:text-brand-300 hover:bg-brand-500/5 rounded px-2 py-1.5 transition-colors truncate">
+                  • {n.title}
+                </a>
+              ))}
+            </div>
+          )}
+          <button onClick={() => setAnalysis(null)}
+            className="text-[10px] text-atlas-muted/60 hover:text-atlas-muted transition-colors">
+            ↻ Run again
+          </button>
+        </div>
+      )}
+    </div>
+  )
+}
+
 export default function EntityDetail({ entity, onClose, onEntityClick, isMobile }) {
   if (!entity) return null
 
@@ -78,6 +197,12 @@ export default function EntityDetail({ entity, onClose, onEntityClick, isMobile
 
         {/* Scrollable body */}
         <div className="flex-1 overflow-y-auto px-5 py-4 space-y-4 scrollbar-thin">
+          {/* Social Media Links */}
+          <div>
+            <h4 className="text-xs font-semibold text-atlas-muted uppercase tracking-wider mb-2">Social & Profiles</h4>
+            <SocialLinksGrid entity={e} />
+          </div>
+
           {/* Description */}
           {e.description && (
             <p className="text-sm text-atlas-muted leading-relaxed">{e.description}</p>
@@ -104,24 +229,12 @@ export default function EntityDetail({ entity, onClose, onEntityClick, isMobile
 
           {/* Additional Info */}
           <div className="space-y-2">
-            {e.stage && (
-              <InfoRow label="Stage" value={e.stage.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())} />
-            )}
-            {e.business_model && (
-              <InfoRow label="Business Model" value={e.business_model.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())} />
-            )}
-            {e.dpiit_category && (
-              <InfoRow label="DPIIT Category" value={e.dpiit_category} />
-            )}
-            {e.college_name && (
-              <InfoRow label="College" value={e.college_name} />
-            )}
-            {e.funding_stage && (
-              <InfoRow label="Funding Stage" value={e.funding_stage} />
-            )}
-            {e.valuation_usd && (
-              <InfoRow label="Valuation" value={`$${(e.valuation_usd / 1e9).toFixed(1)}B`} />
-            )}
+            {e.stage && <InfoRow label="Stage" value={e.stage.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())} />}
+            {e.business_model && <InfoRow label="Business Model" value={e.business_model.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase())} />}
+            {e.dpiit_category && <InfoRow label="DPIIT Category" value={e.dpiit_category} />}
+            {e.college_name && <InfoRow label="College" value={e.college_name} />}
+            {e.funding_stage && <InfoRow label="Funding Stage" value={e.funding_stage} />}
+            {e.valuation_usd && <InfoRow label="Valuation" value={`$${(e.valuation_usd / 1e9).toFixed(1)}B`} />}
           </div>
 
           {/* Investors */}
@@ -136,17 +249,8 @@ export default function EntityDetail({ entity, onClose, onEntityClick, isMobile
             </div>
           )}
 
-          {/* Links */}
-          <div className="space-y-1.5">
-            <h4 className="text-xs font-semibold text-atlas-muted uppercase tracking-wider">Links</h4>
-            {e.website && <LinkRow icon="🌐" label="Website" url={e.website} />}
-            {e.linkedin_url && <LinkRow icon="💼" label="LinkedIn" url={e.linkedin_url} />}
-            {e.twitter_url && <LinkRow icon="𝕏" label="Twitter" url={e.twitter_url} />}
-            {e.instagram_url && <LinkRow icon="📸" label="Instagram" url={e.instagram_url} />}
-            {!e.website && !e.linkedin_url && !e.twitter_url && !e.instagram_url && (
-              <p className="text-xs text-atlas-muted/50">No links available</p>
-            )}
-          </div>
+          {/* AI Web Analysis */}
+          <AIAnalysisSection entity={e} />
 
           {/* Nearby Entities */}
           {nearby.length > 0 && (
@@ -207,14 +311,3 @@ function InfoRow({ label, value }) {
     </div>
   )
 }
-
-function LinkRow({ icon, label, url }) {
-  return (
-    <a href={url} target="_blank" rel="noopener noreferrer"
-       className="flex items-center gap-2 text-sm text-brand-500 hover:text-brand-400 transition-colors">
-      <span>{icon}</span>
-      <span className="underline underline-offset-2">{label}</span>
-      <span className="text-atlas-muted/40">↗</span>
-    </a>
-  )
-}