'use client';

import * as React from 'react';
import { Music, Settings } from 'lucide-react';
import { ThemeToggle } from '@/components/layout/ThemeToggle';
import { Button } from '@/components/ui/Button';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card';
import { ToastProvider } from '@/components/ui/Toast';

export default function Home() {
  return (
    <ToastProvider>
      <div className="min-h-screen bg-background">
        {/* Header */}
        <header className="border-b border-border">
          <div className="container mx-auto px-3 sm:px-4 py-3 sm:py-4 flex items-center justify-between gap-2">
            <div className="min-w-0 flex-1 flex items-center gap-3">
              <Music className="h-6 w-6 text-primary" />
              <div>
                <h1 className="text-xl sm:text-2xl font-bold text-foreground">Audio UI</h1>
                <p className="text-xs sm:text-sm text-muted-foreground">
                  Professional audio editing in your browser
                </p>
              </div>
            </div>
            <div className="flex items-center gap-2">
              <Button
                variant="ghost"
                size="icon"
                title="Settings"
              >
                <Settings className="h-5 w-5" />
              </Button>
              <ThemeToggle />
            </div>
          </div>
        </header>

        {/* Main content */}
        <main className="container mx-auto px-3 sm:px-4 py-6 sm:py-8 md:py-16">
          <div className="max-w-4xl mx-auto space-y-8">
            {/* Welcome Card */}
            <Card>
              <CardHeader>
                <CardTitle>Welcome to Audio UI</CardTitle>
                <CardDescription>
                  A sophisticated browser-only audio editor built with Next.js 16 and Web Audio API
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <p className="text-sm text-muted-foreground">
                    This project is currently in development. The following features are planned:
                  </p>
                  <ul className="space-y-2 text-sm">
                    <li className="flex items-start gap-2">
                      <span className="text-primary">•</span>
                      <span>Multi-track audio editing with professional mixer</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary">•</span>
                      <span>Advanced effects: EQ, compression, reverb, delay, and more</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary">•</span>
                      <span>Waveform visualization with zoom and scroll</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary">•</span>
                      <span>Audio recording from microphone</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary">•</span>
                      <span>Automation lanes for parameters</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary">•</span>
                      <span>Export to WAV, MP3, OGG, and FLAC</span>
                    </li>
                    <li className="flex items-start gap-2">
                      <span className="text-primary">•</span>
                      <span>Project save/load with IndexedDB</span>
                    </li>
                  </ul>
                </div>
              </CardContent>
            </Card>

            {/* Tech Stack Card */}
            <Card>
              <CardHeader>
                <CardTitle>Technology Stack</CardTitle>
                <CardDescription>
                  Built with modern web technologies
                </CardDescription>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
                  <div>
                    <h4 className="font-semibold mb-2">Frontend</h4>
                    <ul className="space-y-1 text-muted-foreground">
                      <li>• Next.js 16 with React 19</li>
                      <li>• TypeScript 5</li>
                      <li>• Tailwind CSS 4</li>
                      <li>• Lucide React Icons</li>
                    </ul>
                  </div>
                  <div>
                    <h4 className="font-semibold mb-2">Audio</h4>
                    <ul className="space-y-1 text-muted-foreground">
                      <li>• Web Audio API</li>
                      <li>• Canvas API</li>
                      <li>• MediaRecorder API</li>
                      <li>• AudioWorklets</li>
                    </ul>
                  </div>
                </div>
              </CardContent>
            </Card>

            {/* Privacy Card */}
            <Card>
              <CardHeader>
                <CardTitle>Privacy First</CardTitle>
                <CardDescription>
                  Your audio never leaves your device
                </CardDescription>
              </CardHeader>
              <CardContent>
                <p className="text-sm text-muted-foreground">
                  All audio processing happens locally in your browser using the Web Audio API.
                  No files are uploaded to any server. Your projects are saved in your browser's
                  IndexedDB storage, giving you complete control over your data.
                </p>
              </CardContent>
            </Card>
          </div>
        </main>

        {/* Footer */}
        <footer className="border-t border-border mt-8 sm:mt-12 md:mt-16">
          <div className="container mx-auto px-3 sm:px-4 py-6 text-center text-xs sm:text-sm text-muted-foreground">
            <p>
              Powered by{' '}
              <a
                href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API"
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary hover:underline"
              >
                Web Audio API
              </a>
              {' '}and{' '}
              <a
                href="https://nextjs.org"
                target="_blank"
                rel="noopener noreferrer"
                className="text-primary hover:underline"
              >
                Next.js 16
              </a>
            </p>
            <p className="mt-2">
              All audio processing happens locally in your browser. No files are uploaded.
            </p>
          </div>
        </footer>
      </div>
    </ToastProvider>
  );
}