'use client'

import type { TrumpPost } from '@/types'
import Badge from '@/components/ui/Badge'
import { formatPct } from '@/lib/utils'

interface ExpandDetailProps {
  post: TrumpPost | null
}

export default function ExpandDetail({ post }: ExpandDetailProps) {
  return (
    <div
      className={`overflow-hidden transition-all duration-300 ease-in-out ${
        post ? 'max-h-[300px] opacity-100 mt-3' : 'max-h-0 opacity-0'
      }`}
    >
      {post && (
        <div className="bg-[#0a0a0a] border border-[#f97316] rounded-[10px] p-5">
          <div className="flex items-start gap-4">
            {/* Post content */}
            <div className="flex-1">
              <div className="flex items-center gap-2 mb-3">
                <Badge variant={post.source} />
                <Badge variant={post.sentiment} />
                <span className="text-[11px] text-[#555555]">
                  {new Date(post.published_at).toLocaleString()}
                </span>
              </div>
              <p className="text-[13px] text-[#e2e8f0] leading-relaxed">{post.text}</p>
            </div>

            {/* Stats */}
            <div className="shrink-0 w-[260px]">
              {/* AI Confidence */}
              <div className="mb-4">
                <div className="flex items-center justify-between mb-1.5">
                  <span className="text-[11px] uppercase tracking-wider text-[#555555]">
                    AI Confidence
                  </span>
                  <span className="text-[13px] font-medium text-[#818cf8]">
                    {post.ai_confidence}%
                  </span>
                </div>
                <div className="h-1.5 bg-[#141414] rounded-full">
                  <div
                    className="h-full bg-[#818cf8] rounded-full transition-all duration-500"
                    style={{ width: `${post.ai_confidence}%` }}
                  />
                </div>
              </div>

              {/* Price impact */}
              {post.price_impact ? (
                <div>
                  <p className="text-[11px] uppercase tracking-wider text-[#555555] mb-2">
                    Price Impact ({post.price_impact.asset})
                  </p>
                  <div className="grid grid-cols-3 gap-2">
                    {[
                      { label: '5m', value: post.price_impact.m5 },
                      { label: '15m', value: post.price_impact.m15 },
                      { label: '1h', value: post.price_impact.m1h },
                    ].map((item) => (
                      <div key={item.label} className="bg-[#050505] border border-[#141414] rounded-lg p-2 text-center">
                        <p className="text-[10px] text-[#555555] mb-1">{item.label}</p>
                        <p
                          className={`text-[13px] font-medium ${
                            item.value >= 0 ? 'text-[#4ade80]' : 'text-[#ef4444]'
                          }`}
                        >
                          {formatPct(item.value)}
                        </p>
                      </div>
                    ))}
                  </div>
                </div>
              ) : (
                <p className="text-[12px] text-[#333333]">No significant price impact detected.</p>
              )}
            </div>
          </div>
        </div>
      )}
    </div>
  )
}