import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { HelpCircle } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const ImportHelpDialog = () => {
  const [open, setOpen] = useState(false);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button
          variant="ghost"
          size="icon"
          className="h-8 w-8 rounded-full hover:bg-primary/10"
          title="Import Help"
        >
          <HelpCircle className="h-4 w-4 text-muted-foreground" />
        </Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>CSV Import Instructions</DialogTitle>
          <DialogDescription>
            Learn how to properly format your CSV file for employee import.
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 py-4">
          <div>
            <h3 className="font-medium text-base">Required Format</h3>
            <p className="text-sm text-muted-foreground mt-1">
              Your CSV file must include the following columns. We recommend downloading our template to ensure proper formatting.
            </p>
          </div>

          <div className="border rounded-md overflow-x-auto">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead className="w-[180px]">Column Name</TableHead>
                  <TableHead>Description</TableHead>
                  <TableHead className="w-[100px]">Required</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                <TableRow>
                  <TableCell className="font-medium">Employee Code</TableCell>
                  <TableCell>Unique identifier for the employee (e.g., EMP-001)</TableCell>
                  <TableCell>Yes</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">First Name</TableCell>
                  <TableCell>Employee's first name</TableCell>
                  <TableCell>Yes</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Middle Name</TableCell>
                  <TableCell>Employee's middle name (if applicable)</TableCell>
                  <TableCell>No</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Last Name</TableCell>
                  <TableCell>Employee's last name</TableCell>
                  <TableCell>Yes</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Email</TableCell>
                  <TableCell>Employee's email address (must be unique)</TableCell>
                  <TableCell>Yes</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Mobile</TableCell>
                  <TableCell>Employee's mobile number</TableCell>
                  <TableCell>Yes</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Type</TableCell>
                  <TableCell>Employee's job type (e.g., Developer, Designer)</TableCell>
                  <TableCell>Yes</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Academics</TableCell>
                  <TableCell>Educational qualifications</TableCell>
                  <TableCell>No</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Financial Data</TableCell>
                  <TableCell>Salary or other financial information</TableCell>
                  <TableCell>No</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Description</TableCell>
                  <TableCell>Additional notes about the employee</TableCell>
                  <TableCell>No</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Role</TableCell>
                  <TableCell>Role name exactly as defined in the system (e.g., Admin, Manager, Employee)</TableCell>
                  <TableCell>Yes</TableCell>
                </TableRow>
                <TableRow>
                  <TableCell className="font-medium">Password</TableCell>
                  <TableCell>Initial password for the employee account</TableCell>
                  <TableCell>Yes</TableCell>
                </TableRow>
              </TableBody>
            </Table>
          </div>

          <div>
            <h3 className="font-medium text-base mt-4">Tips for Successful Import</h3>
            <ul className="text-sm text-muted-foreground mt-1 space-y-2 list-disc ml-5">
              <li>Ensure all required fields are included and properly formatted</li>
              <li>Employee Codes and Email addresses must be unique</li>
              <li>Role names must match exactly with roles defined in the system</li>
              <li>Use our template for the most reliable results</li>
              <li>If you encounter errors, check the error message and fix the issues in your CSV file</li>
            </ul>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default ImportHelpDialog;