import React, { useState } from 'react';
import { AuthenticatedLayout } from '../layout/AuthenticatedLayout';
import { Card, CardContent, CardHeader, CardTitle } from '../ui/card';
import { Button } from '../ui/button';
import { Input } from '../ui/input';
import { Badge } from '../ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
import { Save, Eye, Send, Plus, Calendar } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

interface ProgrammeComposerProps {
  // onNavigate: (route: string) => void;
  onLogout: () => void;
  user: any;
}

export function ProgrammeComposer({ onLogout, user }: ProgrammeComposerProps) {
  const [programmeTitle, setProgrammeTitle] = useState('New Executive Programme');

  const breadcrumbs = [
    { label: 'Programmes', route: '/programmes' },
    { label: 'Programme Composer' }
  ];
  const navigate = useNavigate();

  return (
    <AuthenticatedLayout
      currentRoute="/programmes/new"
      // onNavigate={onNavigate}
      onLogout={onLogout}
      user={user}
      breadcrumbs={breadcrumbs}
    >
      <div className="p-6 space-y-6">
        {/* Composer Header */}
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-4">
                <Input
                  value={programmeTitle}
                  onChange={(e) => setProgrammeTitle(e.target.value)}
                  className="text-lg font-semibold border-none shadow-none p-0 h-auto"
                />
                <Badge variant="secondary">Draft</Badge>
              </div>
              <div className="flex space-x-2">
                <Button variant="outline">
                  <Save className="h-4 w-4 mr-2" />
                  Save
                </Button>
                <Button variant="outline">
                  <Eye className="h-4 w-4 mr-2" />
                  Preview
                </Button>
                <Button style={{ backgroundColor: 'var(--color-brand-primary)' }}>
                  <Send className="h-4 w-4 mr-2" />
                  Publish
                </Button>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Programme Composer Tabs */}
        <Tabs defaultValue="timeline" className="space-y-6">
          <TabsList className="grid w-full grid-cols-4">
            <TabsTrigger value="timeline">Timeline</TabsTrigger>
            <TabsTrigger value="blocks">Content Blocks</TabsTrigger>
            <TabsTrigger value="attachments">Attachments</TabsTrigger>
            <TabsTrigger value="assignments">Assignments</TabsTrigger>
          </TabsList>

          <TabsContent value="timeline">
            <Card>
              <CardHeader>
                <CardTitle>Programme Timeline</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex items-center justify-between">
                    <h3 className="font-medium">Programme Structure</h3>
                    <Button variant="outline">
                      <Plus className="h-4 w-4 mr-2" />
                      Add Timeline Block
                    </Button>
                  </div>

                  <div className="space-y-4">
                    <Card className="p-4 border-l-4 border-blue-500">
                      <div className="flex items-center justify-between mb-2">
                        <div className="flex items-center space-x-2">
                          <Calendar className="h-4 w-4" />
                          <span className="font-medium">Week 1-2: Foundation</span>
                        </div>
                        <Button variant="ghost" size="sm">Edit</Button>
                      </div>
                      <p className="text-sm text-muted-foreground">
                        Introduction courses and initial assessments
                      </p>
                    </Card>

                    <Card className="p-4 border-l-4 border-green-500">
                      <div className="flex items-center justify-between mb-2">
                        <div className="flex items-center space-x-2">
                          <Calendar className="h-4 w-4" />
                          <span className="font-medium">Week 3-4: Core Learning</span>
                        </div>
                        <Button variant="ghost" size="sm">Edit</Button>
                      </div>
                      <p className="text-sm text-muted-foreground">
                        Main course content and webinars
                      </p>
                    </Card>

                    <div className="text-center py-4 text-muted-foreground border-2 border-dashed border-muted rounded-lg">
                      <Plus className="h-8 w-8 mx-auto mb-2" />
                      <p>Add more timeline blocks</p>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="blocks">
            <Card>
              <CardHeader>
                <CardTitle>Content Blocks</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                  <Card className="p-4 cursor-pointer hover:bg-accent" onClick={() => navigate('/courses')}>
                    <div className="text-center">
                      <div className="h-12 w-12 bg-blue-100 rounded-lg flex items-center justify-center mx-auto mb-3">
                        📚
                      </div>
                      <h4 className="font-medium">Courses</h4>
                      <p className="text-sm text-muted-foreground">Add courses from library</p>
                    </div>
                  </Card>

                  <Card className="p-4 cursor-pointer hover:bg-accent" onClick={() => navigate('/webinars')}>
                    <div className="text-center">
                      <div className="h-12 w-12 bg-green-100 rounded-lg flex items-center justify-center mx-auto mb-3">
                        🎥
                      </div>
                      <h4 className="font-medium">Webinars</h4>
                      <p className="text-sm text-muted-foreground">Select from Zoom webinars</p>
                    </div>
                  </Card>

                  <Card className="p-4 cursor-pointer hover:bg-accent" onClick={() => navigate('/profilers')}>
                    <div className="text-center">
                      <div className="h-12 w-12 bg-purple-100 rounded-lg flex items-center justify-center mx-auto mb-3">
                        🎯
                      </div>
                      <h4 className="font-medium">Profilers</h4>
                      <p className="text-sm text-muted-foreground">Add assessment tools</p>
                    </div>
                  </Card>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="attachments">
            <Card>
              <CardHeader>
                <CardTitle>Programme Attachments</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="text-center py-8 text-muted-foreground">
                  <Plus className="h-12 w-12 mx-auto mb-4" />
                  <p>Attach additional resources from Content Manager</p>
                  <Button className="mt-4" onClick={() => navigate('/content')}>
                    Browse Content Library
                  </Button>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          <TabsContent value="assignments">
            <Card>
              <CardHeader>
                <CardTitle>Programme Assignments</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="p-4 bg-muted rounded-lg">
                    <h4 className="font-medium mb-2">Assignment Rules</h4>
                    <p className="text-sm text-muted-foreground">
                      Define who can access this programme and any prerequisites.
                    </p>
                  </div>
                  
                  <div className="space-y-3">
                    <div className="flex items-center space-x-2">
                      <input type="checkbox" id="auto-assign" className="rounded" />
                      <label htmlFor="auto-assign" className="text-sm">Auto-assign to new eligible learners</label>
                    </div>
                    <div className="flex items-center space-x-2">
                      <input type="checkbox" id="prerequisites" className="rounded" />
                      <label htmlFor="prerequisites" className="text-sm">Require prerequisite completion</label>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          </TabsContent>
        </Tabs>
      </div>
    </AuthenticatedLayout>
  );
}