import React from 'react';
import { Link, useLocation } from 'react-router-dom';

export const AppHeader: React.FC = () => {
  const location = useLocation();
  
  const getPageTitle = () => {
    if (location.pathname === '/') {
      return 'Welcome to Slideshare';
    }
    if (location.pathname === '/presentations') {
      return 'My Presentations';
    }
    if (location.pathname === '/presentations/new') {
      return 'Create New Presentation';
    }
    if (location.pathname.includes('/slide/') && location.pathname.includes('/edit')) {
      const segments = location.pathname.split('/');
      const slideId = segments[4];
      if (slideId === 'new') {
        return 'Add New Slide';
      } else {
        return 'Edit Slide';
      }
    }
    if (location.pathname.includes('/presentations/') && location.pathname.includes('/slides/')) {
      const segments = location.pathname.split('/');
      if (segments.length === 6 && segments[1] === 'presentations') {
        const mode = segments[3]; // 'edit' or 'view'
        const slideNumber = segments[5];
        if (mode === 'edit') {
          return `Editing Slide ${slideNumber}`;
        } else if (mode === 'view') {
          return `Viewing Slide ${slideNumber}`;
        }
        return `Presentation Slide ${slideNumber}`;
      }
    }
    if (location.pathname === '/themes') {
      return 'Theme Browser';
    }
    if (location.pathname.includes('/themes/')) {
      const segments = location.pathname.split('/');
      if (segments.length === 3) {
        return `Theme: ${segments[2]}`;
      }
      if (segments.length === 5 && segments[3] === 'layouts') {
        return `Layout: ${segments[4]}`;
      }
    }
    return 'Slideshare';
  };

  const getPageDescription = () => {
    if (location.pathname === '/') {
      return 'Create beautiful presentations with customizable themes';
    }
    if (location.pathname === '/presentations') {
      return 'View and manage all your presentations';
    }
    if (location.pathname === '/presentations/new') {
      return 'Select a theme and enter details for your new presentation';
    }
    if (location.pathname.includes('/slide/') && location.pathname.includes('/edit')) {
      const segments = location.pathname.split('/');
      const slideId = segments[4];
      if (slideId === 'new') {
        return 'Choose a layout and add content for your new slide';
      } else {
        return 'Edit slide content and layout';
      }
    }
    if (location.pathname.includes('/presentations/') && location.pathname.includes('/slides/')) {
      const segments = location.pathname.split('/');
      if (segments.length === 6 && segments[1] === 'presentations') {
        const mode = segments[3];
        if (mode === 'edit') {
          return 'Edit slide content, add notes, and manage your presentation';
        } else if (mode === 'view') {
          return 'View your presentation slides in read-only mode';
        }
      }
      return 'View and manage your presentation slides';
    }
    if (location.pathname === '/themes') {
      return 'Browse and select themes for your presentations';
    }
    if (location.pathname.includes('/themes/')) {
      const segments = location.pathname.split('/');
      if (segments.length === 3) {
        return 'View theme details, layouts, and color palette';
      }
      if (segments.length === 5 && segments[3] === 'layouts') {
        return 'View layout template, slots, and configuration';
      }
    }
    return 'Slide authoring and presentation tool';
  };

  return (
    <header className="app-header">
      <nav className="app-nav">
        <Link to="/" className="app-logo">
          Slideshare
        </Link>
        <div className="nav-actions">
          <Link to="/presentations" className="nav-link">
            My Presentations
          </Link>
          <Link to="/presentations/new" className="nav-button primary">
            Create Presentation
          </Link>
          <Link to="/themes" className="nav-link">
            Themes
          </Link>
        </div>
      </nav>
      <div className="page-title-section">
        <h1 className="page-title">{getPageTitle()}</h1>
        <p className="page-description">{getPageDescription()}</p>
      </div>
    </header>
  );
};