import React, { useState } from "react";
import "./Live.css";

function formatRegionLabel(region) {
  if (!region) return "Unknown";
  return region.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
}

export default function CameraCard({ camera, selected, onSelect }) {
  const [thumbError, setThumbError] = useState(false);

  if (!camera) return null;

  const name = camera.name_fr || camera.name_en || "Camera";
  const region = formatRegionLabel(camera.region);
  const route = camera.route || "";
  const source = camera.source || "quebec511";

  return (
    <article
      className={"post-card sw-wall-card sw-camera-card" + (selected ? " selected" : "")}
      onClick={() => onSelect && onSelect(camera)}
    >
      <div className="sw-wall-head">
        <div className="sw-wall-avatar sw-camera-avatar">
          <i className="fa-solid fa-video" />
        </div>
        <div className="sw-wall-meta">
          <div className="sw-wall-author">{name}</div>
          <div className="sw-wall-time">{region}</div>
        </div>
        <div className="sw-wall-badge sw-camera-badge">
          <i className="fa-solid fa-broadcast-tower" /> LIVE
        </div>
      </div>

      <div className="sw-wall-image sw-camera-thumbnail">
        {camera.thumbnail_url && !thumbError ? (
          <img
            src={camera.thumbnail_url}
            alt={name}
            loading="lazy"
            onError={() => setThumbError(true)}
          />
        ) : (
          <div className="sw-camera-thumb-fallback">
            <i className="fa-solid fa-video" />
            <span>LIVE FEED</span>
          </div>
        )}
        <div className="sw-camera-live-indicator">
          <span className="sw-camera-dot" />
          <span>LIVE</span>
        </div>
      </div>

      <div className="sw-wall-title">{name}</div>
      {route && <div className="sw-wall-meta-line">Route {route}</div>}

      <div className="sw-wall-stats">
        <span>
          <i className="fa-solid fa-map-marker-alt" /> {region}
        </span>
        <span>
          <i className="fa-solid fa-signal" /> {source}
        </span>
      </div>

      <div className="sw-wall-actions">
        <button
          type="button"
          className="sw-wall-btn"
          onClick={(e) => {
            e.stopPropagation();
            if (onSelect) onSelect(camera);
          }}
        >
          <i className="fa-solid fa-play" /> Watch
        </button>
        <button
          type="button"
          className="sw-wall-btn"
          onClick={(e) => {
            e.stopPropagation();
            const shareUrl = camera.embed_url || camera.video_url || "";
            if (navigator.share) {
              navigator.share({ title: name, url: shareUrl }).catch(() => {});
            } else if (navigator.clipboard && shareUrl) {
              navigator.clipboard.writeText(shareUrl);
            }
          }}
        >
          <i className="fa-solid fa-share-nodes" /> Share
        </button>
      </div>
    </article>
  );
}
