"use client";

import type { ReactNode } from "react";
import Image from "next/image";
import { useApp } from "@/context/AppContext";
import { formatCost, formatDate, formatTokens } from "@/lib/utils";
import ThemeToggle from "./ThemeToggle";

export default function Header({
    title,
    backHref,
    subtitle,
    children,
}: {
    title: string;
    backHref?: string;
    subtitle?: ReactNode;
    children?: ReactNode;
}) {
    const { data } = useApp();

    return (
        <header className="flex items-center justify-between px-6 py-4 bg-surface border-b border-border">
            <div className="flex items-center gap-3 min-w-0">
                <a href="/" aria-label="Go to home page">
                    <Image
                        src="/claude-code.jpg"
                        alt="Logo"
                        width={32}
                        height={32}
                    />
                </a>
                {backHref && (
                    <a
                        href={backHref}
                        className="text-text-secondary hover:text-text-primary transition-colors"
                        aria-label="Go back"
                    >
                        <svg
                            className="w-5 h-5"
                            fill="none"
                            stroke="currentColor"
                            viewBox="0 0 24 24"
                            aria-hidden="true"
                        >
                            <path
                                strokeLinecap="round"
                                strokeLinejoin="round"
                                strokeWidth={2}
                                d="M15 19l-7-7 7-7"
                            />
                        </svg>
                    </a>
                )}
                <div className="min-w-0">
                    <h1 className="text-xl font-semibold text-text-primary truncate">
                        {title}
                    </h1>
                    {subtitle && (
                        <p className="text-sm text-text-secondary">
                            {subtitle}
                        </p>
                    )}
                </div>
            </div>

            <div className="flex items-center gap-4">
                {data && !backHref && (
                    <div className="flex items-center gap-4 text-sm text-text-secondary">
                        <span>
                            {data.overall_metrics.total_projects} projects
                        </span>
                        <span>
                            {data.overall_metrics.total_conversations}{" "}
                            conversations
                        </span>
                        <span>
                            {formatCost(data.overall_metrics.total_cost)}
                        </span>
                        <span>
                            {formatTokens(data.overall_metrics.total_tokens)}{" "}
                            tokens
                        </span>
                        <span>{formatDate(data.analysis_timestamp)}</span>
                    </div>
                )}
                {children}
                <a
                    href="/search"
                    className="text-text-secondary hover:text-text-primary transition-colors"
                >
                    <span className="sr-only">Search conversations</span>
                    <svg
                        className="w-5 h-5"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                        aria-hidden="true"
                    >
                        <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                        />
                    </svg>
                </a>
                <ThemeToggle />
            </div>
        </header>
    );
}